首页 > 代码库 > CSS学习（三）
CSS学习（三）
CSS 分组 和 嵌套 选择器
分组选择器
h1,h2,p{color:green;}嵌套选择器
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>WENG</title> <style>p{ color:blue; text-align:center;}.marked{ background-color:red;}.marked p{ color:white;}</style></head><body><p>这个段落是蓝色文本，居中对齐。</p><div class="marked"><p>--------------这个段落不是蓝色文本。---------------</p></div><p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p></body></html>
尺寸 (Dimension)
尺寸属性
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
Positioning(定位)
position 属性指定了元素的定位类型。
position 属性的四个值：
- static
- relative
- fixed
- absolute
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed{ position:fixed; top:30px; right:5px;}
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left{ position:relative; left:-20px;}h2.pos_right{ position:relative; left:20px;}
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2{ position:absolute; left:100px; top:150px;}
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
所有的CSS定位属性
"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit | 2 |
| clip | 剪辑一个绝对定位的元素 | shape auto inherit | 2 |
| cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit | 2 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit | 2 |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| position | 指定元素的定位类型 | absolute fixed relative static inherit | 2 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit | 2 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit | 2 |
| z-index | 设置元素的堆叠顺序 | number auto inherit | 2 |
Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>WENG</title> <style>.thumbnail { float:left; width:110px; height:90px; margin:5px;}</style></head><body><h3>图片库</h3><p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"></body></html>
CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
水平对齐(Horizontal Align)
中心对齐,使用margin属性
块元素可以把左，右页边距设置为"自动"对齐。
Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE
margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：
.center{ margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6;}使用position属性设置左，右对齐
.right{ position:absolute; right:0px; width:300px; background-color:#b0e0e6;}
使用float属性设置左，右对齐
使用float属性是对齐元素的方法之一
.right{ float:right; width:300px; background-color:#b0e0e6;
组合选择符
在 CSS3 中包含了四种组合方式:
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以破折号分隔）
后代选取器
后代选取器匹配所有值得元素的后代元素。
以下实例选取所有插入到 <div> 元素中的<p> 元素.
div p{ background-color:yellow;}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
div>p{ background-color:yellow;}
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
div+p{ background-color:yellow;}
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
div~p{ background-color:yellow;}
CSS学习（三）