盒子模型（二）
坑军之王
205
对于一个盒子来说，其有两种基本状态：行内元素和块状元素。
行内元素只占据其包含的区域，可以这么理解，行内元素的大小是由内容部分和内填充部分撑起来的。
常用的行内元素如下：
<a><strong><b><em><del><span>
块级元素要占据父元素的整个空间（你可以理解为行高是撑起来的，而宽是默认占据一行），且在块级元素状态下，可以对元素的宽高属性进行更改。
常用的块级元素如下：
<h1>~<h6><p><div><ul><li>
以下是对行内元素及块级元素的演示：
行内元素与会计元素的展示
对于行内元素和块级元素的转化，可以通过属性值display进行调整：
|
属性值 |
说明 |
补充说明 |
|
block |
将盒子更改为块级元素 |
|
|
inline |
将盒子更改为行内元素 |
|
|
inline-block |
将盒子更改为行内块元素 |
与同一行的其他元素之间会有空白的间隙 |
|
flex |
弹性盒布局 |
|
|
none |
隐藏 |
隐藏之后元素不占据空间内容 |
|
visibility |
隐藏 |
隐藏之后元素仍占据空间内容 |
行内块元素同时拥有行内元素和块级元素的特点，既可以与其他内容在同一行，也可以进行宽高的设置。
Flex布局的主要思想是使父元素能够调节子元素的高度、宽度和排布的顺序，从而能够最好地适应可用布局空间（能够适应不同的设备和不同大小的屏幕）。针对flex布局的内容将在后面进行一个专门的说明。
隐藏属性：
隐藏属性包括none和visibility，这两个属性一个是隐藏时不占据空间内容，一个是隐藏时仍然占据空间内容。
现在使用四个盒子，他们的样式都已经固定，其中第二个盒子采用display：none属性，三四个盒子采用visibility属性，效果如下：
none值和visibility的展示效果
由图可见，此时使用F12打开浏览器的开发者模式就能发现，第二个盒子已经不存在，第三个盒子的轮廓和第一个盒子一样。至于为什么会占据一行，因为div就是块级元素。