CSS盒模型

html文档中的每个元素都没描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占有用空间，这个模型称为盒模型。

盒模型通过四个边界来描述：

• margin（外边距）
• border（边框）
• padding（内边距）
• content（内容区域）

盒模型.png

盒模型基础属性：

• width（宽度）
  ├─ min-width
  ├─ max-width

• height（高度）
  ├─ min-height
  ├─ max-height

• padding（内边距）
  ├─ padding-top
  ├─ padding-right
  ├─ padding-bottom
  ├─ padding-left

• border（边框）
  ├─ border-top
  ├─ border-right
  ├─ border-bottom
  ├─ border-left

• margin（外边距）
  ├─ margin-top
  ├─ margin-right
  ├─ margin-bottom
  ├─ margin-left

1、padding，border，margin都是可选的，默认值为0，但浏览器会自行设置元素的margin和padding，通过在CSS样式表中设置，来覆盖浏览器样式。

*{
    margin:0;
    padding:0;
}

2、水平居中。

对于固定宽度的块级元素，设置margin-left:auto,margin-right:auto,即可实现水平居中。

<div class = "container">
  内容
</div>

.container{
    width:500px;/*max-width:500px*/
    margin:auto;
}

3、外边距合并

在正常流下，外边距会进行合并。

a、相邻元素边距会合并。

<h1>好好学习</h1>
<h2>天天旷课</h2>

h1 { margin: 20px 0; }
h2 { margin: 30px 0; }

b、父子元素合并。
c、浮动元素和绝对定位元素的外边距不会合并

4、外边距为负

设置 margin-left margin-right 为负数可以增加块状元素宽度。

<div class="T"></div>

<style>
  .T{
  width: 20px;
  height: 300px;
  margin: 50px auto;
  background: orange;
  }
  .T::after{
  content: '';
  height: 20px;
  margin: 0 -100px;
  display: block;
  background: red;
  }
</style>

外边距为负.png

5、box-sizing

box-sizing用于更改计算元素的宽度和高度的默认的CSS盒模型。
box-sizing:content-box;(默认值)

.box{
    width:200px;
    border:30px;
}

渲染出来的盒子宽度为：260px;

box-sizing:border-box;

.box{
   width: 300px;
   border: 10px;
   padding: 10px;
   box-sizing: border-box;
}

渲染出来的盒子宽度为：300px;

6、水平格式化

水平格式化的7大属性：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
这7个属性值之和 = 父级元素width的值

其中 margin-left，margin-right，width可以设置为auto。

a、一个属性设置成auto

 <div class="parent">
    <div class="block">块级元素</div>
 </div>


 <style>
    .parent {
      width: 600px
    }

    div {
      background: red;
    }

    .block {
      background: yellow;
      margin-left: auto;
      margin-right: 100px;
      padding: 30px;
      width: 100px;
    }
  </style>

如果三个属性中某个属性设置为auto，其余两个为特定的值，那么设置auto的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的width。

效果图.png

盒模型图.png

被设置为auto的margin-auto属性值为340px。
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width
↓↓↓
340+0+30+100+30+0+100=600

b、总和不等于父元素的width

使用auto可以弥补实际值与所需总和的差距，如果三个属性都设置特定的值，但是总和不等于父级元素的width。
修改上面例子中的margin-left为100px，即

    .block {
      background: yellow;
      margin-left: 100px;
      margin-right: 100px;
      padding: 30px;
      width: 100px;
    }

效果图.png

盒模型图.png

在上面的CSS中，margin-left，width，margin-right都设置了特定值，七大属性总和≠父级元素的width。

c、width设置为auto
如果margin-left和margin-right都设置特定的值，width设置为auto，则width将会等于某个特定值以达到父级元素的width。

.block {
  background: yellow;
  margin-left: 100px;
  margin-right: 100px;
  padding: 30px;
  width: auto;
}

效果

盒模型图

元素的width将被设定为340来使总和达到父级元素的width。

d、margin-left和margin-right设置成auto

如果margin-left和margin-right都设置为auto，则它们会设置相等的值，因此元素将在父级元素中居中，这是将块级元素居中的一种方法。（2有提过）
注意：text-align设置为center只适用于块级元素中的内联内容居中，并不能使块级元素居中。

.block {
  background: yellow;
  margin: 0 auto;
  padding: 30px;
  width: 100px;
}

效果

盒模型

margin-left和margin-right的值会被设置为相等（220px），使得元素居中

e、某个外边距和width设置为auto

如果设置某个外边距和width为auto，则设置为auto的外边距为0，width会设置为所需的值来填充父级元素。

效果

盒模型

设置margin-left和width为auto，则margin-left将被设置为0，width会被设置为440px来满足父级元素的width。

f、全设置为auto

如果margin和width都设置为auto，则两个外边距会设置为0，width会尽可能宽。

.block {
  background: yellow;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  width: auto;
}

效果f

盒模型f

三个值都设置为auto，则两个外边距会设置为0，width会被设置为540px

g、负外边距

7个属性只要都是大于等于0的值，总和总是等于父级元素的width，不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素width更大的区域

.block {
  background: yellow;
  margin-left: 100px;
  margin-right: -400px;
  padding: 30px;
  width: auto;
}

效果g

盒模型g

设置margin-right为-400px，则元素会大于父级元素width，因为100+0+30+840+30+0-400=600，元素的width为840px.

7、outline

如果你看到被选中的 <a> <input> <button> 周围有一圈黄或蓝色的外框，就是 outline了，可以通过设置 outline: 0 或 outline: none 去除。

8、overflow

overflow用于控制内容溢出包含它的块状元素时的显示方式。
overflow-x和 overflow-y分别用于控制水平溢出和垂直溢出。

• visible 默认值 显示溢出的内容
• hidden 内容被裁剪且不会出现滚动条
• scroll 内容被裁剪但出现滚动条
• auto 由浏览器决定

9、行内元素的盒模型

行内元素也是有盒模型的，但是有几点要注意：
a、对于非替换元素，比如a，span标签等

（1）可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性

（2）行内元素border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加

b、对于替换元素，比如input，img标签margin，
padding，border都有效果