行级元素与块级元素

行级元素

1.块级元素(block)
独占一行,能设置宽高度,如果不设置宽度,则默认会变为父元素的100%。
如:div、h标签、li、table等
示例:

<a href="">奇爱屋</a>
<a href="">www.7i5.com</a>

2.行内元素(inline)
与其他行内元素并排,不能设置宽高度,默认就是文字的宽度。
如:a标签、label、img、span等
示例:

<div><a href="">奇爱屋</a></div>
<div><a href="">www.7i5.com</a></div>

3.行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
其中img和input为行内块元素。

在HTML,分为文本级、容器级。
文本级:p、span、a、b、i、u、em
容器级: div、h系列、li、dt、dd
在CSS,与HTML很像,p是特殊。所有的文本级标签,都是行内元素,除p外,p在HTML是文本级,但是在CSS中是个块级元素,所有的容器级标签都是块级元素。

块级元素和行内元素相互转换:
使用display属性可以改变行内或者是块级的性质
1)设置为inline之后,元素会被显示为内联元素,元素前后没有换行符,并且无法设置宽高。
2)设置为block之后,这个元素将显示为块级元素,前后会带有换行符。此时的元素就能设置宽高度了,假设未设置高度,元素将撑满父元素。

CSS笔记

盒子模型

2020-2-4 21:26:55

CSS笔记

浮动

2020-2-5 11:01:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索