CSS布局（inline和block）

displayCSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型—— 外部显示类型 定义了元素怎样参与流式布局的处理， 内部显示类型 定义了元素内子元素的布局方式

• 外部显示类型(display-outside)

display: block;
display: inline;
复制代码

• 内部显示类型

display: flow;
display: table;
display: flex;
复制代码

**元素display样式决定了布局的方式, 直接影响的是height **

标签div的高度, 由其内部文档流元素的高度总和决定, 并不是相等 .

文档流: 文档内部元素的流动方向.

1. 如果文档内部是内联元素(inline), 文档流流动方向就是从左到右布局, 如果流动遇到阻碍, 宽度不够, 换行继续流

内联元素的内容如果是英文, 当超过了div宽度时, 并不会将一个词打断, 然后如果包含中文一个词就会被打断

上面情况是因为: 中文, 例如"哈哈", 会被认为是两个词"哈"和"哈", 而英文"hello", 就是一个词, 所以出现中文会被break, 使一个词被打断可以使用 word-break

span{
    word-break: break-all;
}
复制代码

1. 如果文档内部是块级元素(block), 文档流布局方向就是从上到下布局, 一个块占据一行, 依次向下布局, 即使一个块宽度不足以达到总宽度.

内联元素

内联元素(inline), 也叫行内元素.一个行内元素只占据它对应标签的边框所包含的空间.

• 常见行内元素

<a></a> <abbr></abbr> <em></em> <strong></strong> <span></span>
<br> <img> <script></script> <label></label>
复制代码

• 特点

1. 元素从左到右流动布局.
2. 元素的高度和宽度,以及顶部和底部边距不可设置.
3. 元素的高度也就是它自身的建议行高
4. 内联元素转block元素: display: block;

块级元素

块级元素(block), 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”.

• 常见块级元素

<div></div> <address></address> <article></article> <audio></audio> <canvas></canvas> <dd></dd> <dl></dl> <footer></footer> 
<form></form> <hr> <header></header> <h1>-<h6> <ol></ol>
<p></p> <section></section> <table></table> <ul></ul>
<video></video>
复制代码

• 特点

display: inline;

内联块级元素

Inline-block, 就是同时具备内联元素、块状元素的特点.

• 常见内联块级元素

<button></button> <input> <textarea></textarea>
复制代码

• 特点

float: left;

.clearfix::after{
    content: '';
	display: block;
	clear: both;
}
复制代码