隐藏元素
display属性
隐藏一个元素可以通过把 display 属性设置为"none":可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失
效果:
visibility属性
visibility:hidden; 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为 display:block; 是不允许有它内部的嵌套块元素。
display: inline-block
与 display: inline 相比,主要区别在于 display: inline-block; 允许在元素上设置宽度和高度。
同样,如果设置了 display: inline-block;,将保留上下外边距/内边距,而 display: inline; 则不会。与 display: block; 相比,主要区别在于 display:inline-block; 在元素之后不添加换行符,因此该元素可以位于其他元素旁边。
display 的一种常见用法:inline-block 用于水平而不是垂直地显示列表项。
伪类
伪类用于定义元素的特殊状态。
例如,它可以用于:
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
伪元素
伪元素用于设置元素指定部分的样式。
例如,它可用于:
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
超链接
链接可以使用任何 CSS 属性(例如 color、font-family、background 等)来设置样式。
四种链接状态分别是:
a:link - 正常的,未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时
如果为多个链接状态设置样式,请遵循如下顺序规则:
a:hover 必须 a:link 和 a:visited 之后
ve - 链接被点击时
如果为多个链接状态设置样式,请遵循如下顺序规则:
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后