CSS中display属性 block，inline，none的区别

最新推荐文章于 2022-03-05 22:34:49 发布
最新推荐文章于 2022-03-05 22:34:49 发布
阅读量3.4k 收藏 1
点赞数 1
分类专栏： HTML/CSS 实习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/exceptional_derek/article/details/18506529
版权

display的属性值有很多，最常用的是以下三种。

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

下面附上一个非常好的例子，更加直观的体现了他们三者之间的区别。

display 属性分别为block, inline, none 值时的显示区别



吴孟达
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css中的display属性
01-21
首先，所有主流浏览器都支持 display 属性。...那么，display:inline、display:block和display:inline-block有什么区别呢？ 复制代码代码如下:<style>.inline{display:inline; width:100px; height:100px;
「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block
前端达人
07-05 583
开篇本篇文章，笔者将介绍display的基本属性，主要涉及以下内容：display: none vs visibility: hiddendisplay: blockdi...
display属性常用的四个值：block、inline、inline-block、none
No8g攻城狮的博客
01-07 2755
目录 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. ...
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1095
aaa
display的block、none、inline属性及解释
某年某月某条街
08-21 2543
display:block的作用： 让被隐藏的块级元素显示出来，一般是相对于diplay:none;使用的 比较常用于a、span这两个标签——因为这两个标签非块元素，如果不用display:block;定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。 display:block不换行的办法： 设置display属性为inline-block，则不会换行
关于display:none和display:block的问题
不积跬步，无以至千里
08-21 2万+
如果使用了display:none，会使该标签消失；可以通过display:block重新恢复该标签。但是这里有一个问题，使用了display：none之后会使该标签原本的样式被清除，所以就算重新恢复标签也不会恢复原本的样式。 解决办法： 不要直接令某一个标签的display属性设置为none，应当用一个div标签将要消失的标签包起来，然后通过该div标签的display来实现内部标签的隐藏和
CSS属性中Display与Visibility区别分析
12-13
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示（仅）隐藏，不可恢复。... none隐藏（元素消失），可恢复 inline,block显示 1、displ
css中display和visibility的用法和区别介绍
12-11
Display的属性值 block：/*表现为一个块级元素（一般情况下独占一行）*/当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像元素一样，它会在那个点被放入到页面中。(实际上你可以设置的...
浅谈CSS的Display属性可能的值
12-13
none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-...
CSS属性
DSkzpark的博客
07-03 211
继承 子元素会继承父元素的某些属性 一般都是跟文字相关的属性才会被继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。 属性值的计算过程 一个元素在渲染的过程中，该元素的每个css属性都必须值 整个网页渲染的流程： DOM树 css属性值从无到有的过程 确定声明值 层叠冲突 样式层叠冲突的时候，如何处理？ 2.1 重要性 2.2 比较特殊性 选择器的权重计算 2.3 比较代码属性的顺序，后来者居上 使用继承
js修改display，在none和block之间切换不显示问题
渔火江渚上的博客
05-21 9898
目的：这是我的目的，要实现的效果 点击回复a链接 ，输入框input所在父元素div，显示或隐藏。 input>div>div（这个最外层div，对应着问题一，和问题二无关） 问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div 问题二：dislay属性值...
CSS3学习笔记2
qq_52476758的博客
03-05 243
1. CSS3中的变形与动画(下)1.1 Keyframes介绍1.2 animation的使用1.2.1 CSS3中调用动画1.2.2 CSS3中设置动画播放时间1.2.3 CSS3中设置动画播放方式1.2.4 CSS3中设置动画开始播放的时间1.2.5 CSS3中设置动画播放次数1.2.6 CSS3中设置动画播放方向1.2.7 CSS3中设置动画的播放状态1.2.8 CSS3中设置动画时间外属性2. 布局样式相关2.1 多列布局2.1.1 Columns2.1.2 column-width2.1.3 .
css实现 display: none和display: block的切换动画
热门推荐
李二狗的博客
10-19 4万+
话不多说先上代码.index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ececec; } .index-detail-list .item-contain.active{ display: bl
CSS中除了display:none以外，可以隐藏页面元素的几种方法
Benjamin920813的博客
09-17 4165
CSS中除了display:none以外，可以隐藏页面元素的几种方法 display：none display:none是我们最常用的隐藏页面元素的方法，使用display:none方法隐藏的页面元素，应该算是真正意义上的隐藏，因为它使元素完全不占空间，连盒模型也不生成，任何基于该元素的用户交互操作也不会起作用，并且读屏软件也读不到它，一旦某个页面元素被设置了display:none的属性后，该元...
css中的block与none
weixin_34220623的博客
03-08 351
*{ display:none; } div{ display:block; } div 会正常显示粗来吗？不会 因为*代表所有元素，包括div的父级元素html，body 父级元素都不显示了，子元素怎么会显示 坑！！！ 转载于:https://www.cnblogs.com/windseek/p/8529832.html...
CSS display:none使用注意事项小结
归家落叶人
07-22 3619
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影
display:none/block的应用以及和visibility的区别，隐藏/显示内容
u012309349的博客
10-24 4008
display:none/block; visibility:hidden/visible;
CSS display:none和visibility:hidden区别
jiaguo699的专栏
03-29 782
CSS display:none和visibility:hidden的区别 visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！ Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM
用display:none和display:block来…
王安的博客
02-23 2504
用display:none和display:block来控制层的显示
display:block|none|inline|compact
最新发布
07-25
这是关于 CSS 中 display 属性的几个可选值： 1. `block`：元素将被显示为块级元素，占据一整行，可以设置宽度、高度和边距等属性。 2. `none`：元素将被隐藏，不占据任何空间，并且不可点击。 3. `inline`：元素将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值