关于前端:CSS-盒子模型

盒子模型，就是把 HTML 页面中的元素看成一个个矩形的盒子，也就是一个能盛装内容的容器。

CSS 盒子模型包含：边框、外边距、内边距、理论内容。

1、边框（border）

div {  width: 200px;  height: 200px;  /* border-width 边框粗细，个别指定为具体像素值 */  border-width: 5px;  /* border-style 边框款式，罕用的有：     solid: 实线边框 ｜dashed: 虚线边框 ｜dotted: 点线边框 */  border-style: solid;  /* border-color 边框色彩 */  border-color: blue;}

边框属性能够简写为：

border: 5px solid blue;

咱们还能够独自设置某个边框的款式：

border-top: 5px solid blue;

在表格中，每一个单元格是一个盒子，在设置单元格边框时，相邻单元格的边框会叠加，变成 2 倍的 border-width，此时能够用 border-collapse 合并边框：

border-collapse: collapse;

须要留神的是，边框会影响盒子理论的大小，在下面的代码中，盒子宽高都是 200px，边框为 5px，那么盒子理论大小为 210px * 210px。

2、内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的间隔。

padding-left: 8px;     /*左内边距*/padding-right: 8px;    /*右内边距*/padding-top: 8px;      /*上内边距*/padding-bottom; 8px;   /*下内边距*/

内边距属性简写能够有一到四个值：

• padding: 8px; （ 代表上下左右的内边距都是 8px ）
• padding: 8px 10px; （ 代表高低内边距为 8px，左右内边距为 10px ）
• padding: 8px 10px 20px; （ 代表上内边距为 8px，左右内边距为 10px，下内边距为 20px ）
• padding: 8px 10px 16px 20px; （ 代表上内边距为 8px，右内边距为 10px，下内边距为 16px，左内边距为20px，记忆：顺时针方向 ）

当咱们为盒子增加 padding 后，内容与边框之间有了间隔，padding 影响了盒子的理论大小

如果 盒子曾经有了宽度和高度，设置 padding 会撑大盒子；如果 盒子自身没有指定width/height，则设置 padding 不会撑大盒子。

3、外边距（margin）

margin 属性用于设置外边距，即盒子和盒子之间的间隔。

外边距的用法和 padding 统一。

在理论开发中，外边距能够让 块级盒子程度居中：

.box {  width: 500px;    /* 1、为盒子设置宽度 */  margin: 0 auto;    /* 2、设置盒子的左右外边距都为 auto */}

如果想让 行内元素或者行内块元素程度居中，能够给其父元素增加 text-align: center;

相邻块元素垂直外边距的合并

当高低两个相邻的块元素相遇，如果下面的元素设置了 margin-bottom，上面的元素有 margin-top，则他们之间的垂直距离不是二者之和，而是取两个值中的较大者，这种景象被称为 相邻块元素垂直外边距的合并。

.box1 {  margin-bottom: 20px;}.box2 {  margin-top: 10px;}<div>  <!-- 两个盒子的理论间距为 20px -->  <div class="box1">盒子 1</div>  <div class="box2">盒子 2</div></div>

这种状况，咱们 只给其中一个盒子设置 margin 即可。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距，同时子元素也有上外边距，此时 父元素会塌陷较大的外边距。

.father {  margin-top: 20px;}.child {  margin-top: 50px;}<div>  <!-- 父元素实际上外边距为 50px -->  <div class="father">    <div class="child">我是子元素</div>  </div></div>

解决方案有三种：

1. 为父元素设置上边框（ border-top ）
2. 为父元素定义上内边距（ padding-top ）
3. 为父元素增加属性 overflow: hidden

4、CSS3 新个性

4.1 圆角边框

在 CSS3 中新增了圆角边框款式，这样咱们能够给盒子设置圆角了。

border-radius: 20px;border-radius: 50%;

参数能够是数值，也能够是百分比，如果盒子是个正方形，设置 border-radius 为 50%，就能够将盒子设置成一个圆形。

border-radius 是个简写属性，咱们也能够独自设置盒子某个角的圆角款式：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

4.2 盒子暗影

在 CSS3 中新增了 box-shadow 属性，能够为盒子增加暗影。

/* 语法：box-shadow: h-shadow v-shadow blur spread color inset */box-shadow: 10px 10px 6px 4px rgba(0,0,0,.3);

- 默认的是外暗影（outset），然而不能够写这个值，不然会导致暗影有效
- 设置暗影不占盒子空间，不影响盒子排列