自省CSS-3

发表于 | 分类于 ， ，

盒模型

  • 标准盒模型: 内容宽度 = content的宽度
  • IE盒模型: 内容宽度 = content宽度 + border + padding
  • 可以通过box-sizing控制盒模型,content-box,border-box

display

  • inline(默认): 内联,水平线排列
  • block(块): 一个快占据一行
  • table(表格): 表格展示
  • list-item: 列表展示
  • inline-block: 行内块元素
  • none: 不显示,隐藏

position

  • static: 默认
  • relative:相对定位,不脱离文档流,在自身原有位置移动
  • absolute: 以最近的一个部位static的父元素为参照,进行位移,如果不存在,则以根元素为参照
  • fixed: 相对于浏览器窗口进行定位

浏览器解析CSS

  • 从右向左解析,先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历

如果需要手动写动画，你认为最小时间间隔是多久

  • 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

display:inline-block产生的问题

问题

  • 两个inline-block放到一起,中间会有间隙空白
  • 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所
  • 以inline-block的元素之间就出现了空隙。

解决办法

  • 结束标签和开始标签写在一行

    1
    2
    3
    4
    5
    6
    7
    <div>
    	<div>
    		第一个inline-block
    	</div><div>
    		第二个inline-block
    	</div>
    </div>

  • 父元素设置font-size:0,子元素重新设置正确的字体大小

  • 子元素都设置 float:left

清除浮动

1
2
3
4
5
6
7
8
9
10
11
/* bootstrap 清除浮动 */
.clearfix {*zoom: 1;}
.clearfix::after,.clearfix::before{
    display: table;
    line-height: 0;
    content: "";
}
.clearfix::after{clear: both;}

/*只用after伪元素*/
.