HTML中块级元素与行内元素的详解

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,如果不设置宽度,将占满父级。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值