CSS布局（inline和block）

CSS内联元素和块级元素, 内联块级元素

HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素, 内联块级元素, 元素类型决定了

---

display

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

• 外部显示类型(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>
复制代码

• 特点

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
4. block元素转inline元素: display: inline;

内联块级元素

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

• 常见内联块级元素

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

• 特点

1. 和其他元素都在一行上, 左右布局.
2. 元素的高度、宽度、行高以及顶和底边距都可设置.
3. 相当于添加浮动float: left;, 但是不建议使用inline-block, 最好使用float加clearfix;

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

转载于:https://juejin.im/post/5c173fef518825284005e80c