HTML块级元素和行内元素
行内元素和块级元素是从css角度出发的。块级元素在浏览器显示时,通常会以新行来开始(和结束),内联元素在显示时通常不会以新行开始。
1
实际上,html中的标签除了名称不同,它们的本质作用都是一样的:声明一个元素节点,只不过浏览器默认样式表(user agent stylesheet)对各种标签应用了不同的样式
标签的类别:
行内元素(内联元素)
块级元素(区块元素)
行内元素和块级元素的区别:
行内元素
与其他行内元素并排
不能通过style设置宽高,默认的宽度就是文字的宽度(可以通过属性设置宽高 如)
块级元素
霸占一行,不能与其他任何元素并列。(说的是原生的html 没有css等参和的情况下)
能接受style设置宽高,如果不设置宽度,那么宽度将默认变为父级的100%
标签类型的划分:
在HTML的角度来讲,标签分为:
文本级标签:p , span , a , b , i , u , em
容器级标签:div , h系列 , li , dt ,dd
从CSS的角度讲,标签分为:
行内元素:文本级标签-p标签+img等等
块级元素:容器级标签+p标签。
块级元素和行内元素的相互转换:
我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。
display:inline;
那么这个标签将变为行内元素,即:
1,此时这个div将不能设置宽度和高度了。
2,此时这个div可以和其他行内元素并排了。
同样的到了我们也可以用display将行内元素(比如span)转行成块级元素。
display:block;
那么这个span标签将变为块级标签,即:
1,此时这个span能够设置宽度,高度。
2,此时这个span必须独占一行,其他元素无法与之并排。
3,如果不设置宽度,将占满父级。