CSS display 【css显示 隐藏块】属性教程
24 . Jan . 2019
CSS display 【css显示 隐藏块】属性教程
CSS display none block inline显示隐藏对象
我们常常使用display样式设置对象及对象内容显示与隐藏。
一、display语法
Block 块对象的默认值。用该值为对象之后添加新行
None 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
Inline 内联对象的默认值。用该值将从对象中删除行
二、常用display
1、div{display:block} 有换行作用。
2、div{display:None } 隐藏对象及对象内容。
3、div{display:inline } 在一排显示。
代表案例，对li列表默认一排显示li{display:Inline }
三、display显示与隐藏案例
我们重点讲解常用的display显示对象内容（display:block）与隐藏对象内容（display:None）,通过案例介绍。
通常默认html内容是显示，但有时我们想前期他隐藏，鼠标经过一个触发地方，便显示被隐藏内容，这个时候开始时候我们运用display:None，当鼠标经过触发地方时，JS对应调用display:block样式的CSS显示内容。常见Tab滑动门选项卡（鼠标经过栏目，对应内容显示）。
因为HTML在不设置CSS display样式，本身内容是显示的，所以我们这里就只实践通过CSS div display隐藏对象。
1、隐藏案例说明
我们使用css display:none隐藏一个DIV与此DIV标签内的内容。
2、CSS代码片段
" _ue_custom_node_="true">
3、HTML代码片段
我显示 第一排我被隐藏 第二排我显示 第三排
四、display总结
这里特别要说明使用display:none是比较方便的隐藏对象内容方法，比如他们在网页插入第三方统计时候，便会显示CNZZ的图标或文字内容，为了又统计网页网站访问流量，又要通过CSS隐藏掉，我们即可以使用此样式实现；对于一些SEO来说隐藏链接，使用display:none将是一个错误选择，无论display:none是在html标签内使用还是，CSS文件引入，搜索引擎都会识别你使用此属性，搜索引擎也不会读取或索引你此样式里的内容。
作者：@悦阁网络科技
悦阁网络科技有限公司专业为中小企业提供精致的佛山网站建设、佛山网站设计、佛山网站制作及相关网络营销等服务，是广佛地区最好的网络科技公司之一，在广佛做网站开发就找悦阁网络科技！
您对建网站有需求？请回到首页“悦阁网络”官网 查找您想建哪种类型的网站，然后联系我们客服QQ，我们将竭诚为您服务！
