3.CSS盒子模型 border、margin、padding

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型

border 边框

如下代码代表20像素蓝色的实线(solid)边框

border:20px solid blue;

image.png

虚线(dashed)边框

border:20px dashed blue;

image.png

3D凹边(inset)

border:20px inset blue;

image.png

还有很多值，没有必要一一背下来，用时去查就可以了

我们也可以分别设置各方向边框的效果

image.png

margin 外边距

我们使用一个div包裹三个同样宽高向左浮动的div

image.png

我们发现内部的div会并列布局，第三个div因为所剩宽度小于自己的宽度，所以被挤至下面

我们为内部第一个div增加margin属性

margin: 10px;

效果如下：

image.png

margin可以同时设置4个方向的值，从上边开始，顺时针方向取值。
如下代表 上方margin10px，右方margin20px,下方margin30px，左方margin40px

margin: 10px 20px 30px 40px;

也可以不写全四个方向的值，没有值的方向就取对边方向的值
如下代表 上方margin10px，右方margin20px,下方margin30px，左方margin20px

margin: 10px 20px 30px;

如果只设置某个方向的margin,可以使用如下属性

image.png

例如，margin左边20px：

margin-left: 20px;

利用margin实现在父容器水平居中（和左右浮动一起使用无效）：

margin: 0px auto;

padding 内边距

使用方式和margin类似，背景色会填充在padding的范围内。也可以增加一条背景色的属性,让背景色只填充在内容区域

background-clip:content-box;

image.png