标准盒模型
- margin：外边距，盒子和盒子之间的距离
- border：盒子的边框
- padding：内边距
- content：内容（可以是文本也可以是子标签）
border
-
概念：盒子的边框
-
设置：
//1.每个方位单独设置 ：大小 颜色 样式 border-方位-width: 10px; border-方位-color: red; border-方位-style: solid; //2.一个方位进行复合属性设置 border-方位: 10px dotted blue; //3.四个方位同时设置复合属性 border: 40px solid red;-
样式设置：
solid：表示实线dashed：虚线边框dotted：点线double：双实线
-
注意：颜色不设置时，默认为黑色 大小不设置时，默认为1.5 样式不能省略
-
-
特点：
- 背景颜色在边框区域也会进行铺设
- 边框会改变盒子实际大小
- 边框渲染原理：单独一条边框为矩形，相邻边框之间为对角线平分
-
设置三角形：
- 盒子宽高都设置为0
- 四条边框同一设置为
transparent（透明色） - 单独给某一条边框设置颜色即可
padding
-
概念：盒子的内边距。盒子的内容区域和边框之前的距离
-
设置：
/* 单独设置 */ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; /* 复合属性 */ //一个值 上下左右 padding: 20px; //两个值 上下 左右 padding: 10px 20px; //三个值 上 左右 下 padding: 10px 20px 30px; //四个值 上 右 下 左 padding: 10px 20px 30px 40px ; -
特点：
- 会改变盒子实际大小
盒子实际大小计算
- 盒子实际高度 =
height + padding上 + padding下 + border上 + border下 - 盒子实际宽度 =
width +padding左 + padding右 + border上左 + border右
盒子的占地大小
- 盒子占地高度 =
height + padding上 + padding下 + border上 + border下+margin上 +margin下 - 盒子占地宽度 =
width +padding左 + padding右 + border上左 + border右+margin左 +margin右
