首页| 版块| 我的| 发帖| 消息
主题:CSS的inline、block与inline-block [电脑版]
zhangjingyu发表于 2024-12-08 23:38
基础知识点:
行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。

块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。

行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。

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

其中img和input为行内块元素。

行内元素与块状元素之间的转换:
float: 当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。

2. position: 当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

3 .display:

1、块级标签转换为行内标签:display:inline;

2、行内标签转换为块级标签:display:block;

3、转换为行内块标签:display:inline-block;

常用的display可能的值:

浏览大图

浏览大图
回帖(0):

全部回帖(0)» | 最新回帖
收藏本主题 | 发表新主题