• 56阅读
  • 0回复

CSS的inline、block与inline-block [复制链接] [手机版]

上一主题 下一主题
离线zhangjingyu

只看楼主 倒序阅读 使用道具 绿 楼主  发表于: 2024-12-08 23:38:25 星期日
基础知识点:
行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。

块级元素(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可能的值:
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!