display：none和block

时间: 2023-04-26 14:01:49 浏览: 701

css display:none使用注意事项小结

在Web页面前台编码过程中，CSS属性display: none经常被用来隐藏页面上的元素，以便于构建动态交互效果或是实现页面布局调整。但这个属性的使用需要特别注意几个关键点，以确保不会影响页面的交互性、可访问性以及搜索引擎优化（SEO）效果。关于JavaScript与display: none的交互性问题。当一个元素应用了display: none，该元素从渲染树中被移除，不会在页面上占据任何空间。这意味着，如果页面加载后没有使用JavaScript重新将display属性设置为block、inline等值，那么该元素的某些属性，例如offsetTop、offsetLeft，将会返回0。这是因为在DOM元素中，这些属性的值是相对于包含块来计算的，当元素的display属性被设置为none时，它不再作为一个布局单元，因此这些偏移值无法被正确计算。只有将元素的display属性设置为display: block或display: inline等非none值，才能使得元素重新参与布局计算，并且能够被正确地获取到这些属性值。关于SEO的问题。使用display: none隐藏的内容通常不会被搜索引擎的蜘蛛程序所索引，这可能会影响网站的SEO表现。如果需要对内容进行隐藏而又不希望影响SEO，可以考虑使用其他方法，如将元素移出视窗之外（例如使用left: -100000px），或者使用visibility: hidden属性。虽然visibility: hidden也会隐藏元素，但它保留了元素在页面上的空间，也就是说，元素虽然看不见，但空间依然被保留，因此蜘蛛程序能索引到内容。再者，关于样式应用方法的差异。如果在样式文件或页面中的<style>标签内应用了display: none，然后尝试通过JavaScript将style.display设置为一个空字符串""，这样做并不会使元素显示。在这种情况下，需要使用其他值如block或inline来覆盖原有的display: none设置。然而，如果display: none是在元素的内联样式上直接设置的（即style="display:none"），这种情况下通过JavaScript将style.display设置为其他值是有效果的。关于visibility属性的使用。当需要隐藏元素但不希望影响到页面布局时，visibility: hidden是一个不错的替代选项。因为被设置为visibility: hidden的元素虽然对用户不可见，但是它仍然占据着页面空间，不会影响到其他元素的布局。这与display: none相比，后者会使元素彻底消失，不再占据任何空间。在某些情况下，比如需要在页面布局上保留元素的空间，同时又不希望内容对用户可见时，使用visibility: hidden较为合适。 display: none是一个强大的CSS属性，但使用时需要注意以下几点： 1. 在JavaScript中，使用display: none的元素将无法被准确获取位置信息，除非通过JavaScript将display属性重新设置为其他值。 2. 使用display: none可能会对网站的SEO产生负面影响，因为搜索引擎蜘蛛通常不会索引这些内容，可以考虑使用其他方法来隐藏内容。 3. 当display: none通过样式文件或<style>标签设置时，使用JavaScript来恢复元素的显示可能需要使用其他非none值来替代。 4. 当需要隐藏元素同时保留布局空间时，可以选择使用visibility: hidden代替display: none。

display: none和block是CSS中的两个属性，用于控制HTML元素的显示和隐藏。 display: none表示将元素隐藏，不占据页面空间，即使元素原本占据了一定的空间，也会被隐藏。这个属性常用于隐藏不需要显示的元素，比如弹出层、广告等。 display: block表示将元素显示为块级元素，即元素会占据一整行的空间，可以设置宽度、高度、内边距和外边距等属性。这个属性常用于将元素显示为独立的块，比如段落、标题等。总之，display: none和block是CSS中常用的两个属性，可以控制HTML元素的显示和隐藏，让页面更加美观和易于操作。

阅读全文

display：none和block

相关推荐

javascript获取隐藏元素(display:none)的高度和宽度的方法

让IE6/IE7支持display:inline-block属性的两种方法

以下声明，可以隐藏对象的是? A.display:block B.display:inline C.display:none D.display:inline-block

10.以下声明，可以隐藏对象的是? A.display:inline B.display:none C.display:block D.display:inline-block

存在display: flex的情况下如何使用display: none和display: block

display：none和display：block用选择器hover怎么用

jsp里将组件设置为display:none为什么在js里用display:inline-block报错

visiblity:hidden和display:none的差异

揭秘display:none：隐藏与作用解析

css 中display ：none隐藏元素，鼠标悬浮时设置display:block 元素不显示

某个元素有如下一个类： li.text-con { position: relative; display: inline-block; vertical-align: middle; }，在不动该类的情况下，怎么去除display: inline-block;属性

@media only screen and (max-width: 768px) { figure { display: none;} .navbar,.navbar ul,.navbar li { padding: 0; } .navbar li { display: block; } .navbar a { display: block; padding: 0.5em 0; border-bottom: 2px ridge #00005D; } h1 , .is, .nba{text-align:center;}}

display: none;的作用

display:none 如何让显现

怎么取消display:none设置

display:none隐藏如何进行显示

.login-btn, .register-btn { display: inline-block; padding: 10px 20px; border: 1px solid #ccc; background-color: #fff; color: #333; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: bold; }改成中间分开的两个

css中display:none隐藏如何进行显示

怎么把!important加在iframe { display: block; border: none; margin: 0; padding: 0; overflow: hidden; }上面

最新推荐

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

小栗子源码2.9.3版本发布