css盒子模型

盒子模型 (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.从外到内,从上到下,从左到右

原文地址:https://www.cnblogs.com/yangwenxin/p/5811723.html