美文网首页
html基础知识3-块级与行内元素之间的转换

html基础知识3-块级与行内元素之间的转换

作者: 公明_Jack | 来源:发表于2018-11-08 14:06 被阅读0次

    块级元素与行内元素之间的转换其实都是通过CSS设置的;

    1.块级元素转为行内元素

        比如说我把div元素转为行内元素:

                <div style="display:inline"></div>;

                这样就会使div成为行内元素,具备行内元素的所有特性;同时其他的也可以这么做,例如:p ul 等标签;但是我们一般很少把这个块级标签转为行内标签;因为我们可以直接使用行内标签,比如我们可以使用span标签;

    2.行内元素转为块级元素

       行内元素转为块级元素: 

            <span style="display:block"></span>;

                通过这种方式是可以的,跟上面的方式相同,这种是比较常见的,当我们需要在布局的时候把它变为块级元素,但是这个用的也比较少,因为可以直接使用块级元素;

                注意我们还有其他的方式变成块级元素,比如采用浮动(float:left),或者定位(position)之类的;所以说我们在把行内元素浮动的之后成了块级元素;

    3.块级元素、行内元素转化为行内块元素

    其实在开发中将元素转为行内块元素还是比较多的;因为行内块元素具备行内元素和块级元素的所有特性;

            我们采用display:inline-block;对元素设置;当然还有其他的方式。    

    相关文章

      网友评论

          本文标题:html基础知识3-块级与行内元素之间的转换

          本文链接:https://www.haomeiwen.com/subject/pbpctqtx.html