块级元素和行内元素是布局最基本的两种元素，我们都知道常见的块级元素有div,p,form,ul,li等，行内元素有span，strong，em等，对于这两者的区别，我也只是简单的了解了一番，要正真的理解及掌握，还得在不断的练习中深入体会。

下面是他们的区别：

块级元素：

他会独占一行，在默认情况下，其其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

行内元素的width、height属性则无效；

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

块级元素和行内元素的css相关属性是：display，其中块级元素对应与display:block;行内元素对应于display:inline;我们可以通过这个属性来切换这两个元素。

display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。

原文链接：https://www.qiquanji.com/post/7138.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。