Hello World!
这个段落不受该样式的影响。
```Hello World!
这个段落不受该样式的影响。
### class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 **.** 号显示： 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。 ```段落居中。
```段落居中。
你也可以指定特定的 HTML 元素使用 class。 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中: **实例** `p.center {text-align:center;}`这个段落居中对齐。
多个 class 选择器可以使用空格分开： **实例** ``` .center { text-align:center; } .color { color:#ff0000; } ```段落居中，颜色为红色。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 ### 通用选择器 语法形式为：*{属性：属性值}。它的作用是匹配 html 中的所有元素标签。 ```段落也为红色
``` ### 元素选择器（element selector，ES） 又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式 ```italic text
``` 组合选择器被称为 组合器（Combinators）。一共有4种组合器： ' ' 后代组合器（Descendant combinator） '>' 直接子代组合器（Child combinator） '~' 一般兄弟组合器（General sibling combinator） '+' 紧邻兄弟组合器（Adjacent sibling combinator） ### 运算符 #### 包含选择器（package selector，PS） 指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式 ```red text
yellow text
red text
|
no red text; |
no red text
red text
not red text
not red text
red text
not red text
``` ### 标签属性选择器 这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式： CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。 属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。 注意：IE7 和 IE8 需声明 !DOCTYPE 才支持属性选择器！IE6 和更低的版本不支持属性选择器。 以下是常见的 CSS 属性选择器： 1、[attribute] 选择带有指定属性的所有元素（无论属性值是什么）。 /* 选择所有具有 `type` 属性的元素 */ ``` [type] { border: 1px solid red; } ``` 2、[attribute="value"] 选择具有指定属性和值完全匹配的元素。 /* 选择所有 `type` 属性等于 `text` 的元素 */ ``` [type="text"] { background-color: yellow; } ``` 3、[attribute~="value"] 选择属性值中包含指定词（用空格分隔的词列表之一）的元素。 /* 选择属性值中包含 `button` 的元素 */ ``` [class~="button"] { font-weight: bold; } ``` 4、[attribute|="value"] 选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，常用于语言代码。 /* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */ ``` [lang|="en"] { color: green; } ``` 5、[attribute^="value"] 选择属性值以指定值开头的元素。 /* 选择所有 `href` 属性以 `https` 开头的链接 */ ``` [href^="https"] { text-decoration: none; } ``` 6、[attribute$="value"] 选择属性值以指定值结尾的元素。 /* 选择所有 src 属性以 .jpg 结尾的图片 */ ``` [src$=".jpg"] { border: 2px solid blue; } ``` 7、[attribute*="value"] 选择属性值中包含指定值的元素。 /* 选择所有 `title` 属性中包含 `tutorial` 的元素 */ ``` [title*="tutorial"] { font-style: italic; } ``` a[title] - 带元素限制的属性选择器 ``` a[title] { } ``` 或者根据一个有特定值的标签属性是否存在来选择： ``` a[href="https://example.com"] { } ``` "value 是完整单词" 类型的比较符号: =(完全匹配)，~=（包含指定词）, |=（选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，） "拼接字符串" 类型的比较符号: *=(包含), ^=（以开头）, $ =（以结尾） - 元素选择器/标签选择器ES 说明：选中指定标签，也叫元素选择器 - id选择器IS # 说明：选中id属性 - class选择器CS . 说明：选中class属性 - 属性选择器AS [] 说明：这样写"a[id]"，选中指定规则的属性，所在标签。 - 包含选择器PS （空格） 说明：选中所有儿子，孙子等.... - 子选择器SS > 说明：选中所有儿子，不选孙子等... - 兄弟选择器BS ~ 说明：选中后面一个或多个兄弟 - 相邻选择器 + 说明：选中后面一个兄弟 - 伪类选择器 : 说明：主要根据用户动作，标签位置，标签状态来选中 - 伪元素选择器 :: 说明：主要选中一段文本的一行，首字，或前后添加样式 css 中逗号，空格，冒号，点号的含义 1. #a,b{…………｝一个id叫a和一个标签是b的样式 2. #a b{…………｝一个id叫a下面的一个标签是b的样式 3. #a:b{…………｝一个id叫a的伪类b，例如：a:hover 4. #a.b{…………｝一个id叫a的下面的class叫b的样式 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。 优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。 优先级顺序 （行内样式） > （ID选择器） > （类/伪类/属性选择器） > （元素（标签）/伪元素） > （通用选择器） !important 规则例外 当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。 样式来源的优先级 内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表 一些经验法则： Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important Never 永远不要在全站范围的 css 上使用 !important Never 永远不要在你的插件中使用 !important 利用选择器的权值进行计算比较，em 显示蓝色，示例如下：https://c.runoob.com/codedemo/3048 CSS 优先级法则： A 选择器都有一个权值，权值越大越优先； B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置； C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式； D 继承的CSS 样式不如后来指定的CSS 样式； E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下： 在学习 CSS 的过程中，你可能听说过一种"选择器加权值"的说法：ID 选择器的权重是 100，类选择器是 10，标签选择器是 1，然后把它们加起来比较大小。这种理解方式虽然表面上容易记，但其实是错误的。 举个例子，有两个选择器： .class1.class2.class3 ... （共11个类） #id 如果你用"加法"的方法计算，会认为前者权重是 110，后者是 100，应该前者胜出。可实际上，浏览器会选择后者的样式（#id 的）。 为什么？因为 CSS 并不是把选择器权重当作"十进制加法"处理的。CSS 的优先级比较本质上是分级比较，可以理解为四位数比较： 内联样式：1,0,0,0 ID 选择器：0,1,0,0 类、属性选择器、伪类：0,0,1,0 标签选择器、伪元素：0,0,0,1 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 CSS 继承性取决于 HTML 的父子层级关系（嵌套关系），而不是标签是否相同。 CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构： ```继承，即 \
也拥有属性 color: red。 由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是： CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。 例1： ```
表示段落： 字体大小的值可以是绝对或相对的大小。 绝对大小： - 设置一个指定大小的文本 - 不允许用户在所有浏览器中改变文本大小 - 确定了输出的物理尺寸时绝对大小很有用 相对大小： - 相对于周围的元素来设置大小 - 允许用户在浏览器中改变文字大小 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。 **设置字体大小像素** 设置文字的大小与像素，让您完全控制文字大小： **实例** ``` h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} ``` 上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。 虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本 **用em来设置字体大小** 为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。 em的尺寸单位由W3C建议。 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。 因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：**px/16=em** **实例** ``` h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ ``` 在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。 不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。 **使用百分比和EM组合** 在所有浏览器的解决方案中，设置 \
元素的默认字体大小的是百分比： **实例** ``` body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} ``` ## CSS链接 **链接样式** 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： - a:link - 正常，未访问过的链接 - a:visited - 用户已访问过的链接 - a:hover - 当用户鼠标放在链接上时 - a:active - 链接被点击的那一刻 **实例** ``` a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ ``` 当设置为若干链路状态的样式，也有一些顺序规则： - a:hover 必须跟在 a:link 和 a:visited后面 - a:active 必须跟在 a:hover后面 **常见的链接样式** 根据上述链接的颜色变化的例子，看它是在什么状态。 让我们通过一些其他常见的方式转到链接样式： **文本修饰** text-decoration 属性主要用于删除链接中的下划线： ``` a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} ``` **背景颜色** 背景颜色属性指定链接背景色： **实例** ``` a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} ``` 链接样式的顺序记忆： L(link)OV(visited)E and H(hover)A(active)TE **CSS 列表** CSS 列表属性作用如下： - 设置不同的列表项标记为有序列表 - 设置不同的列表项标记为无序列表 - 设置列表项标记为图像 **列表** 在 HTML中，有两种类型的列表： - 无序列表 **ul** - 列表项标记用特殊图形（如小黑点、小方框等） - 有序列表 **ol** - 列表项的标记有数字或字母 使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。 **不同的列表项标记** list-style-type属性指定列表项标记的类型是： **实例** ``` ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} ``` 作为列表项标记的图像 要指定列表项标记的图像，使用列表样式图像属性： 实例 ``` ul { list-style-image: url('sqpurple.gif'); } ``` **浏览器兼容性解决方案** 同样在所有的浏览器，下面的例子会显示的图像标记： **实例** ``` ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } ``` 例子解释： - ul: - 设置列表类型为没有列表项标记 - 设置填充和边距 0px（浏览器兼容性） - ul 中所有 li: - 设置图像的 URL，并设置它只显示一次（无重复） - 您需要的定位图像位置（左 0px 和上下 5px） - 用 padding-left 属性把文本置于列表中 **列表 - 简写属性** 在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。 为列表使用简写属性，列表样式属性设置如下： **实例** ``` ul { list-style: square url("sqpurple.gif"); } ``` 可以按顺序设置如下属性： - list-style-type - list-style-position (有关说明，请参见下面的CSS属性表) - list-style-image **移除默认设置** list-style-type:none 属性可以用于移除小标记。默认情况下列表无边框。
虚线边框。
虚线边框。
实线边框。
双边框。
凹槽边框。
垄状边框。
嵌入边框。
外凸边框。
隐藏边框。
混合边框
**边框宽度** 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。 **注意：**CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。 **实例** ``` p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } ``` **边框颜色** border-color属性用于设置边框的颜色。可以设置的颜色： - name - 指定颜色的名称，如 "red" - RGB - 指定 RGB 值, 如 "rgb(255,0,0)" - Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。 **注意：** border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。 **实例** ``` p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } ``` **边框****-****单独设置各边** 在CSS中，可以指定不同的侧面不同的边框： **实例** ``` p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } ``` 上面的例子也可以设置一个单一属性： **实例** `border-style:dotted solid;` border-style属性可以有1-4个值： - **border-style:dotted solid double dashed;** - 上边框是 dotted - 右边框是 solid - 底边框是 double - 左边框是 dashed - **border-style:dotted solid double;** - 上边框是 dotted - 左、右边框是 solid - 底边框是 double - **border-style:dotted solid;** - 上、底边框是 dotted - 右、左边框是 solid - **border-style:dotted;** - 四面边框是 dotted 上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。 **边框-简写属性** 上面的例子用了很多属性来设置边框。 你也可以在一个属性中设置边框。 你可以在"border"属性中设置： border-width border-style (required) border-color 实例 `border:5px solid red;` border-style：属性1，属性2，属性3，属性4 上->右->下->左 border-style：属性1，属性2，属性3 上->左右->下 border-style：属性1，属性2 上下->左右 border-style：属性1 上下左右属性相同 **CSS** **轮廓（****outline****）**  轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint） ## **CSS margin(****外边距****)**  CSS margin(外边距)属性定义元素周围的空间。 **margin** margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 **可能的值** | **值** | **说明** | | -------- | --------------------------------------------- | | auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 | | *length* | 定义一个固定的margin（使用像素，pt，em等） | | *%* | 定义一个使用百分比的边距 | Margin可以使用负值，重叠的内容。 **Margin -** **单边外边距属性** 在CSS中，它可以指定不同的侧面不同的边距： **实例** ``` margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; ``` **Margin -** **简写属性** 为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。 所有边距属性的简写属性是 **margin** : **实例** `margin:100px 50px;` CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 **padding****（填充）** 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 ``` padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; ``` `padding:25px 50px;` ## **CSS** **分组** **和** **嵌套** **选择器** **分组选择器** 在样式表中有很多具有相同样式的元素。 `h1 { color:green; } h2 { color:green; } p { color:green; }` 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中，我们对以上代码使用分组选择器： **实例** `h1,h2,p { color:green; }` **嵌套选择器** 它可能适用于选择器内部的选择器的样式。 在下面的例子设置了四个样式： - **p{ }**: 为所有 **p** 元素指定一个样式。 - **.marked{ }**: 为所有 **class="marked"** 的元素指定一个样式。 - **.marked p{ }**: 为所有 **class="marked"** 元素内的 **p** 元素指定一个样式。 - **p.marked{ }**: 为所有 **class="marked"** 的 **p** 元素指定一个样式。 **实例** ``` p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; } ``` ## CSS 尺寸 (Dimension) | 属性 | 描述 | | :----------------------------------------------------------- | :------------------- | | [height](https://www.runoob.com/cssref/pr-dim-height.html) | 设置元素的高度。 | | [line-height](https://www.runoob.com/cssref/pr-dim-line-height.html) | 设置行高。 | | [max-height](https://www.runoob.com/cssref/pr-dim-max-height.html) | 设置元素的最大高度。 | | [max-width](https://www.runoob.com/cssref/pr-dim-max-width.html) | 设置元素的最大宽度。 | | [min-height](https://www.runoob.com/cssref/pr-dim-min-height.html) | 设置元素的最小高度。 | | [min-width](https://www.runoob.com/cssref/pr-dim-min-width.html) | 设置元素的最小宽度。 | | [width](https://www.runoob.com/cssref/pr-dim-width.html) | 设置元素的宽度。 | ## CSS Display(显示) 与 Visibility（可见性） **隐藏元素** **- display:none****或****visibility:hidden** 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 **实例** h1.hidden {visibility:hidden;} display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 **实例** `h1.hidden {display:none;}` **如何改变一个元素显示** 可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。 下面的示例把列表项显示为内联元素： **实例** `li {display:inline;}` `下面的示例把span元素作为块元素：` **实例** `span {display:block;}` **注意：**变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 ## CSS Display - 块和内联元素 块元素是一个元素，占用了全部宽度，在前后都是换行符。 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 块元素的例子： · \· \
）。 例如：`` 这种写法是不推荐的。 ## CSS Position定位 position 属性指定了元素的定位类型。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法。 **static** **定位** HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 **实例** `div.static { position: static; border: 3px solid #43941b; }` **fixed** **定位** 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： **实例** `p.pos_fixed { position:fixed; top:30px; right:5px; }` **注意：** Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 **relative** **定位** 相对定位元素的定位是相对其正常位置。 **实例** `h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }` 移动相对定位元素，但它原本所占的空间不会改变。 **实例** `h2.pos_top { position:relative; top:-50px; }` 相对定位元素经常被用来作为绝对定位元素的容器块。 **absolute** **定位** 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: **实例** `h2 { position:absolute; left:100px; top:150px; }` absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 **sticky** **定位** sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 **position: sticky;** 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 **position:relative** 与 **position:fixed** 定位之间切换。 它的行为就像 **position:relative;** 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 **注意:** Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 **实例** `div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }` **重叠的元素** 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序： **实例** `img { position:absolute; left:0px; top:0px; z-index:-1; }` 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 **注意：** 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。 1. static: 默认值，不脱离文档流。 2. relative: 不脱离文档流，位置相对于元素自己正常时的位置。 3. fixed: 脱离文档流，位置相对于浏览器窗口 。 4. absolute: 脱离文档流，位置相对于非static的父元素。如果没有则是\ 5. sticky: a. 显示没有超出页面的情况等于relative。b. 显示超出页面的情况等于fixed 总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。 定位高于浮动，浮动高于标准流。（高低和占不占位置无关） 最底层：标准流盒子（普通文档流） 中间层：浮动盒子（float） 最顶层：定位盒子（position不是static） 用法： 1、必须有定位。（除去static之外）。 2、给定 z-index 的值为层级的值。（不给默认为0） a. 层级为0的盒子，也比标准流和浮动高。 b. 层级为负数的盒子，比标准流和浮动低。 c. 层级不取小数） d. 层级一样，后面的盒子比前面的层级高。 e. 浮动或者标准流的盒子，后面的盒子比前面的层级高。 f. abselute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的 | 特性 | 文档流 | 层叠顺序 | | :------------------ | :--------- | :----------- | | **标准流** | 占位置 | 最低 | | **浮动** | 半脱离 | 中间 | | **定位(z-index负)** | 可占可不占 | 比标准流还低 | | **定位(z-index≥0)** | 可占可不占 | 最高 | 核心记忆点： 定位盒子天生比浮动和标准流高 z-index只在定位盒子里生效 占不占位置是布局问题，层级高低是遮盖问题 ## **CSS Overflow** CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 overflow属性有以下值： | **值** | **描述** | | ------- | -------------------------------------------------------- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 | **注意:**overflow 属性只工作于指定高度的块元素上。 **注意:** 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。 **overflow: visible** 默认情况下，overflow 的值为 visible， 意思是内容溢出元素框： **实例** `div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }` ## CSS Float(浮动) CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 **元素怎样浮动** 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边： **实例** `img { float:right; }` **彼此相邻的浮动元素** 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 在这里，我们对图片廊使用 float 属性： **实例** `.thumbnail { float:left; width:110px; height:90px; margin:5px; }` **清除浮动 - 使用 clear** 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊： **实例** `.text_line { clear:both; }` ## **CSS** **布局 - 水平 & 垂直对齐** **水平 & 垂直居中对齐** **元素居中对齐** 要水平居中对齐一个元素(如
元素** 在下面的例子中，选择器匹配作为任何元素的第一个子元素的 \
元素： **实例** `p:first-child { color:blue; }` **匹配所有\
元素中的第一个 \ 元素** 在下面的例子中，选择相匹配的所有\
元素的第一个 \ 元素： **实例** `p > i:first-child { color:blue; }` **匹配所有作为第一个子元素的 \
元素中的所有 \ 元素** 在下面的例子中，选择器匹配所有作为元素的第一个子元素的 \
元素中的所有 \ 元素： **实例** `p:first-child i { color:blue; }` **CSS - :lang** **伪类** :lang 伪类使你有能力为不同的语言定义特殊的规则 **注意：**IE8必须声明\才能支持;lang伪类。 在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型： **实例** `q:lang(no) {quotes: "~" "~";}` 选择器（Selector） - 单独的元素匹配器 是用来单独选中某个或某类元素的模式： 元素选择器：div、p、h1 类选择器：.box、.nav ID选择器：#header、#logo 属性选择器：[type="text"] 组合器（Combinator） - 元素之间的关系符号 是用来连接多个选择器，表示它们之间的关系： 空格（后代组合器）：div p（div里面的所有p） \>（子组合器）：div > p（div的直接子元素p） +（相邻兄弟组合器）：h1 + p（h1后面紧挨着的p） ~（通用兄弟组合器）：h1 ~ p（h1后面的所有p） 单词 = 简单选择器（div、p、.class、#id） 连词 = 组合器（空格、>、+、~） 完整句子 = 组合选择器（div p、div > p、h1 + p） ## CSS伪元素 CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。 CSS 伪元素是用来添加一些选择器的特殊效果。 常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。 | 版本 | 伪元素语法 | 举例 | 说明 | | :------------ | :------------ | :------------------------------------ | :----------------------- | | **CSS2/旧版** | 一个冒号 `:` | `:before`、`:after`、`:first-line` | 旧标准，兼容性好 | | **CSS3/新版** | 两个冒号 `::` | `::before`、`::after`、`::first-line` | 新标准，区分伪类和伪元素 | **语法** 伪元素的语法： ``` selector::pseudo-element { property: value; } ``` CSS 类也可以使用伪元素： ``` selector.class::pseudo-element { property: value; } ``` **:first-line** **伪元素** "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化： **实例** `p:first-line { color:#ff0000; font-variant:small-caps; }` **注意：**"first-line" 伪元素只能用于块级元素。 **注意：** 下面的属性可应用于 "first-line" 伪元素： - font properties - color properties - background properties - word-spacing - letter-spacing - text-decoration - vertical-align - text-transform - line-height - clear **:first-letter** **伪元素** "first-letter" 伪元素用于向文本的首字母设置特殊样式： **实例** `p:first-letter { color:#ff0000; font-size:xx-large; }` **注意：** "first-letter" 伪元素只能用于块级元素。 **注意：** 下面的属性可应用于 "first-letter" 伪元素： - font properties - color properties - background properties - margin properties - padding properties - border properties - text-decoration - vertical-align (only if "float" is "none") - text-transform - line-height - float - clear **伪元素和CSS类** 伪元素可以结合CSS类： `p.article:first-letter {color:#ff0000;}` `
文章段落
` 上面的例子会使所有 class 为 article 的段落的首字母变为红色。 **多个伪元素** 可以结合多个伪元素来使用。 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。 段落中的其余文本将以默认字体大小和颜色来显示： **实例** `p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }` **CSS - :before** **伪元素** ":before" 伪元素可以在元素的内容前面插入新内容。 下面的例子在每个 \