DAY 9

盒子模型

盒子模型，就是把HTML页面中的布局元素看作一个矩形盒子，也就是一个容器，可以在里面放置网页中需要显示的内容。文档中每一个元素都会产生一个盒子，盒子拥有很多属性，如width、height、padding（内边距）、border（边框）和margin（外边距）等。

外边距(margin)

外边距是元素边框边缘与香菱元素之间的距离。如下图中的浅灰色部分。使用margin属性设置外边框。使用margin属性来定义元素外边距，属性值单位可以为长度单位（px、pt、em、ex、in）或百分比，取值可以为正值或负值。同时外边距还有专门设置某一方向上外边距的属性：当使用margin设置四个方向的外边距时，根据输入的属性值个数不同，对应不同方向的外边距。当属性值少于四个时，会出现一值多用。

margin: 1px;/*等价于1px 1px 1px 1px*/
margin: 1.5px 3px;/*等价于1.5px 3px 1.5px 3px*/
margin: 2px 3px 5px;/*等价于2px 3px 5px 3px*/

外边距可以让块级盒子水平居中，但必须满足两个条件：

盒子必须指定宽度width。
盒子的左右外边距都设置为auto。

 div{
       width: 300px;
       margin: 3px auto;
       background-color: pink;
    }

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意： 以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

外边距合并

外边距合并是指，当两个垂直外边距相遇时，它们将合并成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

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

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

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

空元素合并

一个空元素，它有外边距，但是没有边框或填充，这种情况下，上外边距与下外边距就碰到了一起，就会发生合并。

如果空元素外边距遇到另一个元素的外边距，也会发生合并。

外边距合并的意义？

外边距合并初看上去可能有点奇怪，但实际上它是有意义的。如下图所示，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

边框(border)

边框在网页布局中就是用来分割模块。如下图中的黑色部分。 border属性可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色。

border : border-width || border-style || border-color

border-style有以下属性值：

none:无边框
solid:实线边框
dashed:虚线边框
dotted:点线边框

border还有其他属性，如border-top、border-right、border-bottom、border-left，分别表示四个方向的边框,可以与width、color、style组合写，

border-top-style:dashed;/*设置上边框的样式*/
border-left-color: red;/*设置左边框的颜色*/

表格的细线边框

border-collapsee 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse; /*表示相邻边框合并在一起，collaps是合并的意思*/

用法：通过css属性：table{ border-collapse:collapse; }

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<style>
table {
   border-collapse: collapse;
}

table,td, th {
    border: 1px solid blue;
}
</style>

使用了collapse：

未使用collapse：

CSS3新增：圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。用border-radius属性用于设置元素的外边框圆角。

border-radius:length; /*参数值可以为数值或百分比的形式*/
border-top-left-radius   /*定义了左上角的弧度*/
border-top-right-radius   /*定义了右上角的弧度*/
border-bottom-right-radius   /*定义了右下角的弧度*/
border-bottom-left-radius   /*定义了左下角的弧度*/

div {
        background-color: deepskyblue;
        width: 300px; 
        height: 300px;
        border-radius: 50%;/*把一个300px*300px的正方形变成圆形*/
    }

border-radius的属性值定义规则：

内边距

内边距就是元素包含的内容与元素边框内边沿之间的距离。如下图，深灰色表示盒子的内边距。 padding 属性用于设置内边距，即边框与内容之间的距离。内边距有padding、padding-top、padding-right、padding-bottom、padding-left五种属性。设置四个方向的内边距规则跟外边距一样，当padding的属性值为四个时，同样按照“上右下左”的顺序设置内边距。当然也可以通过使用单边内边距来设置不同方向内边距。

h1{
   padding-top:10px;
   padding-right-0.25em;
   padding-bottom-2ex;
   padding-left:20%;
  }

设置内边距的影响：

设置了padding内边距后，会发生两件事：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

<body>
    <div>
        <p></p>
    </div>
</body>

<style>
        div {
            background-color: deepskyblue;
            width: 300px; 
            height: 200px;         
        }

        div p {
            width: 100%; /*写了这条，又设置了padding，就会撑爆盒子*/
            padding: 30px;
            height: 100px;
            /* 这样其实p的高是100+30+30=160 */
            background-color: plum;
        }
</style>

屏幕截图 2023-05-06 200956.jpg

内边距和外边距怎么用？什么时候用哪个？

内边距和外边距在用法上有很大相似性，使用时要注意以下几点：

当元素没有定义边框时，可以把内边距当作外边距来使用，用来调节元素与其它元素之间的距离。由于外边距相邻时会出现重叠现象，而且比较复杂，使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题。
当为元素定义背景时，对于外边距区域来说，背景图像是不显示的，它永远表现为透明状态；而内边距区域却可以显示背景。
行内元素的内边距能够影响元素边框的大小，而外边距不存在这样的问题。

CSS基础（5）| 青训营笔记