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

Posted zhaoruhui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了块级元素与行内元素的区别相关的知识,希望对你有一定的参考价值。

 

块级元素与行内元素的区别
块级元素和行内元素是布局最基本的两种元素,我们都知道常见的块级元素有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一样显示在一行了。
相关联的几点总结
  1. display:inline 对应不显示为 display:none
  2. display:block 对应不显示为 hidden

    说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
  3. visibility:visible(元素可见,默认值)
  4. visibility:hidden(元素不可见,但仍然为其保留相应的空间)

    Visibility:none 和 Display:hidden 的区别是:
  5. display:none;
    使用该属性后,html元素(对象)的宽度、高度等各种属性值都将“丢失”;
  6. visibility:hidden;
    使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

如果想让某一段代码在前台不显示,最简单的方法是用css的display:none(某些情况下可以使用left:-100000px来达到同样效果。),这样,下边的内容就自动填补这个空隙。但是在一些特殊的情况下,我们只需要隐藏这个元素,但它的位置不能被占用了,那么,visibility:hidden就可以实现这个要求。


以上是关于块级元素与行内元素的区别的主要内容,如果未能解决你的问题,请参考以下文章

深度理解CSS中块级元素与行内元素的区别(个人易错点)

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

块级元素与行内元素区别

HTML行内元素块级元素行内块级元素的特点与区别

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

块级元素和行内元素的区别,常见的块级元素和行内元素有哪些