css ——行级元素与块级元素解析

一 . 先说说二者的本质区别吧：

       行级元素是可以和其他元素处于一行，不用必须另起一行。块级元素是每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

二 .下面看看各自的特点：

    块级元素

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

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

　　  3.块级元素即使设置了宽度,仍然是独占一行。

常见块级元素：address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等。

    行级元素

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

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

常见行级元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。

 

纸上得来终觉浅，下面举个例子：

　　
    
    



　　
我是块级元素1

　　
我是块级元素2

　　我是行级元素1

　　我是行级元素2

结果如下：


三. 二者的转换

          可以在css样式中用display:inline将块级元素设为行级元素

 　　 同样，也可以用display:block将行级元素设为块级元素

代码示例如下：

　　
    
    



　　
我是块级元素1
　　
我是块级元素2

　　我是行级元素1
　　我是行级元素2

得到结果如图：

 

 四. 行级—块级元素   

        如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？

       此时就可以用 display:inline-block；行内块元素，既具有block的宽度高度特性又具有inline的同行特性。

 

转载于:https://www.cnblogs.com/baby-zuji/p/9491586.html