42 lines
1.1 KiB
Plaintext
42 lines
1.1 KiB
Plaintext
盒子模型：
|
||
|
||
1: 宽高
|
||
2: 边框 border
|
||
3：内边距 padding
|
||
4：外边距 margin
|
||
5：content内容
|
||
|
||
盒子模型真实宽高 = 宽 + border(左右) + padding（左右） x 高 + border(上下) + padding（上下）
|
||
|
||
box-sizing
|
||
|
||
|
||
定位：position
|
||
|
||
1：相对定位 relative
|
||
|
||
元素被设置 相对定位 后，不会脱离文档流，他原本位置还在。
|
||
定位参考对象：
|
||
1：他原本的位置（左上角）
|
||
|
||
2：绝对定位 absolute
|
||
元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
|
||
定位参考对象：
|
||
1：如果绝对定位的元素有父元素
|
||
1.1: 父元素已经定位,那么参考父元素的初始位置进行定位参考
|
||
1.2: 父元素没有定位, 那么参考浏览器边框进行定位
|
||
|
||
3：固定定位 fixed
|
||
元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
|
||
定位参考对象：
|
||
永远参考浏览器进行定位
|
||
|
||
|
||
4：默认定位
|
||
就是浏览器的默认文档流，自上向下
|
||
|
||
|
||
z-index: 设置定位元素的层级
|
||
|
||
数值越小，越向下
|
||
反之向上 |