Html 中行内元素有哪些?块级元素有哪些?

2018-08-24  本文已影响0人  胜杰pro

1. 关于行内元素和块状元素的说明

根据 CSS 规范的规定,每一个网页元素都有一个 display 属性,用于确定该元素的类型,每一个元素都有默认的 display 属性值,比如 div 元素,它的默认 display 属性值为 “block”,成为“块级” 元素 (block-level);而 span 元素的默认 display 属性值为“inline”,称为“行内” 元素。div 这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像 “span”“a” 这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

2. 行内、块状元素区别

(1). 块级元素会独占一行,其宽度自动填满其父元素宽度 行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
(2). 一般情况下,块级元素可以设置 width, height 属性,行内元素设置 width, height 无效 (注意:块级元素即使设置了宽度,仍然是独占一行的)
(3). 块级元素可以设置 margin 和 padding. 行内元素的水平方向的 padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的 padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果(水平方向有效,竖直方向无效)。

3. 行内、块状元素

块元素 (block element)

内联元素 (inline element)

可变元素

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

上一篇 下一篇

猜你喜欢

热点阅读