CSS中行级元素和块级元素的区别对比总结

今天药忘吃喽~ 2021-09-18 17:50 229阅读 0赞

# [CSS中的块级元素与行级元素][CSS] #

最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。

先从概念上来看：

**块级元素**

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

2.元素的高度、宽度、行高和顶底边距都是可以设置的。

3.元素的宽度如果不设置的话，默认为父元素的宽度。

默认情况下：常见的块级元素：**<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>**

**行级元素**

特点：1.可以和其他元素处于一行，不用必须另起一行。

2.元素的高度、宽度及顶部和底部边距**不可**设置。

3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

### **行级元素和块级元素如何相互转换：(重新设定display的值即可)** ###

**1.解释一下display的几个常用的属性值，inline ， block， inline-block**

*  inline（行内元素）:
    
    1.  使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
    2.  不能更改元素的height，width的值，大小由内容撑开. 
    3.  可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
 *  block（块级元素）:
    
    1.  使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
    2.  *能够改变元素的height，width的值. *
    3.  *可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.*
 *   inline-block（融合行内于块级）:
    
    1.  结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
    2.  用通俗的话讲，就是不独占一行的块级元素。如图:

// 指定为行级元素(不管之前是块级还是行级)
      display: inline;
      // 指定为块级元素(不管之前是块级还是行级)
      display: block;
      // 融合了行级和块级元素的特性,但是不独占一行（不独占一行的块级元素）
      display: inline-block;

参考文章：[https://www.cnblogs.com/Ry-yuan/p/6848197.html][https_www.cnblogs.com_Ry-yuan_p_6848197.html]

[CSS]: https://www.cnblogs.com/phoenix-Chen/p/5262650.html
[https_www.cnblogs.com_Ry-yuan_p_6848197.html]: https://www.cnblogs.com/Ry-yuan/p/6848197.html