CSS使用display:inline-block与float布局的区别

最新推荐文章于 2020-07-12 19:16:12 发布
最新推荐文章于 2020-07-12 19:16:12 发布
阅读量443 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40186421/article/details/88762307
本文详细解析了CSS中display属性的三个常用值：inline、block及inline-block的特点与区别。inline元素与其他行内元素共享一行，不会独占一行，且无法直接设置宽高；block元素独占一行并可设置宽高；inline-block元素则兼具两者的优点，既不独占一行又可直接设置宽高。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.解释一下display的几个常用的属性值，inline ， block， inline-block
inline:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
block:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block:
是元素变成行内款元素，结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。
袁术在这里插入图片描述

在这里插入图片描述

【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1356
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
CSS之使用display:inline-block来布局
热门推荐
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
display:inline-block，block，inline的区别与用法
weixin_30433075的博客
06-21 241
一、首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等 行级元素 与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，...
学习记录：CSS之使用display:inline-block与float布局的区别
人生苦短，何妨一试
07-12 284
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 能够改变元素的height，w
display:inline-block与float在布局时的差异分析
Zerofishcoding的博客
09-17 961
在布局的时候，很多设计都需要将元素排列在一行，使元素排列在一行的方法有多种，从兼容性和易用性来考虑，先介绍display:inline-block（显示为内联块）和float（浮动）。
简述inline-block的边距问题及解决方法
小星的博客
09-13 6606
当我们讲一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使你使用（margin:0;padding:0;）也是无法消除的。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style typ
CSS Inline-block自带外边距出现原因及解决办法
z_m_s的博客
05-02 2626
出现原因：使用css更改非inline-block水平元素为inline-block元素没有空格就没有了每个之间使用margin-left负值就太笨了而且要查表，把&lt;/div&gt;放到第二行首也是可以的，但是影响美观，不适用，目前较好的方法：font-size: 0;-webkit-text-size-adjust:none;...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...
css之display属性之inline-block布局实现详解
11-21
`display` 属性是CSS中一个非常重要的属性，它决定了元素如何在页面上布局。`display`属性的主要功能是控制元素生成的框的类型，从而影响元素的布局方式。在这个详解中，我们将深入讨论`display`属性中的`inline`、`...
有关display:inline-block在FF出现空白的解决方案
03-17
在网页布局设计中，`display:inline-block` 是一个非常常用且强大的CSS属性，它允许元素在保持块级元素特性的同时，像内联元素一样并排显示。然而，在不同浏览器之间，尤其是在Firefox（FF）上，可能会遇到一些显示...
CSS中关于float和display: inline-block布局的区别详解
qq1084235321的博客
03-25 5189
当我们想设置几个盒子水平排列时，一般都会想到使用float或者使用display: inline-block。下面就来说一下两者的区别和，各自的优缺点。 inline-block和float的区别 文档流:浮动元素会脱离文档流，并使得周围文本元素环绕这个元素。而inline-block元素仍在文档流内，因此inline-block不需要清除浮动的操作。 水平位置：因为浮动元素脱离...
第七
liujia20001123的博客
11-15 253
1.清除浮动的方法有哪几种？分别如何实现？ （1）浮动元素后面加空div （2）设置父元素的高度 （3）父级添加overflow属性 （4）父级添加伪类 2使用display：inline-block或float布局网页有什么区别？需要注意什么？ （1）display：inline-bloak可以让元素排在一行，并且支持宽度和高度，代码实现起来方便。添加该属性的原素在标准文档流中，不需要清除浮动。...
display:inline-block之用法
weixin_30642561的博客
07-31 236
HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如<div><h1>...<h6><p>...
浮动（float）与inline-block的区别
前端啥也不懂
05-12 2022
结论：两者主要区别在于当标签的【高度不一致】时，体现出的差异如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。...
inline-block和float的共性和区别
birthmarkqiqi的专栏
01-19 689
在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？   共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相
CSS 用display:inline-block代替float: left排版注意事项
tel15277169530的博客
05-30 3436
此处显示新 Div1标签的内容      此处显示新 Div2标签的内容      此处显示新 Div3标签的内容 效果如图： 此处显示新 Div1标签的内容   此处显示新 Div2标签的内容   此处显示新 Div3标签的内容 在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不
inline-block元素会有上下边距的解决方法
jie_rookie的博客
06-28 4261
设置父元素的line-height为0;
htmldisplay: inline-block;
最新发布
07-10
HTML中`display: inline-block`是一种常用的布局方式，它结合了行内元素和块级元素的特性。使用`display: inline-block`可以实现多个块级元素在一行显示，并且能够精确控制宽度、高度以及内外边距等样式属性。 ### `display: inline-block` 的基本特性 - **允许设置宽高**：与`display: inline`不同，`display: inline-block`允许对元素设置`width`和`height`，这使得其更适合用于复杂的布局场景[^1]。 - **保留内外边距**：当设置为`inline-block`时，元素的上下`margin`和`padding`都会被保留并正确渲染，而`inline`模式下这些值不会影响页面布局[^1]。 - **水平排列**：多个`inline-block`元素会按照书写顺序从左到右排列，直到当前行无法容纳更多元素后自动换行[^2]。 ### `display: inline-block` 与浮动（float）的区别 虽然`inline-block`的效果类似于浮动，但它们之间存在一些关键差异： - **文档流影响**：使用`inline-block`不会脱离正常的文档流，而浮动元素则会部分脱离文档流。 - **垂直对齐问题**：默认情况下，`inline-block`元素可能会出现底部对齐的问题，需要通过`vertical-align`属性进行调整。 - **空白间隙**：由于`inline-block`是基于文本的排版模型，因此在HTML代码中，元素之间的空格或换行符会导致额外的间距，这种现象通常被称为“幽灵空白节点”。可以通过移除HTML中的空格、负边距或者使用注释来解决这一问题。 ### 常见问题及解决方案 #### 1. 元素之间出现不必要的空白间隙 这个问题通常是由于HTML源码中元素间的空格或换行引起的。解决方法包括： - 移除HTML中的空格或换行符； - 使用负的`margin`； - 在父容器上应用`font-size: 0`然后单独为子元素指定字体大小； - 或者利用CSS预处理器如Sass/SCSS编写更灵活的代码。 #### 2. 垂直对齐问题 为了确保所有`inline-block`元素在一条线上对齐，应显式地给这些元素添加`vertical-align: top;`或其他合适的值。 #### 3. 自动换行行为 如果希望内容过长时不换行，而是保持单行显示，可以通过设置`white-space: nowrap;`于父容器上来阻止自动换行。 ### 示例代码 下面是一个简单的例子展示如何使用`inline-block`创建一个水平导航栏： ```html <style> .nav { /* 清除浏览器默认的列表样式 */ list-style: none; padding: 0; margin: 0; } .nav-item { display: inline-block; background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 10px 20px; vertical-align: top; /* 解决垂直对齐问题 */ } </style> <ul class="nav"> <li class="nav-item">首页</li> <li class="nav-item">关于我们</li> <li class="nav-item">联系我们</li> </ul> ``` 此示例中的每个`.nav-item`都是一个`inline-block`元素，它们会在同一行内水平排列，并且每个项目都有明确的高度和宽度。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LoongYL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值