盒模型

在CSS中，每一个 html 元素都当作一个盒子来处理。在浏览器的默认行为下，盒子的类型分为块级盒子display:block和内联盒子 display:inline。

块级盒子

块级盒子：独占一行，块级盒子在文档中从上到下依次排列下来。默认拥有父元素的全部宽度。可设置宽高。

内联盒子

盒子的大小全由内容区的内容支撑，不能设置宽高，不会独占一行，水平方向依次排开。当宽度不够时，会自动换行。

区别

无论是块级盒子还是内联盒子，在盒模型属性box-sizeing:content-box;的基础上，都会受到如下属性的影响，但具体的表现情况不同

.target-selector{    
    width:100px;
    height:100px;
    margin:10px;
    border:solid 1px red;
}

块级盒子：

1. width和height属性会发生作用。这两个属性实际上描述的是内容区域的大小

2. margin pading border等属性会发生作用，会把周围的其他元素推开。

3. 盒子的实际大小为border + margin+content区域的大小

内联盒子：

1. 水平方向的margin和padding会起作用，会把其他元素沿着内联方向推开

2. 垂直方向的margin和padding会被应用，但是不会把其他处于 inline 状态的盒子推开

在盒子属性box-sizing:border-box情况下

1. width 和 height 属性 设置的是整个盒子的大小。此时设置padding margin等属性时，在width和height减去相应的值后，才为内容区的大小

转换

盒子的外部显示模型由display属性控制

• display:block; 元素表现为块级元素

• display:inline 元素表现为内联元素

• display:inline-block则元素变现为不换行的块级元素，margin border padding等属性都会起作用，但不会换行。