CSS复习（中）——框、定位和选择器

一、CSS 框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

提示：背景应用于由内容和内边距、边框组成的区域。

1.内边距 padding
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
padding 属性接受长度值或百分比值，但不允许使用负值。
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

单边内边距属性
●padding-top
●padding-right
●padding-bottom
●padding-left

内边距的百分比数值是相对于其父元素的 width 计算的，这一点与外边距一样。
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

2.边框 border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许规定元素边框的样式、宽度和颜色。

（1）边框与背景
元素的背景是内容、内边距和边框区的背景。

（2）边框的样式
border-style定义了 10 个不同的非 inherit 样式，包括 none。

属性值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;} //上右下左

定义单边样式
单边边框样式属性：

border-top-style
border-right-style
border-bottom-style
border-left-style

（3）边框的宽度
border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

分别设置边框各边的宽度

  border-top-width
    border-right-width
    border-bottom-width
    border-left-width

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果想要边框出现，就必须声明一个边框样式。

（4）边框的颜色
border-color 属性设置边框颜色，它一次可以接受最多 4 个颜色值。

定义单边颜色

border-top-color
border-right-color
border-bottom-color
border-left-color

（5）透明边框
border-color: transparent;

3.外边框 margin
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

（1）margin属性
margin 属性接受任何长度单位，可以是像素px、英寸in、毫米mm、厘米cm或 em。
margin 可以设置为 auto（浏览器计算外边距）默认。更常见的做法是为外边距设置长度值。

（2）值复制

例1

margin:10px 5px 15px 20px;

上外边距是 10px，右外边距是 5px，下外边距是 15px，左外边距是 20px

例 2

margin:10px 5px 15px;

上外边距是 10px，右外边距和左外边距是 5px，下外边距是 15px

例 3

margin:10px 5px;

上外边距和下外边距是 10px，右外边距和左外边距是 5px

例 4

margin:10px;

所有 4 个外边距都是 10px

单边外边距属性

margin-top
margin-right
margin-bottom
margin-left

4.外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

点击此处，查看详解

二、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

<<在复习定位之前，复习一下文档流的概念~请看这个博主的文章>>

1.position属性
规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

属性值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative	生成相对定位的元素，相对于其正常位置进行定位。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
inherit	规定应该从父元素继承 position 属性的值。

2.overflow属性
规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden ：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit： 规定应该从父元素继承 overflow 属性的值。

3.clip属性
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
clip 属性剪裁绝对定位元素。
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
shape： 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto ：默认值。不应用任何剪裁。
inherit ：规定应该从父元素继承 clip 属性的值。
点击此处，查看例子

4.vertical-align 属性
设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

baseline ：默认。元素放置在父元素的基线上。
sub ：垂直对齐文本的下标。
super ：垂直对齐文本的上标
top ：把元素的顶端与行中最高元素的顶端对齐
text-top ：把元素的顶端与父元素字体的顶端对齐
middle ：把此元素放置在父元素的中部。
bottom ：把元素的顶端与行中最低的元素的顶端对齐。
text-bottom ： 把元素的底端与父元素字体的底端对齐。
length：
% ：使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit：规定应该从父元素继承 vertical-align 属性的值。

5.z-index 属性
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

auto :默认。堆叠顺序与父元素相等。
number :设置元素的堆叠顺序。
inherit:规定应该从父元素继承 z-index 属性的值。

6.float属性
定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

left：元素向左浮动。
right ：元素向右浮动。
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit ：规定应该从父元素继承 float 属性的值。

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：

7.clear 属性
规定元素的哪一侧不允许其他浮动元素。
left :在左侧不允许浮动元素。
right :在右侧不允许浮动元素。
both :在左右两侧均不允许浮动元素。
none: 默认值。允许浮动元素出现在两侧。
inherit: 规定应该从父元素继承 clear 属性的值。

三、CSS选择器

1.CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。元素选择器又称为类型选择器（type selector）

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

2.CSS分组
（1）选择器分组

body, h2, p, table, th, td, pre, strong, em {color:gray;}

（2）通配符选择器
显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

* {color:red;}

（3）声明分组
对声明分组，一定要在各个声明（属性）的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

（4）结合选择器和声明的分组

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

3.CSS类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
（1）类选择器
1°修改 HTML 代码，指定一个元素的class为一个适当的值

<h1 class="important">
This heading is very important.
</h1>

2°语法
使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器：

.important {color:red;}

3°结合元素选择器
类选择器可以结合元素选择器来使用。
例如，只有段落显示为红色文本：

p.important {color:red;}

（2）多类选择器
和单词的顺序无关。

<p class="important warning">
    This paragraph is a very important warning.
    </p>
.important.warning {background:silver;}

点击此处，查看例子

4.CSS ID选择器
ID选择器引用id中的值，在值前加“#”。

*#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

●类选择器还是 ID 选择器？
区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。

●区分大小写
请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

5.CSS 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
（1）简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

*[title] {color:red;}
//包含标题（title）的所有元素变为红色

a[href] {color:red;}
//只对有 href 属性的锚（a 元素）应用样式
    
a[href][title] {color:red;}
//同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

（2）根据具体属性值选择
[abc="def"] 属性与属性值必须完全匹配

（3）根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
[abc~="def"] 选择 abc 属性值中包含单词 “def” 的元素

该选择器等价于我们在类选择器中讨论过的点号类名记法。
p.important 和 p[class=“important”] 应用到 HTML 文档时是等价的。

[abc^="def"] 选择 abc 属性值以 “def” 开头的所有元素
[abc$="def"] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 “def” 的所有元素

（4）特定属性选择类型
[abc|="def"] 选择 abc 属性值中以 “def” 开头的元素，该元素必须是整个单词。

6.后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

7.CSS 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。使用“>”（子结合符）。
子结合符两边可以有空白符，这是可选的。

h1 > strong {color:red;}

结合后代选择器和子选择器

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

8.CSS 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

结合其他选择器
相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

9.CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果。
（1）语法
伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用：

selector.class : pseudo-class {property: value}

（2）锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

！爱恨原则！l o v e -> h a t e

:focus 向拥有键盘输入焦点的元素添加样式。

（3）伪类与 CSS 类
伪类可以与 CSS 类配合使用：

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

（4）：first-child 伪类
向某元素的第一个子元素添加样式。

（5）:lang伪类
向带有指定 lang 属性的元素添加样式，为不同的语言定义特殊的规则。
例子：:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

10.伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
（1）语法
伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用：

selector.class : pseudo-class {property: value}

（2）:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。

注释：“first-line” 伪元素只能用于块级元素。

注释：下面的属性可应用于 “first-line” 伪元素：

font/color/background/word-spacing/letter-spacing/text-decoration
vertical-align/text-transform/line-height/clear

（3）:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式：

注释：“first-letter” 伪元素只能用于块级元素。

注释：下面的属性可应用于 “first-letter” 伪元素：

font、color、background、margin、padding、border、text-decoration
vertical-align (仅当 float 为 none 时)、text-transform、line-height
float、clear

（3）伪元素和 CSS 类
伪元素可以与 CSS 类配合使用：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

（4） :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。

（5）after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。