行内元素与块级元素的区别

  • 行内元素 display: inline；

  • 块级元素 display: block；

  • 行内块元素 display: inline-block;

  • 行内元素最好不要包裹块级元素，但是块级元素可以任意的包裹行内元素；

  • 行内元素如果其上一个元素也是行内元素，则它们会分布在同一条水平线上，即在一行上排列，直到这一行放不下这么多的行内元素，它才会另起一行；

  • 块级元素不论上一个元素是行内元素还是块级元素都要另起一行，单独占一行显示；

  • 对于行内元素设置with、height无效，它的宽高只能由它的内容撑起来，但对于块级元素，设置这些值是有效的。

  • 行内元素设置 上下margin、padding无效，左右有效；

  • 块级元素上下左右margin、padding都有效；

  • 行内块元素肩具两者的特性；

行内块级元素在IE8以下的兼容性：

    div {
           display: inline-block;
           *zoom: 1;
           *display: inline;
   }

注意：

  • zoom: 1;作用是在IE下触发hasLayout;

  • display: inline; 的作用是 一旦触发了hasLayout，设置display：inline和display：block效果相似。

记住一个特例：

a标签无所不能，但它不能包含它自己；

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容