盒子模型
css
盒子模型
- 所有的页面元素都可以看成一个盒子,并且占据着一定的页面空间
- 盒子模型是由
content
(内容)、 padding
(内边距)、 margin
(外边距)、 border
(边框)这四个属性组成的。
border
边框
复合样式:border:边框大小 类型 颜色;border:5px solid #006633;
border-width: 5px; 大小
border-style: solid; 类型
border-color: red; 颜色
border-top:0px;
border-top:none;
-
border-width
边框大小
- 四个值:上 右 下 左(顺时针)
- 三个值:上 左右 下
- 二个值:上下 左右
- 一个值:四个方向值相等
-
border-top-width
顶部边框大小
-
border-right-width
右边框大小
-
border-bottom-width
底部边框大小
-
border-left-width
左边框大小
-
border-style
边框类型
-
solid
实线
-
dashed
虚线
-
dotted
点线
-
double
双边框
-
border-top-style
顶部边框类型
-
border-right-style
右边框类型
-
border-bottom-style
底部边框类型
-
border-left-style
左边框类型
-
border-color
边框颜色
- 四个值:上 右 下 左(顺时针)
- 三个值:上 左右 下
- 二个值:上下 左右
- 一个值:四个方向颜色一样
-
border-top-color
顶部边框颜色
-
border-right-color
右边框颜色
-
border-bottom-color
底部边框颜色
-
border-left-color
左边框颜色
border-radius:50% 圆角正方形
border-radius: 20px 40px
-
padding
内边距,边框与内容之间的距离
- 四个值:上 右 下 左(顺时针)
- 三个值:上 左右 下666
- 二个值:上下 左右
- 一个值:四个方向值相等
-
padding-top
顶部内边距
-
padding-right
右内边距
-
padding-bottom
底部内边距
-
padding-left
左内边距
- span行内元素:加panding,左右有效,上下无效,没有占位置(会盖住div)
-
margin
外边距,元素与其他元素的距离(边框以外的距离)
…垂直方向,取两者较大的margin
…水平,取两个margin的和
overflow:hidden :解决内边距重叠问题(防止移动里面元素,外面元素边框跟随移动)
给爸爸加(加在浮动元素的父元素上面) 也可以清除浮动
盒子大小的计算
content+border+padding
盒子大小 = 样式宽 + 内边距 + 边框
盒子宽度 = 左border+左padding+width+右padding +右border
-
盒子高度 = 上border+上padding+height+下padding+下border
float
浮动
position
定位
规定元素的定位类型
static
静态定位(没有定位),默认
relative
相对定位,相对于其正常位置进行定位
-
relative: 给了方向值才有作用,不给值的话相当于没起作用,它占的位置还是原来的位置,不会占用移动之后的位置(元素走了,在原来位置还占一个坑)
position:relative
left:50px;
- 不会脱离文档流
- 不影响元素本身的特性
- 如果没有定位偏移量,对元素本身没有任何影响
-
absolute
绝对定位,参考最近非static
定位的父级进行定位
- 使元素完全脱离文档流
- 没有定位父级则相对于body(整个文档)发生偏移
- 绝对定位一般配合相对定位使用
fixed
固定定位,相对于浏览器窗口进行定位。可视窗口的固定
-
方位词
- left: 距离左边的距离
- right: 距离右边的距离
- top:距离顶部的距离
- bottom:距离底部的距离
- z-index 规定定位的层级(默认0)1
- 值:number 值越大层级越高