css盒子模型

Posted 2020-08-04 嘿熊

盒子模型 (block, inline-block)
提示：display属性可以调整元素为行内，块级或行内块级
w3c盒子模型的content不包含边框和padding
(1)content (width,height)
(2)border 边框
(3)padding 内边距
(4)margin 外边距
注意：外边距合并，当相邻的元素都具备非零的margin属性时，
相邻的边，外边距会重合，取值为较大的一个。

*(5) outline （部分元素）

*(6) display: (inline, block, inline-block)

6.定位与层叠
(1).绝对定位
a.绝对定位的元素，不再受文档流影响，也不会影响其它相邻元素影响
b.top,left属性，相对于非静态定位的容器左上角为坐标原点偏移,不受容器的padding影响

(2).相对定位
top,left属性,相对于元素本来应该出现的位置偏移
(3).z-index属性:控制层叠,只在position为非静态定位时有效

7.浮动 float
(1)浮动的块级元素会脱离默认的文档流
(2)清除浮动 clear
如果要使用浮动让块级元素横向排列，一定要加确定宽度的容器或给容器指定最小宽度

* 书写样式的思路，规范：
1.把页面结构看成盒子套盒子，各种盒子模型的集合
2.从外到内，从上到下，从左到右