- Bootstrap 框架的网格系统工作原理如下:
1 、数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) 。
<div class=" container ">
<div class=" row "></div>
</div>
2 、在行 (.row) 中可以添加列 (.column) ,但列数之和不能超过平分的总列数,比如 12 。
<div class="container">
<div class="row">
<div class="col-md- 4 "></div>
<div class="col-md- 8 "></div>
3 、具体内容应当放置在列容器( column )之内,而且只有列( column )才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距( padding )从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距( margin )来抵消内距 (padding) 的影响
vertical-align是设置设置元素的垂直对齐方式。没有text-vertical;
垂直居中对齐的标签定义是:<vertical-align:center>
UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。
GBK是汉字编码,是双字节码,可表示繁体字和简体字。
ISO8859-2 字符集,也称为 Latin-2,收集了东欧字符。
hover -> focus -> active
悬停 -> 聚焦 -> 响应
Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。
一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度;
display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。
display:none与visibility:hidden都可以用来隐藏某个元素
浏览器 的内核引擎,基本上是四分天下:1)Trident: IE 以Trident 作为内核引擎;2)Gecko: Firefox 是基于 Gecko 开发;3)WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;4)Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini
.屏幕的尺寸标准
| 超小屏幕(手机) | 小屏幕(平板) | 中等屏幕(桌面) |大屏幕(桌面)
| -------- | -----: | :----: |
| <768px | >=768 | >=992 |>=1200
| .col-xs- | .col-sm- | .col-md- |.col-lg-
1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
2,@import 是css2里面的,所以古老的ie5不支持。
3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
W3C标准定义的阻止事件向父容器传递: e.stopPropagation()
DOM中的事件对象:(符合W3C标准)
preventDefault() 取消事件默认行为
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
stopPropagation() 取消事件冒泡对当前节点无影响。
IE中的事件对象:
cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为
栅格系统的工作原理中有,为了创建列(colume)之间的间隔 需要设置padding,而且需要设置margin为负值,消除第一个和最后一个之间padding的影响。
float有四个值left,right,none(默认值)和inherite(从父类继承而来的浮动)。