一、盒子相关
1.1.盒子模型
-
box model
-
组成
- 宽高所划分的区域
- 边框
- 内边距：margin
- 外边距：padding
-
复合
- padding|margin
- 四个值：上、右、下、左
- 三个值：上、左右、下
- 两个值：上下、左右
- padding|margin
1.2.盒子
-
盒子 = 容器
-
盒子可视化的大小 = 盒子本身的大小
- box-size: border-box;
- 以盒子外边距为基准
-
盒子可视化的大小以内容为基准
- box-size: content-box;
1.3.body相关
- IE8 -> 上下16px，左右8px
- IE7 -> 上下16px，左右11px
- 其他浏览器为上下左右8px
二、定位
2.1.绝对定位
- position: absolute;
- left|right，top|boottom: 基准线不一样
- 相当于新建图层，绝对定位的元素到另外一层去了，位置就会被占据
2.2.相对定位
- position: relative;
- 相对定位的元素位置不会被占据
2.3.定位用法
- 子绝父相
- z-index: 1;
- 值越大，离我们眼睛越近
三、浮动
3.1.浮动特点
-
内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置
-
块级元素无法识别浮动元素的位置
-
块级元素：清除浮动clear: both;
四、伪类和伪元素
4.1.伪类
- :before
- :after
4.2.伪元素
- ::before
- ::after
4.3.清除浮动
-
ul::after,
div::after {
content: "";
display: block;
clear: both;
}
