布局的核心之一：盒子模型（Box Model）

﹏ヽ暗。殇╰゛Y 2022-03-16 00:52 358阅读 0赞

**目录**

一、盒子模型在网页中的呈现

二、盒子模型各个部分的介绍

1、盒子边框（border）

2、内边距 （padding）

3、外边距  （margin）

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

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

# 一、盒子模型在网页中的呈现 #

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70][] ##

盒子的内边距padding与外边距margin

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70 1][]

盒模型的宽度=width+padding+border=margin

盒模型的宽度=width+padding-left+padding-right+border-right+border-left+margin-left+margin-right

width    宽度            
padding    内边距    有效内容和边框的距离    padding-left    padding-right  
border    4个边框         border-left    border-right  
margin    外边距    两个盒子的距离 调整盒子的距离    margin-left   margin-right

# 二、盒子模型各个部分的介绍 #

## 1、盒子边框（border） ##

语法：

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

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

### 表格的细线边框 ###

border-collpase:collpase
    /*表示边框合并再一起*/

### 盒子边框总结 ###

设置内容                                 样式属性  
边框宽度  border-width    边框样式  border-style    边框颜色  border-color  
上边框     border-top-width    border-top-style    border-top-color  
下边框    border-bottom-width    border-bottom-style    border-bottom-color  
左边框    border-left-width    border-left-style    border-left-color  
右边框    border-right-width    border-right-style    border-right-color

## 2.内边距 （padding） ##

设置了盒子的内边距之后，在浏览器中显示的盒子会增大，此时必须减小width

<table> 
 <tbody> 
  <tr> 
   <td>padding-top</td> 
   <td>上边距</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>下边距</td> 
  </tr> 
  <tr> 
   <td>padding-left</td> 
   <td>左边距</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td>右边距</td> 
  </tr> 
 </tbody> 
</table>

注意：padding后面跟几个数值的意思是不一样的

值的个数    表达意思  
1个值    padding:3px                          上下左右都是3px  
2个值    padding:3px 5px                    上下3px   左右5px  
3个值    padding:3px 5px 10px            上3px  左右5px 下10px  
4个值    padding:3px 5px 10px 15px    上3px  右5px  下10px 左15px(顺时针)

## 3.外边距  （margin） ##

### （1）总结 ###

<table> 
 <tbody> 
  <tr> 
   <td>margin-top</td> 
   <td>上外边距</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>下外边距</td> 
  </tr> 
  <tr> 
   <td>margin-left</td> 
   <td>左外边距</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>右外边距</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>上下左右边距</td> 
  </tr> 
 </tbody> 
</table>

值的个数    表达意思  
1个值    margin:3px                          上下左右都是3px  
2个值    margin:3px 5px                    上下3px   左右5px  
3个值    margin:3px 5px 10px            上3px  左右5px 下10px  
4个值    margin:3px 5px 10px 15px    上3px  右5px  下10px 左15px(顺时针)

### （2）外边距实现盒子居中 ###

可以让一个盒子实现水平居中，需要满足以下两个条件：

<table> 
 <tbody> 
  <tr> 
   <td>1.必须是块级元素</td> 
  </tr> 
  <tr> 
   <td>2.盒子必须制定宽度&nbsp;&nbsp; width</td> 
  </tr> 
 </tbody> 
</table>

.box{
        width:300px;
        margin:0 auto;
     
    }

### （3）清除元素的默认边距：全局选择器 ###

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

### （4）外边距合并 ###

<table> 
 <tbody> 
  <tr> 
   <td>相邻块元素垂直外边距的合并（外边距塌陷）</td> 
   <td>尽量避免</td> 
  </tr> 
  <tr> 
   <td>嵌套块元素垂直外边距的合并</td> 
   <td> <p>1.父元素定义上边框或上内边距</p> <p>2.为父元素添加&nbsp;&nbsp; overflow:hidden</p> </td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*外边距塌陷，尽量去避免，两个外边距，会选一个大的*/
            .father{
                width: 400px;
                height: 600px;
                border: 1px solid black;
                margin: 0 auto;
            }
            .first-child{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin-bottom: 80px;
     
            }
            .second-child{
                width: 200px;
                height: 200px;
                background-color: blue;
                margin-top: 50px;
            }
     
        </style>
    </head>
    <body>
    <div class="father">
        <div class="first-child"></div>
        <div class="second-child"></div>
     
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70]: /images/20220316/1079368e3cde495b943a76e5405d2d74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70 1]: /images/20220316/daba4d9ec8644d3cbe56b5f9b84556bf.png