盒子模型
概念: 网页页面中每一个标签,我们都可以理解为一个“盒子”
好处: 更加方便进行布局,也就是在美工美眉给我们发来设计图时,作为切图仔的我们就可以将页面中每个元素理解成盒子,合理地摆放、嵌套进行布局。
组成: 盒子由四部分组成——
内容区域content
内边距区域padding
边框区域border
外边距区域margin
盒子尺寸包括border、padding、以及content
内容的宽高
width和height属性的设置默认就是内容区域的大小
前面也说过,取值是数字+px即可
width:100px;
height:100px;
边框
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实线-solid、虚线-dashed、点线-dotted |
边框颜色 | border-color | 颜色取值 |
和font
、background
一样,border也可以连写
border:粗细 样式 颜色
border:10px solid red;
内边距
边框与内容区域之间的距离
padding 可以直接连写,最多是个值,分别的方向指的是上右下左,没错就是顺时针的方向
padding:10px 20px 30px 40px;
padding的取值设置1位,2位,3位都是可以的
那些没有被赋值的padding方向怎么办?
答案:看对面的
假设你只赋了三个值,左边没赋,那么左边就会默认设置为和你右边设置的值一样,也就是第二个值
同理,如果你想要盒子上下内边距一样,左右内边距一样,只需要设