6.块级标签与行内标签

行内元素：

• • • 与其他行内元素并排；
    • 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• • • 霸占一行，不能与其他任何元素并列；
    • 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级标签和行内标签的互相转换

display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

块级标签转换为行内标签

给一个块级标签(比如: div)设置:

display: inline;

• 此时这个div不能控制宽度和高度了
• 此时这个div可以和别人并排了

行内标签转换为块级标签

给一个行内标签(比如: span)设置:

display: block;

• 此时这个span能够设置宽度、高度

• 此时这个span必须霸占一行了，别人无法和他并排

• 如果不设置宽度，将撑满父亲

知识来源于网上