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

一、行内元素和块级元素

1.1、块级元素（inline）：

　　　　　　它独占一行；

　　　　　　它的宽高可以设置；

　　　　　　默认时，宽度是100%；

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

1.2、行内元素（block）：

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

　　　　　　它不可以设置宽高；

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

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

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

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

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

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

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

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

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

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

 

转载于:https://www.cnblogs.com/start-bigin/p/11543639.html