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