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), 文档流流动方向就是从左到右布局, 如果流动遇到阻碍, 宽度不够, 换行继续流

image

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

image

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

span{
    word-break: break-all;
}

image

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

image

内联元素

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

• 常见行内元素

• 特点

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

块级元素

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

• 常见块级元素

 
 
   
 
 
 
 
 
 
-
 

 
  

• 特点

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

内联块级元素

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

• 常见内联块级元素

• 特点

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

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}