分组选择器
——————>
嵌套选择器
能适用于选择器内部的选择器的样式
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
控制高宽
增加行间距
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素
- 块元素是一个元素，占用了全部宽度，在前后都是换行符【如<p> <h1> <div>】
- 内联元素只需要必要的宽度，不强制换行【如<a> <span>】
内敛元素和块元素的相互转换
li {display:inline;} //变为内敛
span {display:block;} //变为块
内敛和块的特性
visibility属性
——————>
重叠的元素————z-index指定堆叠顺序
定位属性
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明
控制内容溢出元素框时显示的方式
添加滚动条
元素溢出元素框【显示在外面】
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
彼此相邻的浮动
——————>
清除浮动
clear 属性指定元素两侧不能出现浮动元素