CSS A
盒子模型 ?
标准盒子模型
box-sizing: content-box;
IE盒子模型
box-sizing: border-box;
div {
width: 200px;
padding: 10px;
border: 15px solid #eee;
}
box-sizing: content-box; -> width = 200 + 10 * 2 + 15 * 2 = 250px
box-sizing: border-box; -> width = 200px
另:
1.对于行级元素,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效
2.对于相邻的块级元素margin-bottom和margin-top 取值方式
参考 1
文档流 ?
- CSS的定位机制有3种:普通流、浮动和定位。
- 文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局。
- 浮动:(float)脱离文档流,不占空间。
- 定位:(position)
static:保持文档流。
relative:相对本身的原始位置发生位移且保持文档流,占空间。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
absolute:脱离文档流,不占空间且相对于其包含块[2][3]来定位。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
fixed:脱离文档流,当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
包含块 ?
margin折叠 ?
都是整数:取最大的
都是负数:取最小的
一正一负:相加
水平、垂直居中?
清除浮动 ?
- 添加空元素 clear: both;
.clear {
clear: both;
height: 0;
height: 0;
}
- 容器 overflow: hidden/auto; 创建BFC(zoom: 1;兼容IE6\7,触发hasLayout)
.box {
overflow: auto;
zoom: 1;
}
- 容器也浮动,创建BFC(破坏了父级元素的文档流,不推荐)
.box {
float: left;
}
- 容器使用块级伪元素
.box:before {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}