盒子模型的详细介绍

第六章  盒子模型

---

目录

第六章  盒子模型

一、盒子是什么？

二、使用步骤

2.1 边框

2.1.1border-color（边框颜色）

2.1.2 border-width（边框粗细）

2.1.3 border-style

2.1.4 border

2.2 边距

2.2.1 margin

2.2.1 居中

2.2.3 padding

2.2.4 box-sizing

总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、盒子是什么？

标题

二、使用步骤

2.1 边框

2.1.1border-color（边框颜色）

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

2.1.2 border-width（边框粗细）

像素值即可

2.1.3 border-style

常用：dashed、solid

2.1.4 border

简写： border:1px solid #3a6587;

2.2 边距

2.2.1 margin（外边距）

        margin-top、margin-right、margin-bottom、margin-left

2.2.1 居中

        margin:0px  auto;

2.2.3 padding（内边距）

        padding-left、padding-right、padding-top、padding-bottom

2.2.4 box-sizing

2.2.4 border-radius

        设置圆角。

2.2.4 box-shadow（盒子阴影）

跳转链接：盒子阴影

2.2.4 box-sizing

跳转链接：box-sizing属性

---

总结

提示：这里对文章进行总结：

 练习：自行安排。

例如：以上就是今天要讲的内容。