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;转换成行内块级元素。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwdwfj.html