display:none; display:block; display:inline和display:inline-block;

最新推荐文章于 2021-08-01 13:58:33 发布
最新推荐文章于 2021-08-01 13:58:33 发布
阅读量798 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xxz_best/article/details/42042627
本文深入解析了HTML与CSS中display属性的用法，包括block、inline、inline-block模式的区别及应用场景，特别关注了inline-block模式在实现响应式布局和样式化列表时的特性和优化技巧，提供了在不同浏览器环境下实现一致效果的方法。

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

display:block;   会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。

display:inline;   不会打断文档排布流，会在一行中一个挨一个地排列。

display:inline-block;  方式样式化列表时，既可使得列表元素能按行挨个排列，同时元素还能保持其块属性，比如高和宽、上下边距等。但是对有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。


CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE，比如IE 7，就要做一些改变才能适应。
    /* IE 7 */
    zoom: 1;
    *display: inline;


display:none隐藏

【高频考点精讲】display 属性详解：block、inline、inline-block、none 的区别
全栈老李的博客
07-05 813
display属性就像CSS世界的排版导演，不同的值相当于给元素不同的"人设"：block是霸道总裁——我要独占一行！inline是佛系青年——你们随意我都可以~是斜杠青年——我全都要！none是隐身侠——你看不见我！掌握它们的特性，就能像搭积木一样灵活控制页面布局。我是全栈老李，下期我们聊聊position的玄学，记得关注哦！（本文示例代码已上传GitHub，搜索"全栈老李display详解"获取完整项目）
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1355
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
关于display:none和display:block的问题
Brave_heart4pzj的博客
01-21 411
https://blog.youkuaiyun.com/lewky_liu/article/details/77448983
display: none;_display:inline-block产生的问题
weixin_39622747的博客
11-30 214
以前看张鑫旭大神的《css世界》有说到这个问题，没有总结再加上很长时间没用过，前两天看到别人博客才回想起来，顺手记录一下。设置display：inline-block的元素放在一起会产生间隙（简略html代码）：<会产生下图效果：原因就是因为浏览器会处理行内元素之间的空白符（空格，回车换行等），在字体不为0的情况下，产生了“幽灵空白节点”（《css世界》里的概念）。解决方法有几种：1.包裹元...
用display:none和display:block来…
王安的博客
02-23 2610
用display:none和display:block来控制层的显示
display属性中none display inline的区别
农夫阿才
08-05 1157
none：元素直接就隐藏起来，不占据一丁点位置。 行内元素：a、b、br、cite、em、img、input、i、label、select、small、span、strong、sub、sup、textarea、var等。典型特点：并行排列，不可设置宽高，但可以设置行高（上一行和下一行文本之间基线的距离）。内外边距设置有限制。 块级元素：caption、div、fieldset、form、h1-h...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
然而，IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善，这给开发者带来了不小的困扰。为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...
css display:none使用注意事项小结
10-30
只有将元素的display属性设置为display: block或display: inline等非none值，才能使得元素重新参与布局计算，并且能够被正确地获取到这些属性值。 其次，关于SEO的问题。使用display: none隐藏的内容通常不会被搜索...
标签设置display：none后设置diplay=“”不显示1
08-08
总结一下，`display: none` 是用来隐藏元素的，而要使隐藏的元素重新显示，必须明确设置其为 `display: block`、`display: inline` 或者元素原本的显示类型。理解并熟练掌握 `display` 属性的用法，对于创建高效且...
display:inline、block、inline-block和none的区别
sinat_16411539的博客
01-24 3395
1、display：block就是将元素现实为块级元素：   元素的特点是：   总是在新行上开始；   高度，行高以及顶部和的边距都可以控制；   宽度缺省是它的容器的100%;除非设定一个宽度。,,,,和是块元素的例子。 2、display：inline就是将元素显示为行内元素：   元素的特点是：   和其他元素都在一行上；   高，行高及顶部和底边距不可改变；   宽度就
html隐藏div属性,DIV CSS display (block none inline)属性的用法教程
weixin_33560311的博客
06-03 920
在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过一、CSS display使用 - TOP以下为DIV CSS运用dispaly，说明这里dispaly值任意CSS代码：.divcss5{display:none}Html对应运用：我是测试内容根据以上可以自己DIV+CSS下，...
display属性常用的四个值：block、inline、inline-block、none
No8g攻城狮的博客
01-07 3058
目录 1、block 块级元素 1.1、块级元素特点 1.2、常用的块状元素有 2、inline 内联（行级）元素 2.1、块级元素特点 2.2、常用的内联元素有 3、display:none 4、总结 1、block 块级元素 1.1、块级元素特点 a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。 b. ...
理解与应用css中的display属性
weixin_34124577的博客
11-13 2389
理解与应用css中的display属性 　　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有： none block inline inline-block inherit 　　下面，我将按照顺序将上述几种属性做一个完整的讲解。 第一部分：display:none 　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人...
display的block、none、inline属性及解释
某年某月某条街
08-21 2991
display:block的作用： 让被隐藏的块级元素显示出来，一般是相对于diplay:none;使用的 比较常用于a、span这两个标签——因为这两个标签非块元素，如果不用display:block;定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。 display:block不换行的办法： 设置display属性为inline-block，则不会换行
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1244
aaa
「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block
前端达人
07-05 738
开篇本篇文章，笔者将介绍display的基本属性，主要涉及以下内容：display: none vs visibility: hiddendisplay: blockdi...
js修改display，在none和block之间切换不显示问题
热门推荐
渔火江渚上的博客
05-21 1万+
目的：这是我的目的，要实现的效果 点击回复a链接 ，输入框input所在父元素div，显示或隐藏。 input>div>div（这个最外层div，对应着问题一，和问题二无关） 问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div 问题二：dislay属性值...
关于css的display:flex inline block inline-block和float
sherlock_l的博客
08-13 4440
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行. block（块级元素）: 使元素变成块级元素，独占一行，在不设置自己的宽度
background: none; border: none; color: inherit; display: inline-block; font-size: inherit; line-height: inherit; text-transform: none; text-decoration: none; transition: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
最新发布
03-26
<think>好的，我现在需要处理用户关于CSS重置按钮样式的查询。用户想了解如何重置按钮的样式，特别是提到的属性：background:none、border:none等。首先，我得回忆一下CSS重置的基本概念，通常是为了消除浏览器默认样式，确保跨浏览器一致性。 用户提到的代码片段是reset button style的一系列属性，我需要逐个分析这些属性是否正确和必要。比如，background:none和border:none确实可以去除按钮的背景和边框。但要注意，有些浏览器可能需要更具体的设置，比如设置background-color: transparent可能更彻底。同样，border:0有时候比border:none更简洁有效。 接下来是color:inherit，这会让按钮文本颜色继承父元素，保持一致性。display:inline-block可能有问题，因为按钮默认是inline-block，但某些情况下可能需要覆盖。font-size:inherit和line-height:inherit确保按钮使用父元素的字体大小和行高，避免浏览器默认值干扰。 text-transform:none和text-decoration:none分别防止文本被转换（如大写）和去除下划线。transition:none可能用于禁用动画效果，但要注意是否需要覆盖所有属性。最后，-webkit-appearance:none、-moz-appearance:none和appearance:none是关键，它们移除平台特定的样式，确保按钮在不同系统上呈现一致。 用户提供的引用中有提到移动端1像素边框问题，虽然不直接相关，但说明用户可能关心样式一致性，尤其是跨设备表现。另外，引用中的过渡效果和3D样式可能涉及交互设计，但当前问题集中在重置按钮样式。 需要验证每个属性是否必要，比如appearance:none在某些情况下可能影响其他样式，比如自定义按钮可能需要额外调整。此外，cursor:pointer可能也需要添加，以保持按钮的可点击指示。同时，考虑按钮的内边距padding，默认可能有值，是否需要重置为0？ 还要检查是否有遗漏的属性，比如outline:none，但需注意可访问性，可能不建议完全移除焦点轮廓。用户提供的代码中没有提到，但可能需要根据需求调整。 总结，用户的现有代码大部分正确，但可以优化，比如使用border:0代替none，添加padding:0和cursor:pointer。此外，解释每个属性的作用，帮助用户理解为何需要这些重置步骤，并提醒潜在注意事项，比如可访问性影响。</think>### CSS按钮样式重置方法 要重置按钮样式并实现跨浏览器一致性，可使用以下优化后的CSS代码： ```css button { background-color: transparent; border: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; /* 新增 */ margin: 0; /* 新增 */ cursor: pointer; /* 新增 */ text-decoration: none; text-transform: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } ``` ### 关键属性解析 1. **背景与边框** `background-color: transparent` 比 `background: none` 更彻底 `border: 0` 比 `border: none` 更简洁有效[^1] 2. **继承属性** `font-family: inherit`（需补充）确保字体统一 `line-height: inherit` 避免行高异常 3. **交互优化** `cursor: pointer` 保持可点击指示（需补充） `padding: 0` 消除默认内边距 4. **平台样式清除** `appearance` 系列属性移除系统特定样式[^2] ### 注意事项 - 保留`outline`的可见性（或使用`:focus-visible`伪类），确保可访问性 - 移动端需配合`-webkit-tap-highlight-color: transparent`消除点击反馈色 - 使用伪元素选择器`:where(button)`可降低选择器优先级[^4]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值