盒子模型
-
什么是盒子模型?
可以把页面上的每一个元素看成一个盒子,这是一个抽象的概念
-
盒子模型的组成
盒子模型由内容,内边距,边框和外边距组成
-
盒子属性
border:边框大小 线类型 颜色;( 复合属性) border-style:边框样式 (虚线dotted,实线solid) border-top-style:顶部边框类型 border-right-style 右 border-bottom-style 下 border-left-style 左 border-color:边框颜色; border-top-color:上边框颜色;.....
-
盒子边距、大小
padding 内边距,边框与内容之间的距离(margin外边距) 一个值的时候: 代表四个方向值一样 上右下左(顺时针) 二个值的时候: 上下 右左 三个值的时候: 上 右左 下 四个值的时候: 上 右 下 左 注意: 行内元素-上下无效果,右左有效果 margin:auto; 水平方向快速居中,垂直方向不存在 margin垂直方向间距合并,水平方向正常 盒子大小=样式宽+内边距+边框
浮动
float:left 左浮动
float:right 右浮动
overflow:hidden; 解决坍塌问题
盒子定位
position:
static 默认定位。 静态定位,默认值不会发生任何变化
relative 相对定位 相对定位,不会脱离文档流以自身元素为参考,可以给 top/right/bottom/left
absolute 绝对定位 绝对定位,脱离文档流,默认以窗口为参考.有定位父级则父级参考可以给top/right/bottom/left
fixed 固定定位 固定定位,脱离文档流默认以窗口为参考,可以给top/right/bottom/left窗口滚动,依然不会变.
fixed 固定定位,相对于浏览器窗口进行定位
方向词
left
right
top
bottom
z-index 规定定位的层级(默认0)
值:number 值越大层级越高