HTML中display:inline-block;特性

最新推荐文章于 2024-03-31 16:06:48 发布
最新推荐文章于 2024-03-31 16:06:48 发布
阅读量4.8k 收藏 4
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseguhui/article/details/80444165
版权
display:inline-block;
内联级标签:
布局特性:
1.可以在同行排列
2.支持所有的css样式设置
3.在不设置宽高大小时,有内容撑开盒子的大小,其内容可以是任意的标签和文字
4.垂直方向上,所有的行级标签,在默认情况下手机按照其内部最后一行文字的底线对齐,为了保持其一致性,需要给每个行级标签设置vertical-align属性,保证垂直方向上的对齐


设置盒子的对齐基线
Middle 将基线设置到盒子的中部
bottom 所有元素按照本行高度最低的元素底部对齐
top 所有元素按照本行高度最高的元素顶部对齐


vertical-align 属性在应用时必须给一行要对齐的元素同时设置
七上八下的爆米花
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
display: inline-block的总结
游坦之的博客
08-21 2068
我尝试了很多种办法，设置高度，浮动，定位什么的都没有用，后来看了一下网易云音乐的源代码，发现他用到了这个display:inline-block;同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。由效果图可以看出，display：block 虽然支持宽高、内边距、外边距的设置，但是每一个block后面，都会默认自动添加一个换行符。由效果图可以看出，inline不支持设置宽高、内边距，外边距，即使设置了也不会产生应有的效果。
display:inline-block详解
最新发布
m0_59508634的博客
03-31 824
是一个CSS样式属性，它结合了inline和block两个元素类型的特性。在HTML和CSS中，你可以使用这个属性来创建一个块级元素，但是它不会像普通的块级元素（如）那样独占一行，而是会像行内元素（如）那样与其他元素并排显示。同时，元素可以设置宽度（width）和高度（height），就像块级元素一样。这使得成为一个非常有用的布局工具，特别是在需要创建复杂的布局，但又不希望元素独占一行的情况下。
inline-block元素问题：
zlq_CSDN的博客
05-10 132
问题描述：使用display:inline-block;时会改变元素的性质。 元素间的换行会被解析，元素间大约会有4~5px的间距 解决：删除换行；将父元素的字体大小设置为0； ie67版本不支持该特性 /* 解决： */ <style type="text/css"> /* 将父元素的字体设置为0*/ div{ font-size:0px; } </style&g...
display:block和inline-block、inline-block区别
Evan's Blog ٩(๑❛ᴗ❛๑)۶
12-16 3700
一个后端，在前端的道路上从零踩坑总是很困难的，要做混合开发，不得不学呀 TnT。简单总结下常见的块级元素和行内元素，顺便说明下区别。 一、常见的块级元素 块级元素：块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>...&l...
display:inline-block属性的标签出现的问题及解决方法
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...
display:inline、display:block、display:inline-block三者真实用途及含义是什么？
热门推荐
哈里·雪利博客
12-08 2万+
1、display:block就是将元素显示为块级元素。 　　block元素的特点是： 　　总是在新行上开始； 　　高度，行高以及顶和底边距都可控制； 　　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 2、display:inline就是将元素显示为内联行内元素。 　　inline元素的特点是： 　　和其他元素都在一行上；
html中display属性block、inline、inline-block的区别
yuanwen52的博客
03-18 1587
display:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳其他块级元素和内联元素，块级元素排斥与其他元素位于同一行，宽度(width)和高度(height)起作用，常见的块级元素有div和p. display:inline就是将元素显示我内联元素，内联元素只能容纳文本或其他内联元素，它允许内联元素与其位于同一行，宽度和高度不起作用，常见的内联元素有a. display:i...
CSS+DIV让文字内容居中___display:inline、block、inline-block的区别
jzgl_cadn的专栏
09-19 387
[code="HTML"] Untitled Document vertical-align:middle; } --> teststsetsetsetdisplay:inline-block; [/code] [b]display:block就是将元素显示为块级元素. [/b]　　 block元...
display: inline-block;懒人用法
fefecoming的博客
08-23 290
原代码： 原来的代码编写是span后紧跟着el-select，然后样式就是上图   在style中增加： 修改后：    
关于display的属性：block和inline-block以及inline的区别
sinat_31311369的博客
09-03 1万+
介绍一些简单的布局，block，inline-block，inline的简单区别，处女作哈哈
CSS中display属性：block、inline和inline-block的区别
aty
02-28 1万+
设置span的高度和宽度无效,span的margin和padding无效
display:inline-block;的神奇用法
某年某月某条街
08-23 6334
浮动布局就是指通过使用float属性，让列表元素依次排列的布局。浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐...
display: inline、block和inline-block
NewWent的博客
08-16 1万+
inline：使元素变成行内元素（内联），拥有行内元素的特性，即 1. 与其他行内元素共享一行 2. 不能修改width、height属性，大小由内容撑开 3. padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效 block：使元素变成块级元素，拥有块级的特性，即 1.独占一行，在不设置自己的宽度的情况下，...
CSS中的 display：inline-block
CyberPlayer的博客
02-14 2736
display: inline-block 　　与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 　　与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边 　　display 的一种常见用法：
html中display: inline-block;
03-31
display: inline-block; 是CSS中的一个属性值，用于控制元素的布局和显示。具体来说，它将元素显示为一个行内容器，但是它的内容可以像块级元素一样进行排列。 与 display: inline; 相比，display: inline-block; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值