CSS之行内元素、行内块元素和块元素
发表于 2018-01-21 | 分类于 前端自学之路 | 阅读数 27
HTML元素都被CSS赋予了一定的结构属性，我们称之为 display,常见的有三种类型：
1
2
3
4
5
6
7
| display: inline; // 行内元素
display: inline-block; // 行内块元素
<!-- more -->
display: block; // 块元素
display: none; // 隐藏不可见
|
我们来解释下这三种有什么区别？分别代表什么意义？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 行内元素
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、不能设置宽度(width)、高度(height)、上下外边距(margin-top;margin-bottom)
// 块元素
1、默认元素宽度和父元素保持一致，即占一整行 100%
2、默认从新的一行开始，并且独占一行，所以其他元素只能从新一行开始布局
3、可以设置盒子模型的所有属性，包括宽度、高度、外边距
// 行内块元素
行内块元素具有行内元素和块元素的共同特点
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、可以设置盒子模型的所有属性，包括宽度、高度、外边距
|
常见的行内元素有哪些：
1
2
3
4
| <span></span>
<a></a>
<img />
<input type="" />
|
常见的块元素有哪些：
1
2
3
4
5
6
7
8
9
10
| <body></body>
<div></div>
<ul></ul>
<ol></ol>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
|
其实这些结构属性是可以相互转换的，只要通过设置 display 为相应的值就可以
