html中占位隐藏,css样式占位和不占位隐藏元素的方法
css样式常用display: none;与visibility: hidden;方法设置元素隐藏,其中display:none方法隐藏元素不占位,visibility: hidden;方法隐藏元素占位。下面我们来看一下这两种方法如何使用。
display属性介绍:
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
display:block可以显示一个块元素,或者display:inline是显示一个内联元素。
display主要用的CSS样式有以下三个:
display:block——显示为块级元素。
display:inline——显示为内联元素。
display:inline-block——显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。
使用display:none设置隐藏元素。
给元素设置display:none样式
A元素
B元素
C元素
效果图:
visibility属性介绍:
1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样
示例:
给元素设置visibility:hidden样式
- 元素1
- 元素2
- 元素3
- 元素4
给元素设置display:none样式
- 元素1
- 元素2
- 元素3
- 元素4
效果图:
html中占位隐藏,css样式占位和不占位隐藏元素的方法相关推荐
- webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
- css样式对IOS设备苹果手机不支持解决方法
css样式对IOS设备苹果手机不支持解决方法 在写移动端的网页的时候发现到苹果的设备上浏览的时候按钮变成了苹果的灰色按钮. 在class文件中写入下面的代码可以解决. input[type=" ...
- ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法 发布时间:2021-07-01 12:08:38 来源:亿速云 阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
- web前端入门到实战:11种常用css样式之滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/是否对内容的左/右边缘进行裁剪/overflow-y: hidden;/是否对内容的上/下边缘进行裁剪/overflow:scroll;/左右滚动/ ...
- SEO中的DIV CSS样式的命名规则
在搜索引擎优化中,对于代码的优化是一个非常重要的部分. 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的. 同样, 在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不 ...
- Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...
- 在html中加入外部css样式,如何引入CSS样式表?
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...
- 微软雅黑html中怎么写,css样式怎么设置字体为微软雅黑?
css样式怎么设置字体为微软雅黑?下面本篇文章就来给大家介绍一下使用CSS设置字体为微软雅黑的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 首先要了解css中是如何控制字体的 ...
- frontpage css,在Frontpage 中定义网页CSS样式
[点评] 相关网页设计频道网页设计培训网页设计网上培训综合辅导说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的, ...
最新文章
- virtualBox NAT模式,设置虚拟机可上网,宿主机可访问虚拟机的方法
- 2020-11-11(aidl)
- Python中爬虫框架或模块的区别!
- 微服务一定要使用Spring-Cloud吗?
- java演练 循环嵌套 菱形图案的打印 四个阶段完成输出
- 2018 ACM/ICPC 南京站小结
- java 内省 反射_如何使用反射/内省来维护程序?
- php 怎么看nginx,查看nginx是否启动
- 终于等到你——ggplot2树状图
- [PAT B1023]组个最小数
- 解决idea使用jdbc连接数据库失败的方法(针对驱动导入失败)
- ucenter通信失败和不能登录的解决
- Levenberg-Marquardt(LM算法)
- 贪吃蛇的c语言运行程序,用C语言编写贪吃蛇游戏的程序
- 产品结构图 = 产品功能结构图 + 产品信息结构图
- 电脑长时间睡眠会自动关机吗_电脑睡眠久了是不是自动关机
- linux drupal 7,在CentOS 7下试验Drupal 7
- 金蝶eas oracle数据库,金蝶EAS服务器.ppt
- 数据结构课程设计(魔王语言(c语言)的简单代码)
- HDU 1005 第二次呜呜呜 除49啥的请别信
热门文章
- 天池全球城市计算AI挑战赛-地铁客流量预测 22/2319
- 物联网课程学习目标_恒华科技(300365)泛在电力物联网建设加速,助力实现全年高增长目标...
- virtio系列-packed virtqueue
- 陈安之:成功者都运用“潜意识”的力量
- 大神教你如何剪辑热播剧《你是我的荣耀》,3分钟精彩片段变现!【覃小龙课堂】
- 张振宇软件工程导论_Intel张振宇:计算、存储和网络推动云计算发展
- 人工智能,天使还是魔鬼
- 组合逻辑毛刺消除(竞争冒险)
- 《今天你买到票了吗?——从铁道部12306.cn网站漫谈电子商务网站的“海量事务高速处理”系统》
- 使用matlab完成对鸢尾花数据集的特征选择、主成分分析(PCA)、核主成分分析(KPCA)、线性判别分析(LDA)的若干处理