css块级元素、行内元素和行内块级元素【学习笔记总结】

一、行内元素和块级元素

1.1、块级元素（block）：

• 它独占一行；
• 它的宽高可以设置；
• 默认时，宽度是100%；

例如：<div>、<h1-h6>、<ul>、<ol> 、<li>等。

1.2、行内元素（inline）：

• 它的宽度由内容决定，高度有内容字体大小决定；

• 它不可以设置宽高；

• 它可以和其他的行内元素位于同一行；

例如：<span>、<label>、<i>、<e>等。

1.3、行内块级元素（inline-block）：

• 它即可以和其他的行内元素位于同一行，

• 元素的宽高及与边的间距都可以设置；

例如：<input>、<img>、<select>等。

二、块级元素、行内元素、行内块级元素转换

2.1、display：block；转换成块级元素。

2.2、display：inline；转换成行内元素。

2.3、display：inline-block；转换成行内块级元素。