1.0 盒模型的组成

css会把所有html元素看成一个盒子

盒子由4部分组成：

外边距：margin
边框：border
内边距：padding
内容：content

盒子的大小: 内容 + padding + border

margin 不会影响盒子的大小，但是会影响盒子的位置

2.0 content

min-width : 最小宽度，如果小于这个宽度，则出现滚动条
min-height: 最小高度，如果小于这个高度，则出现滚动条
max-height: 最大高度，如果大于这个高度，内容会溢出
max-width: 最大宽度，如果大于这个高度，内容会溢出

注意：以上4个属性一般不与width 和 height 连用

3.0 padding

padding: 内边距 => 会影响盒子大小

上右下左都加上10px的内边距 padding: 10px;
上下是10px ，左右是20px padding: 10px 20px;
上是10px 左右15px 下20px padding: 10px 15px 20px;
上右下左 padding: 10px 15px 20px 25px;
单独设置上面的内边距：padding-top: 10px;
单独设置右边的内边距：padding-right: 10px;
单独设置下面的内边距：padding-bottom: 10px;
单独设置左边的内边距：padding-left: 10px;

注意： 行内元素设置左右内边距没有问题，但是上下边距会有一定的影响

块元素和行内块元素没有这种影响

如果想要解决这种问题，可以将行内元素转为行内块元素

4.0 border

border: 边框 => 会影响盒子大小

5.0 margin

会影响自己原本的位置 margin-top:50px;
会影响右边元素的位置 margin-right:50px;
会影响下面元素的位置 margin-bottom: 50px;
会影响自己原本的位置 margin-left: 50px;

5.1 对于行内元素来讲，设置上下margin不会生效，但是左右margin是可以的

<style>
  span {
      /* 没用 */
      margin-top:50px;
       /* 没用 */
      margin-bottom: 50px;
      margin-left: 50px;
      margin-right: 50px;
      background-color: orange;
    }
</style>
<span>this is span</span>

5.2 对于块级元素来讲，设置左右margin为auto就可以在父元素中水平居中

div {
            margin:0 auto;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

行内元素和行内块元素不生效

span {
     display: inline-block;
     margin:0 auto;
     background-color: orange;
}

section {
       /* margin也可以加负数 */
       margin-left: -100px;
       width: 200px;
       height: 200px;
       background-color: pink;
}
<body>
    <div>this is div</div>
    <span>this is span</span>
    <section>123121231231321231233</section>
</body>

6.0 margin合并

上下关系的兄弟元素，上面元素的margin-bottom，和下面元素的margin-top会出现合并的现象。

这种现象会导致，整个margin会取最大值，不会将它们俩的值相加。

7.0 margin塌陷

什么是margin塌陷?

第一个子元素的上margin会作用在父元素上

如何解决？

给父盒子加上overflow:hidden属性即可

8.0 认识浮动

浮动：最开始的设计初衷就是解决文字环绕图片的问题

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

9.0 浮动的特点

脱离文档流(标准流) => 脱标
不再占有原来的位置，会影响后面的盒子的位置
原本独占一行的块元素，浮动之后，一行可以显示多个
浮动之后不会存在margin塌陷和margin合并问题

2.1 对于行内元素

也可以浮动，且浮动后可以设置宽高
元素之间的空白问题能够得到解决

浮动只会影响到后面元素的位置，不会影响前面标准流的盒子

2.2 浮动的影响

对兄弟元素的影响

后面的兄弟元素，会占据浮动元素之前的位置；对前面的兄弟元素没有影响

对父元素的影响

不能撑起父元素的高度，会导致父元素高度塌陷；父元素的宽度仍然对子元素生效

10.0 消除浮动的影响

面试题：清楚浮动

注意： 本意是问你如何清除掉浮动产生的影响

手动给父元素指定高度 => 部分场景受限
给父元素也加上浮动 => 带来其他问题
给父元素设置 overflow:hidden
在所有浮动的元素的最后面，加上一个块元素，给该元素设置 clear:both
利用伪元素在父元素最后加上一个盒子，并且 clear:both

什么是盒模型？全攻略（下）