CSS 显示样式
在CSS中可以通过设置元素的 display 和 visibility 属性来设定元素如何显示和可见还是隐藏。
display 属性设置一个元素应如何显示。 visibility 属性指定一个元素应可见还是隐藏。如何隐藏一个元素?
可以通过把 display 属性设置为 none,或把 visibility 属性设置为 hidden。
需要注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,页面的整体布局上仍就会显示该元素占用的位置。
示例:
h1.hidden{visibility:hidden;}
试一试
display:none 可以隐藏某个元素,且隐藏的元素不会占用任何布局空间。在页面布局上,该元素会被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
示例:
h1.hidden {display:none;}
试一试
CSS Display 块和内联元素块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
div内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
span 如何改变一个元素显示可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。
下面的示例把列表项显示为内联元素:
示例:
li {display:inline;}
试一试
下面的示例把span元素作为块元素:
示例:
span {display:block;}
试一试
注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
display: inline-block与 display:inline 相比,display:inline-block 允许在元素上设置宽度和高度。
同样,原属如果设置了 display:inline-block,将保留上下外边距/内边距,而 display: inline 则不会。
与 display:block 相比,区别在于 display:inline-block 在元素之后不添加换行符,因此该元素可以位于其他元素旁边。
下面示例展示了 display: inline、display: inline-block 以及 display: block 的不同行为:
span.a { display: inline; /* span 的默认值 */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow;
试一试
使用 inline-block 来创建导航链接display 的一种常见用法是 :inline-block 用于水平而不是垂直地显示列表项。下例中创建了一个水平导航链接:
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; .nav li { display: inline-block; font-size: 20px; padding: 20px;
试一试
如何显示元素的内联元素
这个例子演示了如何显示一个元素的内联元素。
如何显示元素的块元素
这个例子演示了如何显示一个元素的块元素。
如何使用一个表的collapse属性
这个例子演示了如何使用表的collapse属性。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59538.html
php相关文章
- CSS 水平居中与垂直居中的16个方法
- css 更改所有text,CSS之cssText「建议收藏」
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- html布局_css三栏布局
- CSS媒体查询_css网页
- 常用的HTML和CSS(content)特殊字符图标
- css 实现文本溢出显示省略号
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
- 【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )
- CSS- 文本超出指定宽度后隐藏并显示为省略号详解编程语言
- CSS渲染速度改善的十个方法与建议详解编程语言
- CSS 定位样式
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 小心:CSS代码书写顺序不同,导致显示效果不一样
- CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
- css客齐集社区头像显示效果