html块级元素与行内元素

我们经常使用的大多数HTML 元素,都被定义为块级元素或内联元素。

 

块元素,一般都从新行开始,它可以容纳内联元素和其他块元素

内联元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素;还有一种特殊的元素。

可变元素,可变元素为根据上下文语境决定该元素为块元素或者内联元素。

常见的块元素有:

技术分享

常见的行内元素有:

技术分享

可变元素:

技术分享


区别:

 

块级元素会独占一行,默认情况下宽度自动填满其父元素宽度

行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

块级元素可以设置宽高

行内元素不可以设置宽高

块级元素可以设置marginpadding

行内元素水平方向的margin-left;margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom;margin-top; padding-top; padding-bottom;却不能生效。

块级元素display属性,display:block;

块级元素display属性,display:inline;

 

当然在实际场景中,我们可以通过修改display属性来切换块级元素和行内元素

但是,表格的一些行内元素,却具有一个块元素的特性,我在下一篇博客中说明。

 

参考博客:

http://www.w3school.com.cn/html/html_blocks.asp

http://blog.csdn.net/yuyanqiao/article/details/8558118

http://www.educity.cn/wenda/9802.html

http://cyf0110.iteye.com/blog/1814056

 




本文出自 “7439523” 博客,请务必保留此出处http://7449523.blog.51cto.com/7439523/1611278

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。