CSS内联元素和块级元素, 内联块级元素
HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素, 内联块级元素, 元素类型决定了
display
display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式
- 外部显示类型(display-outside)
display: block;
display: inline;
- 内部显示类型
display: flow;
display: table;
display: flex;
**元素display样式决定了布局的方式, 直接影响的是height **
标签div的高度, 由其内部文档流元素的高度总和决定, 并不是相等.
文档流: 文档内部元素的流动方向.
- 如果文档内部是内联元素(inline), 文档流流动方向就是从左到右布局, 如果流动遇到阻碍, 宽度不够, 换行继续流
image
内联元素的内容如果是英文, 当超过了div宽度时, 并不会将一个词打断, 然后如果包含中文一个词就会被打断
image
上面情况是因为: 中文, 例如"哈哈", 会被认为是两个词"哈"和"哈", 而英文"hello", 就是一个词, 所以出现中文会被break, 使一个词被打断可以使用word-break
span{
word-break: break-all;
}
image
- 如果文档内部是块级元素(block), 文档流布局方向就是从上到下布局, 一个块占据一行, 依次向下布局, 即使一个块宽度不足以达到总宽度.
image
内联元素
内联元素(inline), 也叫行内元素.一个行内元素只占据它对应标签的边框所包含的空间.
- 常见行内元素
<a></a> <abbr></abbr> <em></em> <strong></strong> <span></span>
<br> <img> <script></script> <label></label>
- 特点
- 元素从左到右流动布局.
- 元素的高度和宽度,以及顶部和底部边距不可设置.
- 元素的高度也就是它自身的建议行高
- 内联元素转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>
- 特点
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
- block元素转inline元素:
display: inline;
内联块级元素
Inline-block, 就是同时具备内联元素、块状元素的特点.
- 常见内联块级元素
<button></button> <input> <textarea></textarea>
- 特点
- 和其他元素都在一行上, 左右布局.
- 元素的高度、宽度、行高以及顶和底边距都可设置.
- 相当于添加浮动
float: left;, 但是不建议使用inline-block, 最好使用float加clearfix;
.clearfix::after{
content: '';
display: block;
clear: both;
}
