盒子模型、盒子的边框、内外边距、外边距的重叠传递、display属性、overflow属性、内连盒子、怪异盒模型、文档流、浮动、基本布局、高度塌陷、清除浮动

刺骨的言语ヽ痛彻心扉 2022-08-31 11:04 92阅读 0赞

### 文章目录 ###

*   *   *  盒子模型
         *  盒子模型的边框
         *  盒子的内边距
         *  盒子的外边距
         *  外边距的重叠和传递
         *   *   *  外边距重叠
         *  外边距传递
         *  浏览器拥有默认样式
         *  display属性
         *  overflow属性
         *  内联盒子
         *  box-sizing
         *   *  文档流的特点
             *  元素的默认宽度和高度
             *  浮动
             *   *  文字环绕
                 *  基本布局
                 *  高度塌陷
                 *  清除浮动

### 盒子模型 ###

*  盒子模型(Box Model)：页面中的任何元素都可以看成一个四边形的盒子
    
    有了盒子模型，就可以任意摆放元素在页面中的位置。
    
    如何摆放元素的位置称为“布局”。
 *  盒子模型的构成
    
     *  内容：content。
     *  内边距：padding，内容到盒子的边距。
     *  边框：border。
     *  外边距：margin。
 *  content+padding+border影响盒子可视区域的大小，margin影响盒子的位置

### 盒子模型的边框 ###

边框设置

*  border-width、border-style、border-color分别设置完成后才会有边框。
 *  border简写：`border:1px red solid`
 *  设置边框大小时可以使用`border-width:10px 20px 30px 40px`分别设置上右下左边框
 *  可以使用`border-width:10px 20px 30px`设置上边框10px，左右边框20px，下边框30px。
 *  可以使用`border-width:10px 20px`设置上下边框10px，左右边框20px。
 *  也可以使用`border-top-width:10px`设置上边框为10px，`border-right-width:10px`设置右边框；`border-bottom-width:10px`设置下边框，`border-left-width:10px`设置左边框
 *  边框的style和color也可以使用上述方式取值
 *  style的可选值：none：默认值，没有边框；solid：实线；dotted：点状虚线；dashed：虚线；

### 盒子的内边距 ###

*  设置边框以及内边距会影响可视区域的大小，影响盒子的实际大小。元素的背景会延伸到内边距中。
 *  盒子的可见宽=border-left-width+padding-left-width+width+padding-right-width+border-right-width
 *  盒子的可见高=border-top-width+padding-left-height+height+padding-bottom-height+border-bottom-width
 *  如果子元素宽高设置百分比属性，则根据父元素width和height属性进行计算，padding和border不计入计算范围。

### 盒子的外边距 ###

*  外边距为盒子与盒子之间的距离
 *  设置盒子的外边距不影响盒子本身的大小，但是影响盒子的位置
 *  盒子的默认位置为元素的左上角
 *  设置margin-top、margin-left的值会改变盒子本身的位置。
 *  设置margin-right、margin-bottom的值会改变盒子兄弟元素的位置。
 *  盒子的外边距可以设置为负值。
 *  margin可以设置为auto
 *  margin-left或margin-right设置为auto则为水平最大值
 *  如果水平方向同时设置margin为auto，则在父元素中水平居中
 *  垂直方向设置margin，则默认值为0

### 外边距的重叠和传递 ###

##### 外边距重叠 #####

垂直外边距重叠，在页面中相邻的垂直方向的外边距会发生重叠现象。

外边距发生重叠时，使用和相邻的兄弟元素的外边距的最大值。

### 外边距传递 ###

如果子元素的垂直外边距和父元素相邻，就会发生外边距传递现象，子元素设置的外边距传递给父元素

*  解决方式
    
    1、在父元素中设置文本内容，让父元素和子元素外边距不相邻
    
    2、设置父元素的边框。
    
    3、设置父元素的内边距
    
    子元素的不需要设置外边距，父元素的高度需要减去内边距

### 浏览器拥有默认样式 ###

每个元素在浏览器中会有默认的边距，大多数情况下我们需要自己设置内外边距，因此在使用时一般会先清除内外边距\*\{marg:0;padding:0;\}

### display属性 ###

*  display属性可以设置元素的类型
    
    inline：设置为内联元素，宽和高都失效，内容大小为元素大小
    
    block：设置为块级元素，可以设置宽和高，独占一行
    
    none：不显示元素，并且位置也不占用
    
    inline-block：设置为行内块元素，可以设置宽和高，不占整行
    
     *  visibility: hidden;隐藏元素，但是保留位置。

### overflow属性 ###

*  默认子元素存在于父元素中，如果子元素大小超出父元素，则在父元素外显示，超出部分称为溢出。
    
     *  溢出的内容可以通过overflow进行显示设置
     *  overflow:hidden，隐藏溢出部分
     *  overflow:scroll，溢出部分使用滚动条显示，存在垂直水平滚动条
     *  overflow：visible，溢出部分全部显示（默认值）
     *  overflow：auto，溢出部分使用滚动条显示，水平垂直都使用，不溢出部分不存在滚动条。

### 内联盒子 ###

内联元素设置宽和高不起作用

内联元素设置水平内边距起作用，且影响布局

内联元素设置垂直内边距起作用，但不影响布局

内联元素设置左右边框起作用，且影响布局

内联元素设置上下边框起作用，但不影响布局

内联元素设置左右外边距起作用，且影响布局

内联元素设置上下外边框不起作用。

### box-sizing ###

box-sizing设置盒子模型中的边框和内边距是否绘制在宽高之外。

box-sizing:border-box;设置padding和border属性设置在盒子之内，盒子的可视大小并没有发生改变，内容区会变小。

box-sizing:content-box;设置内边框和边框绘制在盒子之外

设置box-sizing:border-box;则盒子模式称为：怪异盒模型

怪异盒子模型width/height=content+2*border+2*padding

--------------------

网页可以理解为层层叠加的效果，文档流处在网页的最底层

我们创建的文档都默认在文档流中

#### 文档流的特点 ####

*  块元素

1.  块元素在文档流中默认会独占一行，自上而下排列，如果脱离文档流会发生变化。
2.  块元素默认在文档流中的宽度是父元素的宽度。
3.  块元素默认在文档流中的高度是被“内容”撑开。

*  行内元素

1.  行内元素在文档流中只占自身的大小，从左向右依次排开，自动换行。
2.  行内元素在文档流中的宽和高都被“内容”撑开

#### 元素的默认宽度和高度 ####

如果块元素不设置宽度，则默认宽度和父元素相同，如果宽度设置为auto或100%，也和父元素相同。

但是如果不设置宽高，则默认值为auto。

如果width和height设置为auto，再添加padding或border，可视区域不变，内容被压缩。

如果width和height设置为100%，在添加padding或border，内容区域不变，可视区域变大。

#### 浮动 ####

如果需要让块元素在页面中水平排列，则需要让块元素脱离文档流

使用float属性，让元素脱离文档流。

`float:left;`左浮动

`float:right;`右浮动

`float:none;`不浮动，默认值

浮动的特点:

1.  设置元素的float属性值为非none，则元素脱离文档流。
2.  当元素脱离文档流，紧跟着下面的元素会向上移动。
3.  元素浮动后，会向左上或右上浮动，直到遇到父元素或其他浮动元素的边框，停靠在该位置上。
4.  如果浮动元素上面有未浮动的块元素，则浮动位置不会超过未浮动的元素。
5.  块级元素浮动后，宽度不再默认占整行了
6.  如果浮动元素一行放不下，会自动换行
7.  浮动元素不会超过自己前面的兄弟元素，最多并排。

子父元素都在文档流中，父元素的默认宽度为auto，子元素的默认宽度和父元素一致。

父元素脱离文档流其宽度和高度会被子元素的宽和高撑开。

内联元素脱离文档流后会变成块级元素，宽高会起作用。

##### 文字环绕 #####

浮动元素不会覆盖文本内容，文本内容会自动环绕在元素的周围

##### 基本布局 #####

设置基本的页面布局框架。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>页面布局</title>
      <style>
        *{
         
          margin: 0;
          padding: 0;
        }
        .body{
         
          width: 1000px;
          margin: auto;
        }
        .head{
         
          height: 100px;
          background-color: yellow;
        }
        .main{
         
          height: 500px;
        }
        .left{
         
          float: left;
          width: 20%;
          height: 100%;
          background-color: aqua;
        }
        .middle{
         
          float: left;
          width: 50%;
          height: 100%;
          background-color: aquamarine;
        }
        .right{
         
          float: left;
          width: 30%;
          height: 100%;
          background-color: coral;
        }
        .footer{
         
          height: 200px;
          background-color: green;
        }
      </style>
    </head>
    <body>
      <div class="body">
        <div class="head"></div>
        <div class="main">
          <div class="left"></div>
          <div class="middle"></div>
          <div class="right"></div>
        </div>
        <div class="footer"></div>
      </div>
    
    </body>
    </html>

##### 高度塌陷 #####

文档流中没有设置宽度，则父元素宽度为auto，如果没有设置高度，则父元素高度由子元素撑开。为子元素设置浮动，子元素脱离文档流，此时子元素无法撑起父元素，导致父元素高度塌陷。如果父元素高度塌陷，则父元素下的兄弟元素会上移，导致页面布局出现混乱。

设置元素高度，解决父元素塌陷，但是高度不能自适应子元素高度。（不推荐使用）

##### 清除浮动 #####

清除浮动：表示去掉浮动对当前元素的影响，不是去除本身的浮动样式

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .div1{
         
          height: 100px;
          width: 100px;
          background-color: red;
          float: left;
        }
        .div2{
         
          width: 150px;
          height: 200px;
          background-color: gray;
          clear: left;
        }
        .div3{
         
          width: 200px;
          height: 300px;
          background-color: aqua;
        }
      </style>
    </head>
    <body>
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
    </body>
    </html>

div2的样式设置中，`clear:left;`表示清除左浮动对当前元素的影响

float的取值：left，清除左浮动对当前元素的影响；right，清除右浮动对当前元素的影响；both，清除两侧浮动对当前元素的影响；none表示不清除浮动。

清除完浮动，元素退回到原始位置，清除两侧浮动，以最大影响为主。

在子元素的下方添加div元素，并清除浮动，解决高度塌陷，但是页面中会添加多余的元素

div+clear的方式解决父元素高度塌陷，会添加多余的元素。

使用伪类的方式消除多余元素设置

.clearfix::after{
                /* 添加内容 */
                content: '';
                /* 转换为块级元素 */
                display: block;
                /* 清除浮动 */
                clear: both;
    }