4.1 CSS盒子模型

骑猪看日落 2023-01-15 15:23 102阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*  CSS盒子模型
 *   *  1.1 盒子模型的组成
     *  1.2 盒子模型的边框border
     *  1.3 盒子模型内边距padding
     *  1.4 盒子模型外边距margin
     *  1.5 外边距合并
     *  1.6 清除内外边距

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

# CSS盒子模型 #

页面布局的三大核心：盒子模型、浮动和定位

网页布局过程：1.先准备好相关的网页元素，网页元素基本上都是盒子Box；2.利用CSS设置好盒子样式，然后摆放到相应位置；3.往盒子里面庄内容

## 1.1 盒子模型的组成 ##

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器

CSS模型本质就是一个盒子，封装周围的HTML元素，他包括：**边框、外边距、内边距和实际内容**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdfLSy7W-1619140272831)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210422203844831.png)\]][img-xdfLSy7W-1619140272831_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210422203844831.png]

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

border可以设置元素的边框，边框由三部分组成：**边框宽度**（粗细, 单位px）、**边框样式**(solid:实线；dashed:虚线；dotted:点线）、**边框颜色**

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

1.边框的复合写法：

border: 1px solid red; /*没有顺序*/

2.边框分开写法：

border-top: 5px dashed red;  /*只设定上边框，其余同理*/

可以利用层叠性，设置其余边框为蓝色，只有上边框为红色

border: 1px solid blue;
    border-top: 1px solid red; /*下面会覆盖上面*/

3.表格细线边框：border-collapse属性控制浏览器绘制表格边框的样式，他控制相邻单元格的边框

4.边框会额外增加盒子的实际大小。因此我们有两种解决方案：

*  测量盒子大小的时候，不量边框
 *  如果测量的时候包含了边框，则需要width/height减去边框的宽度

## 1.3 盒子模型内边距padding ##

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

1.上下左右内边距单独设置：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">padding-left</td> 
   <td align="center">左内边距</td> 
  </tr> 
  <tr> 
   <td align="center">padding-right</td> 
   <td align="center">右内边距</td> 
  </tr> 
  <tr> 
   <td align="center">padding-top</td> 
   <td align="center">上内边距</td> 
  </tr> 
  <tr> 
   <td align="center">padding-bottom</td> 
   <td align="center">下内边距</td> 
  </tr> 
 </tbody> 
</table>

2.padding复合写法（都需记住，顺时针方向设置）：

<table> 
 <thead> 
  <tr> 
   <th align="center">值的个数</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">padding：5px;</td> 
   <td align="center">1个值，代表上下左右都有5像素的内边距</td> 
  </tr> 
  <tr> 
   <td align="center">padding: 5px 10px;</td> 
   <td align="center">2个值，代表上下内边距是5像素，左右内边距是10像素</td> 
  </tr> 
  <tr> 
   <td align="center">padding: 5px 10px 20px;</td> 
   <td align="center">3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素</td> 
  </tr> 
  <tr> 
   <td align="center">padding: 5px 10px 20px 30px;</td> 
   <td align="center">4个值，代表上5像素，右10像素，下30，左内边距40像素（<strong>顺时针</strong>）</td> 
  </tr> 
 </tbody> 
</table>

3.padding也会影响盒子的实际大小，也就是说如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

解决方案：如果要保证盒子与效果图大小一致，则让width/height减去多出来的内边距大小即可。

4.可以利用padding内边距会撑开盒子的作用，做一个非常巧妙的应用，例如制作导航栏时，由于每个导航栏存放的字数不一样多，我们可以不用给每个盒子单独指定不同宽度，直接给相同的padding最合适

5.padding不会撑开盒子的情况：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

例如div标签指定宽度为300px，div里放一个p标签并不指定宽度，即使设置p的内边距，它的盒子大小仍然和父亲（div）相等的，即300px。

## 1.4 盒子模型外边距margin ##

margin属性用于设置外边距，即控制盒子和盒子之间的距离

1.上下左右外边距单独设置：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">margin-left</td> 
   <td align="center">左外边距</td> 
  </tr> 
  <tr> 
   <td align="center">margin-right</td> 
   <td align="center">右外边距</td> 
  </tr> 
  <tr> 
   <td align="center">margin-top</td> 
   <td align="center">上外边距</td> 
  </tr> 
  <tr> 
   <td align="center">margin-bottom</td> 
   <td align="center">下外边距</td> 
  </tr> 
 </tbody> 
</table>

2.此外，margin的复合写法与padding完全一致，同样可以写1个，，4个值，也是顺时针方向设置的。

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

*  盒子必须指定了宽度
 *  盒子左右的外边距设置为auto
    
        .header {
              
            width: 960px;
            margin: 0 auto;
        }
    
    常见的写法，以下三种都可以：
    
     *  margin-left: auto; margin-right: auto;
     *  margin: auto;
     *  margin:0 auto;
    
    **注意**：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父亲添加 text-align：center即可；

## 1.5 外边距合并 ##

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

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m48i7jmf-1619140272836)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210423083145774.png)\]][img-m48i7jmf-1619140272836_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423083145774.png]

**解决方案**：尽量只给一个盒子添加margin值

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlJZ0XwQ-1619140272837)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210423084524494.png)\]][img-jlJZ0XwQ-1619140272837_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423084524494.png]

**解决方案：**

*  可以给父元素定义上边框
 *  可以给父元素定义上内边距
 *  可以给父元素添加overflow：hidden
 *  还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面再总结

## 1.6 清除内外边距 ##

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距

* {
        
        padding: 0;  /*清除内边距*/
        margin: 0;	 /*清除外边距*/
    }

**注意**：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级或者行内块元素就可以了

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-xdfLSy7W-1619140272831_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210422203844831.png]: /images/20221022/4add8fdb8b9b40beb4b6bd1da78fd69e.png
[img-m48i7jmf-1619140272836_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423083145774.png]: /images/20221022/4a5ad7f4bd134167a7591c058a78fa22.png
[img-jlJZ0XwQ-1619140272837_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423084524494.png]: /images/20221022/8df0b316e64a48cea41d9613af75bb37.png