【css】css语法学习笔记

老舔狗 發表於 2022-2-3 02:10:00

<blockquote>
<p>学习网站以下内容均摘抄自该网站</p>
</blockquote>
<h1 id="css-介绍">CSS 介绍</h1>
<p>CSS 指层叠样式表 (<strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets)，样式定义如何显示 HTML 元素。</p>
<h1 id="css-语法">CSS 语法</h1>
<p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。</p>
<p>选择器通常是您需要改变样式的 HTML 元素。</p>
<p>每条声明由一个属性和一个值组成。</p>
<p>CSS注释以 <strong>/*</strong> 开始, 以 *<strong>/</strong> 结束。</p>
<pre><code class="language-css">/* 选择器 {属性1: 值1; 属性2: 值2;……} */
p {color:red;text-align:center;}
</code></pre>
<h1 id="css-选择器">CSS 选择器</h1>
<h2 id="id-选择器">id 选择器</h2>
<p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</p>
<p>HTML 元素以 id 属性来设置 id选择器,CSS 中 id 选择器以 "<mark>#</mark>" 来定义。</p>
<pre><code class="language-css">/*HTML文档中<p id="para1">Hello World!</p> */
#para1
{
text-align:center;
color:red;
}
</code></pre>
<h2 id="class-选择器">class 选择器</h2>
<p>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。</p>
<p>class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"<mark>.</mark>"号显示。</p>
<pre><code class="language-css">/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}
</code></pre>
<p>也可以指定特定的HTML元素使用class:</p>
<pre><code class="language-css">/*所有的 p 元素使用 class="center" 让该元素的文本居中*/
p.center {text-align:center;}
</code></pre>
<p>[注]id/class属性不要以数字开头，它无法在 Mozilla 或 Firefox 中起作用。</p>
<h1 id="css-分组和嵌套">CSS 分组和嵌套</h1>
<h2 id="分组选择器">分组选择器</h2>
<p>在样式表中有很多具有相同样式的元素。</p>
<pre><code class="language-css">h1 {
color: green;
}
h2 {
color: green;
}
p {
color: green;
}
</code></pre>
<p>为了尽量减少代码，你可以使用分组选择器。</p>
<p>每个选择器用逗号分隔。</p>
<p>在下面的例子中，我们对以上代码使用分组选择器：</p>
<pre><code class="language-css">h1,h2,p {
color: green;
}
</code></pre>
<h2 id="嵌套选择器">嵌套选择器</h2>
<p>可能适用于选择器内部的选择器的样式。</p>
<p>在下面的例子设置了四个样式：</p>
<ul>
<li><strong>p{ }</strong>: 为所有 <strong>p</strong> 元素指定一个样式。</li>
<li><strong>.marked{ }</strong>: 为所有 <strong>class="marked"</strong> 的元素指定一个样式。</li>
<li><strong>.marked p{ }</strong>: 为所有 <strong>class="marked"</strong> 元素内的 <strong>p</strong> 元素指定一个样式。</li>
<li><strong>p.marked{ }</strong>: 为所有 <strong>class="marked"</strong> 的 <strong>p</strong> 元素指定一个样式。</li>
<li><strong>p#marked{}: <strong>为</strong>id="marked"</strong> 的 <strong>p</strong> 元素指定一个样式。</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

<p class="marked">带下划线的 p 段落。</p>
</body>
</html>
</code></pre>
<h1 id="css-组合选择符">CSS 组合选择符</h1>
<p>CSS组合选择符包括各种简单选择符的组合方式。</p>
<p>在 CSS3 中包含了四种组合方式:</p>
<ul>
<li>后代选择器(以空格分隔)：用于选取某元素的所有该后代元素。</li>
</ul>
<pre><code class="language-css">/* 选取 <div> 元素中所有的 <p>元素 */
div p {background-color: yellow;}
</code></pre>
<ul>
<li>子元素选择器(以大于 <strong>></strong> 号分隔)：只能选择作为某元素直接/一级子元素的元素。</li>
</ul>
<pre><code class="language-css">/* 选择了<div>元素中所有直接子元素 <p> */
div>p {background-color: yellow;}
</code></pre>
<ul>
<li>相邻兄弟选择器(以加号 <strong>+</strong> 分隔)：选择紧接在另一个元素后的元素，而且二者有相同的父元素。</li>
</ul>
<pre><code class="language-css">/* 选取了位于所有 <div> 元素后的第一个 <p> 元素: */
div+p {background-color: yellow;}
</code></pre>
<ul>
<li>后继兄弟选择器(以波浪号 <strong>～</strong> 分隔)：选取所有指定元素之后的相邻兄弟元素，且二者有相同父元素。</li>
</ul>
<pre><code class="language-css">/* 选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> */
div~p{background-color: yellow;}
</code></pre>
<h1 id="css-属性选择器">CSS 属性选择器</h1>
<h2 id="css-属性选择器------的区别">CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别:</h2>
<p><strong>"value 是完整单词"</strong> 类型的比较符号: <strong>~=</strong>, <strong>|=</strong></p>
<p><strong>"拼接字符串</strong>" 类型的比较符号: *<strong>=</strong>, <strong>^=</strong>, <strong>$=</strong></p>
<p><strong>1.attribute 属性中包含 value:</strong>　</p>
<p> 属性中包含独立的单词为 value，例如：</p>
<pre><code class="language-css">--><img src="/i/eg_tulip.jpg" title="tulip flower" />
</code></pre>
<p> 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：</p>
<pre><code class="language-css"> --><img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
</code></pre>
<p><strong>2.attribute 属性以 value 开头:</strong></p>
<p> 属性中必须是完整且唯一的单词，或者以 <strong>-</strong> 分隔开：，例如：</p>
<pre><code class="language-css"> --><p lang="en"><p lang="en-us">
</code></pre>
<p> 属性的前几个字母是 value 就可以，例如：</p>
<pre><code class="language-css"> --><p lang="ennn">
</code></pre>
<p><strong>3.attribute 属性以 value 结尾:</strong></p>
<pre><code class="language-css"> 属性的后几个字母是 value 就可以，例如：
a --> <a href="example.pdf"></a>
</code></pre>
<h2 id="表单样式">表单样式</h2>
<pre><code class="language-css">/*
<form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20"/>
Lastname:<input type="text" name="lname" value="Griffin" size="20"/>
<input type="button" value="Example Button"/>
</form>
*/
input {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input {
width: 120px;
margin-left: 35px;
display: block;
}
</code></pre>
<h1 id="css-背景background">CSS 背景(background)</h1>
<ul>
<li><strong>background-color</strong> 背景颜色</li>
</ul>
<pre><code class="language-css">body {background-color:#b0c4de;}
</code></pre>
<ul>
<li>背景图像 <strong>background-image</strong> (默认情况下，background-image放置在元素的左上角，并重复平铺垂直和水平方向)</li>
</ul>
<pre><code class="language-css">body {background-image:url('paper.gif');}
</code></pre>
<ul>
<li><strong>background-position</strong> 设置背景图像的起始位置</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">left top/left center/left bottom/right top/right center/right bottom/center top/center center/ center bottom</td>
<td style="text-align: left">如果仅指定一个关键字，其他值将会是"center"</td>
</tr>
<tr>
<td style="text-align: left">x% y%</td>
<td style="text-align: left">第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％</td>
</tr>
<tr>
<td style="text-align: left">xpos ypos</td>
<td style="text-align: left">第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">指定background-position属性设置应该从父元素继承</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</code></pre>
<ul>
<li><strong>background-repeat</strong> 设置背景图像是否及如何重复(默认情况下，重复background-image的垂直和水平方向)</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">repeat</td>
<td style="text-align: left">背景图像将向垂直和水平方向重复。这是默认</td>
</tr>
<tr>
<td style="text-align: left">repeat-x</td>
<td style="text-align: left">只有水平位置会重复背景图像</td>
</tr>
<tr>
<td style="text-align: left">repeat-y</td>
<td style="text-align: left">只有垂直位置会重复背景图像</td>
</tr>
<tr>
<td style="text-align: left">no-repeat</td>
<td style="text-align: left">background-image 不会重复</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">指定 background-repeat 属性设置应该从父元素继承</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>background-attachment</strong> 背景图像是否固定或者随着页面的其余部分滚动</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">scroll</td>
<td style="text-align: left">背景图片随着页面的滚动而滚动，这是默认的。</td>
</tr>
<tr>
<td style="text-align: left">fixed</td>
<td style="text-align: left">背景图片不会随着页面的滚动而滚动。</td>
</tr>
<tr>
<td style="text-align: left">local</td>
<td style="text-align: left">背景图片会随着元素内容的滚动而滚动。</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">设置该属性的默认值。阅读关于 <em>initial</em> 内容</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">指定 background-attachment 的设置应该从父元素继承。阅读关于 <em>inherit</em> 内容</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>background</strong> 背景缩写属性可以在一个声明中设置所有的背景属性。各值之间用空格分隔，不分先后顺序。可以只有其中的某些值。</li>
</ul>
<pre><code class="language-css">body {background: #00ff00 url('smiley.gif') no-repeat fixed center;}
</code></pre>
<h1 id="css-text">CSS Text</h1>
<ul>
<li><strong>color</strong> 设置文本颜色</li>
</ul>
<pre><code class="language-css">h1 {color: #00ff00;}
</code></pre>
<ul>
<li><strong>direction</strong> 设置文本方向</li>
</ul>
<pre><code class="language-css">div{
direction: rtl;
/*unicode-bidi 属性与 direction 属性一起使用，设置或返回是否应重写文本以支持同一文档中的多种语言*/
unicode-bidi: bidi-override;
}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">ltr</td>
<td style="text-align: left">默认。文本方向从左到右。</td>
</tr>
<tr>
<td style="text-align: left">rtl</td>
<td style="text-align: left">文本方向从右到左。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 direction 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>letter-spacing</strong> 设置字符间距</li>
</ul>
<pre><code class="language-css">h1 {letter-spacing: 2px}
h2 {letter-spacing: -3px}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认。规定字符间没有额外的空间。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">定义字符间的固定空间（允许使用负值）。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 letter-spacing 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>line-height</strong> 设置行高</li>
</ul>
<pre><code class="language-css">p.small {line-height: 90%}
p.big {line-height: 200%}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认。设置合理的行间距。</td>
</tr>
<tr>
<td style="text-align: left"><em>number</em></td>
<td style="text-align: left">设置数字，此数字会与当前的字体尺寸相乘来设置行间距。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">设置固定的行间距。</td>
</tr>
<tr>
<td style="text-align: left"><em>%</em></td>
<td style="text-align: left">基于当前字体尺寸的百分比行间距。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 line-height 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>text-align</strong> 对齐元素中的文本</li>
</ul>
<p>如果 direction 属性是 ltr，则默认值为 left；如果 direction 属性是 rtl，则默认值为 right。</p>
<pre><code class="language-css">h1 {text-align: center;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">把文本排列到左边。默认值：由浏览器决定。</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">把文本排列到右边。</td>
</tr>
<tr>
<td style="text-align: left">center</td>
<td style="text-align: left">把文本排列到中间。</td>
</tr>
<tr>
<td style="text-align: left">justify</td>
<td style="text-align: left">实现两端对齐文本效果。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 text-align 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>text-decoration</strong> 向文本添加修饰</li>
</ul>
<p>text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。</p>
<p>text-decoration 属性是以下三种属性的简写：</p>
<ul>
<li>text-decoration-line</li>
<li>text-decoration-color</li>
<li>text-decoration-style</li>
</ul>
<pre><code class="language-css">text-decoration: underline wavy red;    /*红色波浪形下划线*/
</code></pre>
<p>从设计的角度看 text-decoration属性主要是用来删除链接的下划线，不建议强调指出不是链接的文本，因为这常常混淆用户。</p>
<pre><code class="language-css">a {text-decoration: none;}
</code></pre>
<ul>
<li><strong>text-indent</strong> 缩进元素中文本的首行</li>
</ul>
<pre><code class="language-css">p {text-indent: 50px;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">定义固定的缩进。默认值：0。</td>
</tr>
<tr>
<td style="text-align: left"><em>%</em></td>
<td style="text-align: left">定义基于父元素宽度的百分比的缩进。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 text-indent 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>text-shadow</strong> 设置文本阴影</li>
</ul>
<pre><code class="language-css">/*白色的文本文字阴影*/
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>h-shadow</em></td>
<td style="text-align: left">必需。水平阴影的位置。允许负值。</td>
</tr>
<tr>
<td style="text-align: left"><em>v-shadow</em></td>
<td style="text-align: left">必需。垂直阴影的位置。允许负值。</td>
</tr>
<tr>
<td style="text-align: left"><em>blur</em></td>
<td style="text-align: left">可选。模糊的距离。</td>
</tr>
<tr>
<td style="text-align: left"><em>color</em></td>
<td style="text-align: left">可选。阴影的颜色。参阅 CSS 颜色值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>text-transform</strong> 控制元素中的字母</li>
</ul>
<pre><code class="language-css">h1 {text-transform: uppercase;}
h2 {text-transform: capitalize;}
p {text-transform: lowercase;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认。定义带有小写字母和大写字母的标准的文本。</td>
</tr>
<tr>
<td style="text-align: left">capitalize</td>
<td style="text-align: left">文本中的每个单词以大写字母开头。</td>
</tr>
<tr>
<td style="text-align: left">uppercase</td>
<td style="text-align: left">定义仅有大写字母。</td>
</tr>
<tr>
<td style="text-align: left">lowercase</td>
<td style="text-align: left">定义无大写字母，仅有小写字母。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 text-transform 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>vertical-align</strong> 设置元素的垂直对齐</li>
</ul>
<pre><code class="language-css"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p>
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">baseline</td>
<td style="text-align: left">默认。元素放置在父元素的基线上。</td>
</tr>
<tr>
<td style="text-align: left">sub</td>
<td style="text-align: left">垂直对齐文本的下标。</td>
</tr>
<tr>
<td style="text-align: left">super</td>
<td style="text-align: left">垂直对齐文本的上标</td>
</tr>
<tr>
<td style="text-align: left">top</td>
<td style="text-align: left">把元素的顶端与行中最高元素的顶端对齐</td>
</tr>
<tr>
<td style="text-align: left">text-top</td>
<td style="text-align: left">把元素的顶端与父元素字体的顶端对齐</td>
</tr>
<tr>
<td style="text-align: left">middle</td>
<td style="text-align: left">把此元素放置在父元素的中部。</td>
</tr>
<tr>
<td style="text-align: left">bottom</td>
<td style="text-align: left">使元素及其后代元素的底部与整行的底部对齐。</td>
</tr>
<tr>
<td style="text-align: left">text-bottom</td>
<td style="text-align: left">把元素的底端与父元素字体的底端对齐。</td>
</tr>
<tr>
<td style="text-align: left">length</td>
<td style="text-align: left">将元素升高或降低指定的高度，可以是负数。</td>
</tr>
<tr>
<td style="text-align: left">%</td>
<td style="text-align: left">使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 vertical-align 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>white-space</strong> 设置元素中空白的处理方式</li>
</ul>
<pre><code class="language-css">p {white-space: nowrap;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认。空白会被浏览器忽略。</td>
</tr>
<tr>
<td style="text-align: left">pre</td>
<td style="text-align: left">空白会被浏览器保留。其行为方式类似 HTML 中的 <code><pre></code> 标签。</td>
</tr>
<tr>
<td style="text-align: left">nowrap</td>
<td style="text-align: left">文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
<td style="text-align: left">pre-wrap</td>
<td style="text-align: left">保留空白符序列，但是正常地进行换行。</td>
</tr>
<tr>
<td style="text-align: left">pre-line</td>
<td style="text-align: left">合并空白符序列，但是保留换行符。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 white-space 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>word-spacing</strong> 设置字间距</li>
</ul>
<p>汉字的间隔调节是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。</p>
<pre><code class="language-css">p {word-spacing: 30px;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认。定义单词间的标准空间。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">定义单词间的固定空间。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 word-spacing 属性的值。</td>
</tr>
</tbody>
</table>
<h1 id="css-fonts">CSS Fonts</h1>
<p>CSS字体属性定义字体，加粗，大小，文字样式。</p>
<ul>
<li>
<p><strong>font-family</strong> 属性设置文本的字体系列。</p>
<p>font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。</p>
</li>
</ul>
<pre><code class="language-css">p {font-family: "Times New Roman", Times, serif;}
</code></pre>
<p> 较常用的字体组合 Web安全字体组合。</p>
<ul>
<li><strong>font-style</strong> 设置字体样式</li>
</ul>
<pre><code class="language-css">p {font-style: italic}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认值。浏览器显示一个标准的字体样式。</td>
</tr>
<tr>
<td style="text-align: left">italic</td>
<td style="text-align: left">浏览器会显示一个斜体的字体样式。</td>
</tr>
<tr>
<td style="text-align: left">oblique</td>
<td style="text-align: left">浏览器会显示一个倾斜的字体样式。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承字体样式。</td>
</tr>
</tbody>
</table>
<p>并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了。这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！</p>
<ul>
<li><strong>font-size</strong> 设置文字的大小与像素</li>
</ul>
<pre><code class="language-css">p {font-size:14px;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">xx-small/ x-small/ small/ medium/ large/ x-large/ xx-large</td>
<td style="text-align: left">把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。</td>
</tr>
<tr>
<td style="text-align: left">smaller</td>
<td style="text-align: left">把 font-size 设置为比父元素更小的尺寸。</td>
</tr>
<tr>
<td style="text-align: left">larger</td>
<td style="text-align: left">把 font-size 设置为比父元素更大的尺寸。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">把 font-size 设置为一个固定的值。</td>
</tr>
<tr>
<td style="text-align: left"><em>%</em></td>
<td style="text-align: left">把 font-size 设置为基于父元素的一个百分比值。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承字体尺寸。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>font-weight</strong> 属性设置文本的粗细</li>
</ul>
<pre><code class="language-css">p {font-weight:lighter;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认值。定义标准的字符。</td>
</tr>
<tr>
<td style="text-align: left">bold</td>
<td style="text-align: left">定义粗体字符。</td>
</tr>
<tr>
<td style="text-align: left">bolder</td>
<td style="text-align: left">定义更粗的字符。</td>
</tr>
<tr>
<td style="text-align: left">lighter</td>
<td style="text-align: left">定义更细的字符。</td>
</tr>
<tr>
<td style="text-align: left">100/200/300/400/500/600/700/800/900</td>
<td style="text-align: left">定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承字体的粗细。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>font-variant</strong> 属性主要用于定义小型大写字母文本</li>
</ul>
<pre><code class="language-css">p {font-variant: small-caps;}
</code></pre>
<ul>
<li><strong>font</strong> 简写属性在一个声明中设置所有字体属性</li>
</ul>
<p>可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"</p>
<p>font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。</p>
<pre><code class="language-css">p {font: italic bold 12px/30px Georgia,serif;}
</code></pre>
<h1 id="css-链接">CSS 链接</h1>
<p>不同的链接可以有不同的样式:</p>
<pre><code class="language-css">a:link {color:#000000;}    /* 未访问链接*/
a:visited {color:#00FF00;}/* 已访问链接 */
a:hover {color:#FF00FF;}/* 鼠标移动到链接上 */
a:active {color:#0000FF;}/* 鼠标点击时 */
</code></pre>
<p>链接的样式，可以用任何CSS属性（如颜色 color，字体 text，背景 background等）。</p>
<pre><code class="language-css"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

</html>
</code></pre>
<p><strong>注意：</strong> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><strong>注意：</strong> a:active 必须在 a:hover 之后。</p>
<h1 id="css-列表">CSS 列表</h1>
<ul>
<li><strong>list-style-type</strong> 设置列表项标志的类型</li>
</ul>
<p>"disc" for <code><ul></code> and "decimal" for <code><ol></code></p>
<pre><code class="language-css">ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">无标记。</td>
</tr>
<tr>
<td style="text-align: left">disc</td>
<td style="text-align: left">默认。标记是实心圆。</td>
</tr>
<tr>
<td style="text-align: left">circle</td>
<td style="text-align: left">标记是空心圆。</td>
</tr>
<tr>
<td style="text-align: left">square</td>
<td style="text-align: left">标记是实心方块。</td>
</tr>
<tr>
<td style="text-align: left">decimal</td>
<td style="text-align: left">标记是数字。</td>
</tr>
<tr>
<td style="text-align: left">decimal-leading-zero</td>
<td style="text-align: left">0开头的数字标记。(01, 02, 03, 等。)</td>
</tr>
<tr>
<td style="text-align: left">lower-roman</td>
<td style="text-align: left">小写罗马数字(i, ii, iii, iv, v, 等。)</td>
</tr>
<tr>
<td style="text-align: left">upper-roman</td>
<td style="text-align: left">大写罗马数字(I, II, III, IV, V, 等。)</td>
</tr>
<tr>
<td style="text-align: left">lower-alpha</td>
<td style="text-align: left">小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</td>
</tr>
<tr>
<td style="text-align: left">upper-alpha</td>
<td style="text-align: left">大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</td>
</tr>
<tr>
<td style="text-align: left">lower-greek</td>
<td style="text-align: left">小写希腊字母(alpha, beta, gamma, 等。)</td>
</tr>
<tr>
<td style="text-align: left">lower-latin</td>
<td style="text-align: left">小写拉丁字母(a, b, c, d, e, 等。)</td>
</tr>
<tr>
<td style="text-align: left">upper-latin</td>
<td style="text-align: left">大写拉丁字母(A, B, C, D, E, 等。)</td>
</tr>
<tr>
<td style="text-align: left">hebrew</td>
<td style="text-align: left">传统的希伯来编号方式</td>
</tr>
<tr>
<td style="text-align: left">armenian</td>
<td style="text-align: left">传统的亚美尼亚编号方式</td>
</tr>
<tr>
<td style="text-align: left">georgian</td>
<td style="text-align: left">传统的乔治亚编号方式(an, ban, gan, 等。)</td>
</tr>
<tr>
<td style="text-align: left">cjk-ideographic</td>
<td style="text-align: left">简单的表意数字</td>
</tr>
<tr>
<td style="text-align: left">hiragana</td>
<td style="text-align: left">标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）</td>
</tr>
<tr>
<td style="text-align: left">katakana</td>
<td style="text-align: left">标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）</td>
</tr>
<tr>
<td style="text-align: left">hiragana-iroha</td>
<td style="text-align: left">标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）</td>
</tr>
<tr>
<td style="text-align: left">katakana-iroha</td>
<td style="text-align: left">标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>list-style-position</strong> 设置列表中列表项标志的位置</li>
</ul>
<pre><code class="language-css">ul {list-style-position: inside;}
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2024073/202201/2024073-20220129151933707-1686269682.png" alt="image-20220129151932413" loading="lazy"></p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">inside</td>
<td style="text-align: left">列表项目标记放置在文本以内，且环绕文本根据标记对齐。</td>
</tr>
<tr>
<td style="text-align: left">outside</td>
<td style="text-align: left">默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 list-style-position 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>list-style-image</strong> 将图像设置为列表项标志</li>
</ul>
<pre><code class="language-css">ul {list-style-image: url('sqpurple.gif');}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>URL</em></td>
<td style="text-align: left">图像的路径。</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认。无图形被显示。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 list-style-image 属性的值。</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>list-style 简写属性在一个声明中设置所有的列表属性。</p>
<p>可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image。</p>
<p>可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。</p>
</li>
<li>
<p>移除默认设置</p>
</li>
</ul>
<p>list-style-type:none 属性可以用于移除小标记。默认情况下列表 <code><ul></code> 或 <code><ol></code> 还设置了内边距和外边距，可使用 <code>margin:0</code> 和 <code>padding:0</code> 来移除:</p>
<pre><code class="language-css">ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</code></pre>
<h1 id="css-表格">CSS 表格</h1>
<ul>
<li>表格边框 <strong>border</strong></li>
</ul>
<pre><code class="language-css">table, th, td {border: 1px solid black;}
</code></pre>
<p>在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。</p>
<p>为了显示一个表的单个边框，使用 border-collapse属性。</p>
<pre><code class="language-css">table {border-collapse:collapse;}
table,th, td {border: 1px solid black;}
</code></pre>
<ul>
<li><strong>width</strong>和<strong>height</strong>属性定义表格的宽度和高度。</li>
</ul>
<pre><code class="language-css">table {width:100%;}
th {height:50px;}
</code></pre>
<ul>
<li>
<p><strong>text-align</strong>属性设置水平对齐方式，向左(left)，右(right)，或中心(center);</p>
<p><strong>vertical-align</strong>属性设置垂直对齐，比如顶部(top)，底部(bottom)或中间(center);</p>
</li>
</ul>
<pre><code class="language-css">td {
height:50px;
text-align: right;
vertical-align: bottom;
}
</code></pre>
<ul>
<li><strong>padding</strong>控制边框和表格内容之间的间距</li>
</ul>
<pre><code class="language-css">td {padding: 3px 7px 2px 7px;}
</code></pre>
<ul>
<li>表格颜色</li>
</ul>
<p>下面的例子指定边框的颜色，和th元素的文本和背景颜色：</p>
<pre><code class="language-css">table, td, th {border:1px solid green;}
th {
background-color: green;
color: white;
}
</code></pre>
<ul>
<li><strong>caption-side</strong> 设置标题位置</li>
</ul>
<pre><code class="language-css">caption {caption-side:bottom;}
</code></pre>
<h1 id="css-盒子模型">CSS 盒子模型</h1>
<p>所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。</p>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<p>盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。</p>
<p>下面的图片说明了盒子模型(Box Model)：</p>
<img src="https://img2022.cnblogs.com/blog/2024073/202201/2024073-20220129155748789-1451211810.png" alt="image-20220129155747602" style="zoom: 67%">
<p>不同部分的说明：</p>
<ul>
<li><strong>Margin(外边距)</strong> - 清除边框外的区域，外边距是透明的。</li>
<li><strong>Border(边框)</strong> - 围绕在内边距和内容外的边框。</li>
<li><strong>Padding(内边距)</strong> - 清除内容周围的区域，内边距是透明的。</li>
<li><strong>Content(内容)</strong> - 盒子的内容，显示文本和图像。</li>
</ul>
<p>最终元素的总宽度计算公式是这样的：</p>
<p>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</p>
<p>元素的总高度最终计算公式是这样的：</p>
<p>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</p>
<h1 id="css-边框border">CSS 边框(border)</h1>
<p>CSS边框属性允许你指定一个元素边框的样式和颜色。</p>
<ul>
<li><strong>border-style</strong> 属性用来定义边框的样式</li>
</ul>
<pre><code class="language-css"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>
</code></pre>
<img src="https://img2022.cnblogs.com/blog/2024073/202201/2024073-20220129165904494-1387304245.png" alt="image-20220129165903363" style="zoom: 80%">
<ul>
<li><strong>border-width</strong> 属性为边框指定宽度。</li>
</ul>
<p>"border-width" 属性如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
<p>为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。</p>
<pre><code class="language-css">p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:solid;
border-width:medium;
}
</code></pre>
<ul>
<li><strong>border-color</strong> 属性用于设置边框的颜色。</li>
</ul>
<p>border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。</p>
<pre><code class="language-css">p {
border-style:solid;
border-color:red;
}
</code></pre>
<ul>
<li>在CSS中，可以指定不同的侧面不同的边框：</li>
</ul>
<pre><code class="language-css">p {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</code></pre>
<p>上面的例子也可以设置一个单一属性border-style，可以有1-4个值：</p>
<ul>
<li>border-style:dotted solid double dashed;
<ul>
<li>上边框是 dotted</li>
<li>右边框是 solid</li>
<li>底边框是 double</li>
<li>左边框是 dashed</li>
</ul>
</li>
<li>border-style:dotted solid double;
<ul>
<li>上边框是 dotted</li>
<li>左、右边框是 solid</li>
<li>底边框是 double</li>
</ul>
</li>
<li>border-style:dotted solid;
<ul>
<li>上、底边框是 dotted</li>
<li>右、左边框是 solid</li>
</ul>
</li>
<li>border-style:dotted;
<ul>
<li>四面边框是 dotted</li>
</ul>
</li>
</ul>
<p>边框颜色、边框宽度也可以和边框样式一样单独为4个边设置。遵循的规则也一样。</p>
<pre><code class="language-css">p {
border-left-style: solid;
border-left-width: 15px;
}
</code></pre>
<ul>
<li><strong>border</strong> 简写属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width, border-style,和border-color。</li>
</ul>
<p>还有<strong>border-left</strong>、<strong>border-right</strong> 、<strong>border-top</strong> 、<strong>border-bottom</strong> 四个简写属性</p>
<h1 id="css-轮廓outline">CSS 轮廓(outline)</h1>
<p>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p>
<p>outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。</p>
<ul>
<li><strong>outline-style</strong> 设置轮廓的样式</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认。定义无轮廓。</td>
</tr>
<tr>
<td style="text-align: left">dotted</td>
<td style="text-align: left">定义点状的轮廓。</td>
</tr>
<tr>
<td style="text-align: left">dashed</td>
<td style="text-align: left">定义虚线轮廓。</td>
</tr>
<tr>
<td style="text-align: left">solid</td>
<td style="text-align: left">定义实线轮廓。</td>
</tr>
<tr>
<td style="text-align: left">double</td>
<td style="text-align: left">定义双线轮廓。双线的宽度等同于 outline-width 的值。</td>
</tr>
<tr>
<td style="text-align: left">groove</td>
<td style="text-align: left">定义 3D 凹槽轮廓。此效果取决于 outline-color 值。</td>
</tr>
<tr>
<td style="text-align: left">ridge</td>
<td style="text-align: left">定义 3D 凸槽轮廓。此效果取决于 outline-color 值。</td>
</tr>
<tr>
<td style="text-align: left">inset</td>
<td style="text-align: left">定义 3D 凹边轮廓。此效果取决于 outline-color 值。</td>
</tr>
<tr>
<td style="text-align: left">outset</td>
<td style="text-align: left">定义 3D 凸边轮廓。此效果取决于 outline-color 值。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承轮廓样式的设置。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>outline-width</strong> 指定轮廓的宽度。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">thin</td>
<td style="text-align: left">规定细轮廓。</td>
</tr>
<tr>
<td style="text-align: left">medium</td>
<td style="text-align: left">默认。规定中等的轮廓。</td>
</tr>
<tr>
<td style="text-align: left">thick</td>
<td style="text-align: left">规定粗的轮廓。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">允许您规定轮廓粗细的值。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承轮廓宽度的设置。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>outline-color</strong> 属性指定轮廓颜色。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>color</em></td>
<td style="text-align: left">指定轮廓颜色。在 CSS颜色值寻找颜色值的完整列表。</td>
</tr>
<tr>
<td style="text-align: left">invert</td>
<td style="text-align: left">默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承轮廓颜色的设置。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">p {
outline-style: dotted;
outline-width: thick;
outline-color: #00ff00;
}
</code></pre>
<ul>
<li><strong>outline</strong> 简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width</li>
</ul>
<h1 id="css-外边距magin">CSS 外边距(magin)</h1>
<p>CSS margin(外边距)属性定义元素周围的空间。</p>
<p>margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。</p>
<p>margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。</p>
<pre><code class="language-css">p {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</code></pre>
<p><strong>margin</strong> 属性可以有一到四个值。</p>
<ul>
<li>margin:25px 50px 75px 100px;
<ul>
<li>上边距为25px</li>
<li>右边距为50px</li>
<li>下边距为75px</li>
<li>左边距为100px</li>
</ul>
</li>
<li>margin:25px 50px 75px;
<ul>
<li>上边距为25px</li>
<li>左右边距为50px</li>
<li>下边距为75px</li>
</ul>
</li>
<li>margin:25px 50px;
<ul>
<li>上下边距为25px</li>
<li>左右边距为50px</li>
</ul>
</li>
<li>margin:25px;
<ul>
<li>所有的4个边距都是25px</li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">设置浏览器边距。这样做的结果会依赖于浏览器</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">定义一个固定的margin（使用像素，pt，em等）</td>
</tr>
<tr>
<td style="text-align: left"><em>%</em></td>
<td style="text-align: left">定义一个使用百分比的边距</td>
</tr>
</tbody>
</table>
<p>Margin可以使用负值，重叠的内容。</p>
<h1 id="css-填充padding">CSS 填充(padding)</h1>
<p>padding 定义元素边框与元素内容之间的空间，即上下左右的内边距。</p>
<pre><code class="language-CSS">p {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</code></pre>
<p><strong>padding</strong> 简写属性规则和 margin 一样。</p>
<h1 id="css-尺寸-dimension">CSS 尺寸 (dimension)</h1>
<p>CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">设置元素的高度。</td>
</tr>
<tr>
<td style="text-align: left">line-height</td>
<td style="text-align: left">设置行高。</td>
</tr>
<tr>
<td style="text-align: left">max-height</td>
<td style="text-align: left">设置元素的最大高度。</td>
</tr>
<tr>
<td style="text-align: left">max-width</td>
<td style="text-align: left">设置元素的最大宽度。</td>
</tr>
<tr>
<td style="text-align: left">min-height</td>
<td style="text-align: left">设置元素的最小高度。</td>
</tr>
<tr>
<td style="text-align: left">min-width</td>
<td style="text-align: left">设置元素的最小宽度。</td>
</tr>
<tr>
<td style="text-align: left">width</td>
<td style="text-align: left">设置元素的宽度。</td>
</tr>
</tbody>
</table>
<h1 id="css-显示display与可见性visibility">CSS 显示(display)与可见性(visibility）</h1>
<p>display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。</p>
<h2 id="隐藏元素---displaynone或visibilityhidden">隐藏元素 - display:none或visibility:hidden</h2>
<p>隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。</p>
<p>visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p>
<p>display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。</p>
<h2 id="内联元素块元素">内联元素<——>块元素</h2>
<p>主要用的CSS样式有以下三个：</p>
<ul>
<li><strong>display:block</strong> -- 显示为块级元素</li>
<li><strong>display:inline</strong> -- 显示为内联元素</li>
<li><strong>display:inline-block</strong> -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性(普通的内联元素不能修改宽高内外边距等)</li>
</ul>
<p>我们常将所有<code><li></code>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。</p>
<p>下面的示例把列表项显示为内联元素：</p>
<pre><code class="language-css">li {display:inline;}
</code></pre>
<p>下面的示例把span元素作为块元素：</p>
<pre><code class="language-css">span {display:block;}
</code></pre>
<h2 id="visibility-collapse"><strong>visibility: collapse</strong></h2>
<p>对于 CSS 里的 <strong>visibility</strong> 属性，通常其值被设置成 <strong>visible</strong> 或 <strong>hidden</strong>。</p>
<p><strong>visibility: hidden</strong> 相当于 <strong>display:none</strong>，能把元素隐藏起来，但两者的区别在于：</p>
<ul>
<li>1、<strong>display:none</strong> 元素不再占用空间。</li>
<li>2、<strong>visibility: hidden</strong> 使元素在网页上不可见，但仍占用空间。</li>
</ul>
<p>然而，visibility 还可能取值为 collapse 。</p>
<p>当设置元素 <strong>visibility: collapse</strong> 后，一般的元素的表现与 <strong>visibility: hidden</strong> 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 <strong>display: none</strong> 一样，也即其占用的空间会释放。</p>
<h1 id="css-定位position">CSS 定位(position)</h1>
<p>position 属性指定了元素的定位类型。</p>
<p>元素可以使用的顶部(top)，底部(bottom)，左侧(left)和右侧(right)属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。</p>
<ul>
<li>
<p><strong>position</strong> 属性的五个值：</p>
<ul>
<li>
<p>static: HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。</p>
</li>
<li>
<p>fixed: 元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。</p>
</li>
<li>
<p>relative: 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。</p>
</li>
<li>
<p>absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<code><html></code>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。</p>
</li>
<li>
<p>sticky: 粘性定位，粘性定位的元素是依赖于用户的滚动，在 <strong>position:relative</strong> 与 <strong>position:fixed</strong> 定位之间切换。</p>
<p>元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</p>
</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.sticky {
position: -webkit-sticky;/* Safari */
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>

</body>
</html>
</code></pre>
<ul>
<li><strong>z-index</strong> 设置元素的堆叠顺序:具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
background-color:red;
width:100%;
height:100px;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<div></div>
<p>因为div元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
</code></pre>
<ul>
<li><strong>clip</strong> 剪辑一个绝对定位的元素</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>shape</em></td>
<td style="text-align: left">设置元素的形状。唯一合法的形状值是：rect (<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>)</td>
</tr>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">默认值。不应用任何剪裁。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 clip 属性的值。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</code></pre>
<p>如果先有"overflow：visible"，clip属性不起作用。</p>
<h1 id="css-溢出overflow">CSS 溢出(overflow)</h1>
<p>overflow 属性用于控制内容溢出元素框时显示的方式，可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">visible</td>
<td style="text-align: left">默认值。内容不会被修剪，会呈现在元素框之外。</td>
</tr>
<tr>
<td style="text-align: left">hidden</td>
<td style="text-align: left">内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td style="text-align: left">scroll</td>
<td style="text-align: left">内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 overflow 属性的值。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">div {
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
</code></pre>
<p><strong>注意:</strong>overflow 属性只工作于指定高度的块元素上。</p>
<p>overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域。</p>
<p>overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域。</p>
<h1 id="css-浮动float">CSS 浮动(float)</h1>
<p><strong>float</strong>会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。</p>
<p>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</p>
<p>浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。</p>
<p>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。</p>
<pre><code class="language-css">img {float:right;}
</code></pre>
<p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 <strong>clear</strong> 属性。clear 属性指定元素两侧不能出现浮动元素。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">元素向左浮动。</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">元素向右浮动。</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值。元素不浮动，并会显示在其在文本中出现的位置。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 float 属性的值。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.text_line {clear:both;}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">在左侧不允许浮动元素。</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">在右侧不允许浮动元素。</td>
</tr>
<tr>
<td style="text-align: left">both</td>
<td style="text-align: left">在左右两侧均不允许浮动元素。</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值。允许浮动元素出现在两侧。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 clear 属性的值。</td>
</tr>
</tbody>
</table>
<p>使用 float 创建一个网页页眉、页脚、左边的内容和主要内容:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
<div class="column sidemenu">
<ul>
   <li><a href="#flight">The Flight</a></li>
   <li><a href="#city" class="active">The City</a></li>
   <li><a href="#island">The Island</a></li>
   <li><a href="#food">The Food</a></li>
   <li><a href="#people">The People</a></li>
   <li><a href="#history">The History</a></li>
   <li><a href="#oceans">The Oceans</a></li>
</ul>
</div>

<div class="column content">
<div class="header">
   <h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>

<div class="footer">
<p>底部文本</p>
</div>

</body>
</html>
</code></pre>
<h1 id="css-对齐">CSS 对齐</h1>
<ul>
<li>元素居中对齐</li>
</ul>
<p>如果没有设置 <strong>width</strong> 属性(或者设置 100%)，居中对齐将不起作用。</p>
<pre><code class="language-css">.center {
margin: auto;
width: 50%;
}
</code></pre>
<ul>
<li>文本居中对齐</li>
</ul>
<pre><code class="language-css">.center {
text-align: center;
}
</code></pre>
<ul>
<li>图片居中对齐</li>
</ul>
<pre><code class="language-css">img {
display: block;
margin: 0 auto;
}
</code></pre>
<ul>
<li>
<p>左/右对齐</p>
<ul>
<li>
<p><strong>position: absolute;</strong></p>
<p>当使用 <strong>position</strong> 来对齐元素时, 通常 <strong><code><body></code></strong> 元素会设置 <strong>margin</strong> 和 <strong>padding</strong> 。这样可以避免在不同的浏览器中出现可见的差异。</p>
</li>
</ul>
<pre><code class="language-css">body {
margin: 0;
padding: 0;
}

.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</code></pre>
<ul>
<li>
<p><strong>float</strong></p>
<p>*如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以在父元素上添加 <strong>overflow: auto;</strong> 来解决子元素溢出的问题:</p>
</li>
</ul>
<pre><code class="language-css">body {
margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</code></pre>
</li>
<li>
<p>垂直居中</p>
<ul>
<li><strong>padding</strong></li>
</ul>
<pre><code class="language-css">.center {
padding: 70px 0;
border: 3px solid green;
}
</code></pre>
<ul>
<li><strong>line-height=height</strong></li>
</ul>
<pre><code class="language-css">.center {
height: 200px;
line-height: 200px;
border: 3px solid green;
text-align: center;
}

/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</code></pre>
<ul>
<li><strong>transform</strong></li>
</ul>
<pre><code class="language-css">.center {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</code></pre>
</li>
</ul>
<p>设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：</p>
<ul>
<li>1）<strong>padding</strong>：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；</li>
<li>2）<strong>line-height=height</strong>：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；</li>
</ul>
<p>多行文本可使用 <strong>vertical-align: middle;</strong> 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。</p>
<h1 id="css-伪类伪类">CSS 伪类/伪类</h1>
<p>CSS伪类是用来添加一些选择器的特殊效果。</p>
<p>伪类/伪元素的语法：</p>
<pre><code class="language-css">selector:pseudo-class/pseudo-element {property: value;}
</code></pre>
<p>CSS类也可以使用伪类/伪元素：</p>
<pre><code class="language-css">selector.class:pseudo-class/pseudo-element {property: value;}
</code></pre>
<p><strong>伪类</strong>选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。</p>
<p>与伪类针对特殊状态的元素不同的是，<strong>伪元素</strong>是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。</p>
<h2 id="linkvistedhoveractive">:link/:visted/:hover/:active</h2>
<p><strong>链接的不同状态</strong>都可以以不同的方式显示。</p>
<pre><code class="language-css">a:link {color:#FF0000;} /* 设置了未访问过的页面链接样式 */
a:visited {color:#00FF00;} /* 设置访问过的页面链接的样式 */
a:hover {color:#FF00FF;} /* 当有鼠标悬停在其上的链接样式 */
a:active {color:#0000FF;} /* 设置当你点击链接时的样式 */
</code></pre>
<p><strong>注意：</strong> 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。</p>
<p><strong>注意：</strong> 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。</p>
<h2 id="beforeafter">:before/:after</h2>
<p><strong>:before</strong> 选择器向选定的元素前插入内容。</p>
<p><strong>:after</strong> 选择器向选定元素的最后子元素后面插入内容。</p>
<pre><code class="language-css">p:before {content: "Read this: ";}
p:after {content: "- Remember this";}
</code></pre>
<p><strong>content</strong> 属性与 :before 及 :after 伪元素配合使用，来插入内容。</p>
<pre><code class="language-css">/* content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; */
/*normal在 :before 和 :after 伪类元素中会被视为 none，即也是空值。*/
p#testID:before {content:normal;}
p#testID:before {content:none;}
/*设置文本内容*/
p:before {content: "string 设置文本内容";}
/*设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）*/
p {counter-increment: myIndex;}
p:before {content:counter(myIndex);}
/*将元素的 attribute 属性以字符串形式返回*/
a:after {content: " (" attr(href) ")";}
/*设置前后引号*/
p::before {content: open-quote;}
p::after {content: close-quote;}
/*移除内容的开始引号,闭合引号*/
p#testID:before {content: no-open-quote;}
p#testID:after {content: no-close-quote;}
/*设置某种媒体（图像，声音，视频等内容）的链接地址*/
p:before {content: url(smiley.gif);}
</code></pre>
<p>[计数器](# CSS 计数器)内容。</p>
<h2 id="first-childlast-childnth-childroottargetnotempty">:first-child/:last-child/:nth-child/:root/:target/:not/:empty</h2>
<ul>
<li><strong>:first-child</strong> 伪类选择父元素的第一个子元素。等同于 <strong>:nth-child(1)</strong></li>
</ul>
<pre><code class="language-css">/* 匹配 <p> 的父元素的第一个<p>元素 */
p:first-child {background-color:yellow;}
/* 选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素 */
p:first-child i {background:yellow;}
/* 每个列表中的第一个 <li>元素选择的样式 */
li:first-child {background:yellow;}
/* 每一个<ul>元素的第一个子元素选择的样式 */
ul>:first-child {background:yellow;}
</code></pre>
<ul>
<li><strong>:first-of-type</strong> 选择器匹配元素其父级是特定类型的第一个子元素。等同于<strong>:nth-of-type(1)</strong>。</li>
</ul>
<pre><code class="language-css">/* 选择的 p 元素是其父元素的第一个 p 元素 */
p:first-of-type {background:#ff0000;}
</code></pre>
<ul>
<li><strong>:last-child</strong> 选择器用来匹配父元素中最后一个子元素。等同于 <strong>:nth-last-child(1)</strong>。</li>
</ul>
<pre><code class="language-css">/* <p> 是其父元素的最后一个元素 */
p:last-child {background: #ff0000;}
</code></pre>
<ul>
<li><strong>:last-of-type</strong> 选择器匹配元素其父级是特定类型的最后一个子元素。等同于<strong>:nth-last-of-type(1)</strong>。</li>
</ul>
<pre><code class="language-css">/* 指定其父级的最后一个p元素 */
p:last-of-type {background:#ff0000;}
</code></pre>
<ul>
<li>
<p><strong>:nth-child(n)</strong> 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。</p>
<p><em>n</em> 可以是一个数字，一个关键字(odd/even)，或者一个公式(an+ b)。</p>
</li>
</ul>
<pre><code class="language-css">/* 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色 */
p:nth-child(2) {background: #ff0000;}
/*为奇数和偶数p元素指定两个不同的背景颜色(该索引的第一个子节点是1)*/
p:nth-child(odd) {background: #ff0000;}
p:nth-child(even) {background: #0000ff;}
/*对所有索引是3的倍数的p元素指定了背景颜色(n从0开始计数)*/
p:nth-child(3n+0) {background: #ff0000;}
</code></pre>
<ul>
<li>
<p><strong>:nth-last-child(n)</strong> 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。</p>
<p><em>n</em>可以是一个数字，一个关键字，或者一个公式。</p>
</li>
<li>
<p><strong>:nth-of-type(n)</strong> 选择器匹配同类型中的第n个同级兄弟元素。</p>
</li>
<li>
<p><strong>:nth-last-of-type(n)</strong>选择器匹配同类型中的倒数第n个同级兄弟元素。</p>
</li>
<li>
<p><strong>:only-child</strong> 选择器匹配属于父元素中唯一子元素的元素。</p>
</li>
</ul>
<pre><code class="language-css">/* 匹配属于父元素中唯一子元素的 p 元素 */
/* <div><p>唯一子</p></div>
p:only-child {background: #ff0000;}
</code></pre>
<ul>
<li><strong>:only-of-type</strong> 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。</li>
<li><strong>:not(selector)</strong> 选择器匹配每个元素是不是指定的元素/选择器。</li>
</ul>
<pre><code class="language-css">/*为每个并非<p>元素的元素设置背景颜色*/
:not(p) {background: #ff0000;}
</code></pre>
<ul>
<li><strong>:empty</strong> 选择器选择每个没有任何子级的元素（包括文本节点）</li>
</ul>
<pre><code class="language-css">/* <p></p> */
p:empty {
width:100px;
height:20px;
background:#ff0000;
}
</code></pre>
<ul>
<li><strong>:root</strong>选择器匹配文档的根元素。在HTML中根元素始终是HTML元素。</li>
</ul>
<pre><code class="language-css">/*设置HTML文档的背景色*/
:root {background: #ff0000;}
</code></pre>
<ul>
<li>
<p><strong>:target</strong> 选择器可用于当前活动的target元素的样式。</p>
<p>＃锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。</p>
</li>
</ul>
<pre><code class="language-css">/*
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
*/
#news1:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</code></pre>
<h2 id="first-linefirst-letter">:first-line/:first-letter</h2>
<ul>
<li>
<p><strong>:first-letter</strong> 选择器用来指定元素第一个字母的样式。</p>
<p><strong>:first-line</strong> 选择器用来指定选择器第一行的样式。</p>
</li>
</ul>
<pre><code class="language-css">/*每个<p>元素的第一行选择的样式*/
p:first-line {background-color: yellow;}
/*每个 <p>元素的第一个字母选择的样式*/
p:first-letter {
font-size: 200%;
color: #8A2BE2;
}
</code></pre>
<p><strong>提示:</strong> :first-letter和:first-line选择器仅适用于在块级元素中，可以使用以下属性：</p>
<ul>
<li>font properties</li>
<li>color properties</li>
<li>background properties</li>
<li>margin properties</li>
<li>padding properties</li>
<li>border properties</li>
<li>text-decoration</li>
<li>vertical-align (only if float is 'none')</li>
<li>text-transform</li>
<li>line-height</li>
<li>float</li>
<li>clear</li>
</ul>
<h2 id="涉及表单元素的伪类">涉及表单元素的伪类</h2>
<ul>
<li>
<p><strong>:optional</strong> 选择器在表单元素是可选项时设置指定样式。表单元素中如果没有特别设置 required 属性即为 optional 属性。</p>
<p><strong>:required</strong> 选择器在表单元素是必填项时设置指定样式。表单元素可以使用 required 属性来设置必填项。</p>
<p><strong>注意：</strong>:optional和:required选择器只适用于表单元素: input, select 和 textarea。</p>
</li>
</ul>
<pre><code class="language-css">input:optional {background-color: yellow;}
input:required {background-color: red;}
</code></pre>
<ul>
<li>
<p><strong>:focus</strong> 选择器用于选择具有焦点的元素。</p>
<p><strong>提示:</strong> :focus选择器接受键盘事件或其他用户输入的元素。</p>
</li>
</ul>
<pre><code class="language-css">input:focus {background-color: yellow;}
</code></pre>
<ul>
<li><strong>:checked</strong> 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。</li>
</ul>
<pre><code class="language-css">input:checked {
height: 50px;
width: 50px;
}
</code></pre>
<ul>
<li>
<p><strong>:disabled</strong> 选择器匹配每个禁用的的元素（主要用于表单元素）。</p>
<p><strong>:enabled</strong> 选择器匹配每个启用的的元素（主要用于表单元素）。</p>
</li>
</ul>
<pre><code class="language-css">注意：/* 设置所有type="text"的启用的输入元素的背景颜色 */
input:enabled {background:#ffff00;}
/* 设置所有type="text"的禁用的输入元素的背景颜色 */
input:disabled {background: #dddddd;}
</code></pre>
<ul>
<li>
<p><strong>:in-range</strong> 选择器用于标签的值在指定区间值时显示的样式。</p>
<p><strong>:out-of-range</strong> 选择器用于标签的值在指定区间之外时显示的样式。</p>
<p><strong>注意：</strong>:in-range和:out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性。</p>
</li>
</ul>
<pre><code class="language-css">/* <input type="number" min="5" max="10"/> */
input:out-of-range {border:2px solid red;}
input:in-range {border:2px solid yellow;}
</code></pre>
<ul>
<li>
<p><strong>:invalid</strong> 选择器用于在表单元素中的值是非法时设置指定样式。</p>
<p><strong>:valid</strong> 选择器在表单元素的值需要根据指定条件验证时设置指定样式。</p>
<p><strong>注意：</strong> :invalid和:valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。</p>
</li>
</ul>
<pre><code class="language-css">**注意：**/* <input type="email"/> */
input:invalid {border:2px solid red;}
input:valid {background-color: yellow;}
</code></pre>
<ul>
<li>
<p><strong>:read-write</strong> 选择器用于匹配可读及可写的元素。</p>
<p><strong>:read-only</strong> 选择器用于选取设置了 "readonly" 属性的元素。表单元素可以设置 "readonly" 属性来定义元素只读。</p>
<p><strong>注意：</strong>:read-write 选择器只使用于设置了input 和 textarea 元素。:read-only 选择器适用于 input 和 textarea 元素，但是它也适用于设置了 "readonly" 属性的元素。</p>
<pre><code class="language-css">/*
<p>普通的input元素:<br><input value="hello"></p>
<p>只读的input元素:<br><input readonly value="hello"></p>
*/
input:read-only {background-color: yellow;}
input:read-write {background-color: yellow;}
</code></pre>
</li>
</ul>
<h2 id="lang">:lang</h2>
<ul>
<li><strong>:lang</strong> 伪类使你有能力为不同的语言定义特殊的规则。</li>
</ul>
<pre><code class="language-css">q:lang(no) {quotes: "~" "~";}

/* html代码 */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</code></pre>
<h1 id="css-透明度opacity">CSS 透明度(opacity)</h1>
<p>opacity属性设置一个元素了透明度级别。</p>
<p>指定不透明度。从0.0（完全透明）到1.0（完全不透明）。默认是1.0。</p>
<pre><code class="language-css">div {opacity:0.5;}
</code></pre>
<h1 id="css-计数器">CSS 计数器</h1>
<p>CSS 计数器通过一个变量来设置，根据规则递增变量。</p>
<p>CSS 计数器使用到以下几个属性：</p>
<ul>
<li><code>counter-reset</code> - 创建或者重置计数器</li>
<li><code>counter-increment</code> - 递增变量</li>
<li><code>content</code> - 插入生成的内容</li>
<li><code>counter()</code> 或 <code>counters()</code> 函数 - 将计数器的值添加到元素</li>
</ul>
<pre><code class="language-css">body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before {
content:"Section " counter(section) ". ";
counter-increment:section;
}
h2:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

ol {
counter-reset: sect;
list-style-type: none;
}
li::before {
counter-increment: sect;
content: counters(sect,".") " ";
}
</code></pre>
<p>注：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。</p>
<h1 id="css-光标类型cursor">CSS 光标类型(cursor)</h1>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
</body>
</html>
</code></pre>
<h1 id="css-媒体类型">CSS 媒体类型</h1>
<p>媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。</p>
<p>@media 规则允许在相同样式表为不同媒体设置不同的样式。</p>
<pre><code class="language-css">/*浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体*/
@media screen {
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
p.test {font-weight:bold;}
}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">媒体类型</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">all</td>
<td style="text-align: left">用于所有的媒体设备。</td>
</tr>
<tr>
<td style="text-align: left">aural</td>
<td style="text-align: left">用于语音和音频合成器。</td>
</tr>
<tr>
<td style="text-align: left">braille</td>
<td style="text-align: left">用于盲人用点字法触觉回馈设备。</td>
</tr>
<tr>
<td style="text-align: left">embossed</td>
<td style="text-align: left">用于分页的盲人用点字法打印机。</td>
</tr>
<tr>
<td style="text-align: left">handheld</td>
<td style="text-align: left">用于小的手持的设备。</td>
</tr>
<tr>
<td style="text-align: left">print</td>
<td style="text-align: left">用于打印机。</td>
</tr>
<tr>
<td style="text-align: left">projection</td>
<td style="text-align: left">用于方案展示，比如幻灯片。</td>
</tr>
<tr>
<td style="text-align: left">screen</td>
<td style="text-align: left">用于电脑显示器。</td>
</tr>
<tr>
<td style="text-align: left">tty</td>
<td style="text-align: left">用于使用固定密度字母栅格的媒体，比如电传打字机和终端。</td>
</tr>
<tr>
<td style="text-align: left">tv</td>
<td style="text-align: left">用于电视机类型的设备。</td>
</tr>
</tbody>
</table>
<h1 id="css-important规则">CSS !important规则</h1>
<p>CSS 中的 !important 规则用于增加样式的权重。</p>
<p><strong>!important</strong> 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。</p>
<p>当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。</p>
<pre><code class="language-css">/*尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，因为 !important 规则会覆盖 background-color 属性。*/
p#myid {background-color: blue;}
p.myclass {background-color: gray;}
p {background-color: red !important;}
</code></pre>
<p><strong>注：</strong>使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。</p>
<p><strong>使用建议：</strong></p>
<ul>
<li><strong>一定</strong>要优先考虑使用样式规则的优先级来解决问题而不是 <code>!important</code></li>
<li><strong>只有</strong>在需要覆盖全站或外部 CSS 的特定页面中使用 <code>!important</code></li>
<li><strong>永远不要</strong>在你的插件中使用 <code>!important</code></li>
<li><strong>永远不要</strong>在全站范围的 CSS 代码中使用 <code>!important</code></li>
</ul>
<p>如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。比如我们要让网站上所有按钮的样式都一样。</p>
<h1 id="css3-边框">CSS3 边框</h1>
<h2 id="border-radius">border-radius</h2>
<pre><code class="language-css">border-radius: 1-4 length | % / 1-4 length | %;
/*
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
*/
/*左上角25px，右上角20px，右下角15px，左下角10px*/
border-radius:25px 20px 15px 10px;
/*左上角25px，右上角20px，右下角15px，左下角20px*/
border-radius:25px 20px 15px;
/*左上角25px，右上角20px，右下角25px，左下角20px*/
border-radius:25px 20px;
/*左上角25px，右上角25px，右下角25px，左下角25px*/
border-radius:25px;
/*
斜线前的是水平半径，斜线后的是垂直半径
左上角2em 0.5em ，右上角1em 3em，右下角4em 0.5em，左下角1em 3em
*/
border-radius: 2em 1em 4em / 0.5em 3em;
</code></pre>
<pre><code class="language-css">/*给div元素添加圆角的边框*/
div {
border:2px solid;
border-radius:25px;
}
</code></pre>
<h2 id="box-shadow">box-shadow</h2>
<p>box-shadow属性可以设置一个或多个下拉阴影的框。</p>
<pre><code class="language-css">box-shadow: h-shadow v-shadow blur spread color inset;

/*多个阴影,该属性是由逗号分隔的阴影列表*/
box-shadow: h-shadow v-shadow blur spread color inset,h-shadow v-shadow blur spread color inset,……;

box-shadow: 10px 10px 5px 5px #888888 inset;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>h-shadow</em></td>
<td style="text-align: left">必需的。水平阴影的位置。允许负值</td>
</tr>
<tr>
<td style="text-align: left"><em>v-shadow</em></td>
<td style="text-align: left">必需的。垂直阴影的位置。允许负值</td>
</tr>
<tr>
<td style="text-align: left"><em>blur</em></td>
<td style="text-align: left">可选。模糊距离</td>
</tr>
<tr>
<td style="text-align: left"><em>spread</em></td>
<td style="text-align: left">可选。阴影的大小</td>
</tr>
<tr>
<td style="text-align: left"><em>color</em></td>
<td style="text-align: left">可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表</td>
</tr>
<tr>
<td style="text-align: left">inset</td>
<td style="text-align: left">可选。将外部阴影 (outset) 改为内部阴影</td>
</tr>
</tbody>
</table>
<p>也可以在 ::before 和 ::after 两个伪元素中添加阴影效果</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}

/* Make the image fit the box */
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}

#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
</style>
</head>
<body>

<div id="boxshadow">
<img src="rock600x400.jpg" alt="Norway" width="600" height="400">
</div>

</body>
</code></pre>
<h2 id="border-image">border-image</h2>
<p>设置边框图片</p>
<p>border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。</p>
<pre><code class="language-css">border-image: source slice /width /outset repeat;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>border-image-source</em></td>
<td style="text-align: left">用于指定要用于绘制边框的图像的位置</td>
</tr>
<tr>
<td style="text-align: left"><em>border-image-slice</em></td>
<td style="text-align: left">图像边界向内偏移</td>
</tr>
<tr>
<td style="text-align: left"><em>border-image-width</em></td>
<td style="text-align: left">图像边界的宽度</td>
</tr>
<tr>
<td style="text-align: left"><em>border-image-outset</em></td>
<td style="text-align: left">用于指定在边框外部绘制 border-image-area 的量</td>
</tr>
<tr>
<td style="text-align: left"><em>border-image-repeat</em></td>
<td style="text-align: left">用于设置图像边界是否应重复(repeat)、拉伸(stretch)、铺满(round)或、有间隔铺满(space)</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">div#borderimg {
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
</code></pre>
<p>关于border-image更多可参照来自凹凸实验室的border-image 的正确用法。</p>
<h1 id="css3-背景">CSS3 背景</h1>
<h2 id="background-image">background-image</h2>
<p>CSS3 允许你在元素上添加多个背景图像。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。</p>
<pre><code class="language-css">background-image: url1,url2,url3,……
</code></pre>
<pre><code class="language-css">body
{
   background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
/*
或
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
*/
}
</code></pre>
<h2 id="background-size">background-size</h2>
<p>background-size属性指定背景图片大小。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">length</td>
<td style="text-align: left">设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 <strong>auto</strong>(自动)</td>
</tr>
<tr>
<td style="text-align: left">percentage</td>
<td style="text-align: left">将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"</td>
</tr>
<tr>
<td style="text-align: left">cover</td>
<td style="text-align: left">此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。</td>
</tr>
<tr>
<td style="text-align: left">contain</td>
<td style="text-align: left">此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
</code></pre>
<h2 id="background-origin">background-origin</h2>
<p>background-origin属性指定background-position属性应该是相对位置。</p>
<p><strong>注意：</strong>如果背景图像background-attachment是"固定"，这个属性没有任何效果。</p>
<img src="https://img2022.cnblogs.com/blog/2024073/202201/2024073-20220131183444487-1166495949.png" alt="image-20220131183443245" style="zoom: 80%">
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">padding-box</td>
<td style="text-align: left">背景图像填充框的相对位置，默认值</td>
</tr>
<tr>
<td style="text-align: left">border-box</td>
<td style="text-align: left">背景图像边界框的相对位置</td>
</tr>
<tr>
<td style="text-align: left">content-box</td>
<td style="text-align: left">背景图像的相对位置的内容框</td>
</tr>
</tbody>
</table>
<h2 id="background-clip">background-clip</h2>
<p>background-clip属性指定背景绘制区域。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">border-box</td>
<td style="text-align: left">默认值。背景绘制在边框方框内（剪切成边框方框）。</td>
</tr>
<tr>
<td style="text-align: left">padding-box</td>
<td style="text-align: left">背景绘制在填充方框内（剪切成填充方框）。</td>
</tr>
<tr>
<td style="text-align: left">content-box</td>
<td style="text-align: left">背景绘制在内容方框内（剪切成内容方框）。</td>
</tr>
</tbody>
</table>
<h1 id="css3-渐变">CSS3 渐变</h1>
<p>CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。</p>
<p>CSS3 定义了两种类型的渐变（gradients）：</p>
<ul>
<li><strong>线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向</strong></li>
<li><strong>径向渐变（Radial Gradients）- 由它们的中心定义</strong></li>
</ul>
<p>渐变在线工具</p>
<h2 id="css3-线性渐变">CSS3 线性渐变</h2>
<pre><code class="language-css">background-image: linear-gradient(direction|angle, color-stop1, color-stop2, ...);
</code></pre>
<p>linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。</p>
<p>创建一个线性渐变，需要至少指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。</p>
<p>使用方向：to bottom、to top、to right、to left、to bottom right、to bottom left、to top left、to top right。</p>
<p>使用角度：<img src="https://img2022.cnblogs.com/blog/2024073/202201/2024073-20220131190401436-1266241442.png" alt="image-20220131190354771" style="zoom: 67%"></p>
<pre><code class="language-css">/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
</code></pre>
<p>css 不均匀渐变百分比的学习。百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。</p>
<pre><code class="language-css">/*
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
*/
background: linear-gradient(red 10%, green 85%, blue 90%)
</code></pre>
<h2 id="css3-径向渐变">CSS3 径向渐变</h2>
<p>径向渐变由它的中心定义。</p>
<p>为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。</p>
<pre><code class="language-css">background-image: radial-gradient(shape size at position, start-color, ..., last-color);
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>shape</em></td>
<td style="text-align: left">确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变</td>
</tr>
<tr>
<td style="text-align: left"><em>size</em></td>
<td style="text-align: left">定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角;closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边</td>
</tr>
<tr>
<td style="text-align: left"><em>position</em></td>
<td style="text-align: left">定义渐变的位置。可能值：<strong>center</strong>（默认）：设置中间为径向渐变圆心的纵坐标值。<strong>top</strong>：设置顶部为径向渐变圆心的纵坐标值。<strong>bottom</strong>：设置底部为径向渐变圆心的纵坐标值。</td>
</tr>
<tr>
<td style="text-align: left"><em>start-color, ..., last-color</em></td>
<td style="text-align: left">用于指定渐变的起止颜色。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">background-image: radial-gradient(circle farthest-side at 60% 55%, blue, green, yellow, black);
</code></pre>
<h2 id="透明度渐变">透明度渐变</h2>
<p>CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。</p>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<pre><code class="language-css">background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
</code></pre>
<p>rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。</p>
<h2 id="重复的线性渐变">重复的线性渐变</h2>
<p>repeating-linear-gradient() 函数用于重复线性渐变：</p>
<pre><code class="language-css">background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
</code></pre>
<h2 id="重复的径向渐变">重复的径向渐变</h2>
<p>repeating-radial-gradient() 函数用于重复径向渐变：</p>
<pre><code class="language-css">background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
</code></pre>
<h1 id="css3-文本效果">CSS3 文本效果</h1>
<h2 id="text-shadow">text-shadow</h2>
<p>text-shadow 属性应用于阴影文本。</p>
<pre><code class="language-css">text-shadow: h-shadow v-shadow blur color;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>h-shadow</em></td>
<td style="text-align: left">必需。水平阴影的位置。允许负值。</td>
</tr>
<tr>
<td style="text-align: left"><em>v-shadow</em></td>
<td style="text-align: left">必需。垂直阴影的位置。允许负值。</td>
</tr>
<tr>
<td style="text-align: left"><em>blur</em></td>
<td style="text-align: left">可选。模糊的距离。</td>
</tr>
<tr>
<td style="text-align: left"><em>color</em></td>
<td style="text-align: left">可选。阴影的颜色。参阅 CSS 颜色值。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">text-shadow:0 0 3px #FF0000;
</code></pre>
<h2 id="text-overflow">text-overflow</h2>
<p>text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（只在 Firefox 浏览器下有效)）。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">clip</td>
<td style="text-align: left">剪切文本。</td>
</tr>
<tr>
<td style="text-align: left">ellipsis</td>
<td style="text-align: left">显示省略符号 <strong>...</strong> 来代表被修剪的文本。</td>
</tr>
<tr>
<td style="text-align: left"><em>string</em></td>
<td style="text-align: left">使用给定的字符串来代表被修剪的文本。</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">设置为属性默认值。阅读关于 <em>initial</em></td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从父元素继承该属性值。阅读关于 <em>inherit</em></td>
</tr>
</tbody>
</table>
<p>text-overflow 需要配合以下两个属性使用：</p>
<ul>
<li><strong>white-space: nowrap;</strong></li>
<li><strong>overflow: hidden;</strong></li>
</ul>
<pre><code class="language-css">text-overflow: clip|ellipsis|string|initial|inherit;
</code></pre>
<h2 id="word-wrap">word-wrap</h2>
<p>word-wrap属性允许对长的不可分割的单词进行分割并换行到下一行。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">只在允许的断字点换行（浏览器保持默认处理）。</td>
</tr>
<tr>
<td style="text-align: left">break-word</td>
<td style="text-align: left">在长单词或 URL 地址内部进行换行。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">/*
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
*/
p.test {
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</code></pre>
<h2 id="word-break">word-break</h2>
<p>word-break属性指定非CJK脚本的断行规则。</p>
<p><strong>提示:</strong>CJK脚本是中国，日本和韩国（"中日韩"）脚本。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">使用浏览器默认的换行规则。</td>
</tr>
<tr>
<td style="text-align: left">break-all</td>
<td style="text-align: left">允许在单词内换行。</td>
</tr>
<tr>
<td style="text-align: left">keep-all</td>
<td style="text-align: left">只能在半角空格或连字符处换行。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">word-break: normal|break-all|keep-all;

p.test {word-break:break-all;}
</code></pre>
<h1 id="css3-字体">CSS3 字体</h1>
<p>使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。</p>
<p>使用 <strong>CSS3</strong>，网页设计师可以使用他/她喜欢的任何字体。</p>
<p>当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。</p>
<p>您"自己的"的字体是在 <strong>CSS3 @font-face</strong> 规则中定义的。下表列出了所有的字体描述和里面的@font-face规则定义：</p>
<table>
<thead>
<tr>
<th style="text-align: left">描述符</th>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">font-family</td>
<td style="text-align: left"><em>name</em></td>
<td style="text-align: left">必需。规定字体的名称。</td>
</tr>
<tr>
<td style="text-align: left">src</td>
<td style="text-align: left"><em>URL</em></td>
<td style="text-align: left">必需。定义字体文件的 URL。</td>
</tr>
<tr>
<td style="text-align: left">font-stretch</td>
<td style="text-align: left">normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded</td>
<td style="text-align: left">可选。定义如何拉伸字体。默认是 "normal"。</td>
</tr>
<tr>
<td style="text-align: left">font-style</td>
<td style="text-align: left">normal/italic/oblique</td>
<td style="text-align: left">可选。定义字体的样式。默认是 "normal"。</td>
</tr>
<tr>
<td style="text-align: left">font-weight</td>
<td style="text-align: left">normal/bold/100/200/300/400/500/600/700/800/900</td>
<td style="text-align: left">可选。定义字体的粗细。默认是 "normal"。</td>
</tr>
<tr>
<td style="text-align: left">unicode-range</td>
<td style="text-align: left"><em>unicode-range</em></td>
<td style="text-align: left">可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</code></pre>
<h1 id="css3-2d转换">CSS3 2D转换</h1>
<h2 id="转换属性">转换属性</h2>
<p><strong>transform</strong> 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。</p>
<pre><code class="language-css">transform: none|transform-functions;
</code></pre>
<p><strong>transform-origin</strong> 属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。</p>
<pre><code class="language-css">transform-origin: x-axis y-axis z-axis;
</code></pre>
<p><strong>注意：</strong> 使用此属性必须先使用 transform 属性。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">x-axis</td>
<td style="text-align: left">定义视图被置于 X 轴的何处。可能的值：left/center/right/length/%</td>
</tr>
<tr>
<td style="text-align: left">y-axis</td>
<td style="text-align: left">定义视图被置于 Y 轴的何处。可能的值：top/center/bottom/length/%</td>
</tr>
<tr>
<td style="text-align: left">z-axis</td>
<td style="text-align: left">定义视图被置于 Z 轴的何处。可能的值：length</td>
</tr>
</tbody>
</table>
<h2 id="2d-转换方法">2D 转换方法</h2>
<table>
<thead>
<tr>
<th style="text-align: left">函数</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">matrix(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td style="text-align: left">定义 2D 转换，使用六个值的矩阵。</td>
</tr>
<tr>
<td style="text-align: left">translate(<em>x</em>,<em>y</em>)</td>
<td style="text-align: left">定义 2D 转换，沿着 X 和 Y 轴移动元素。</td>
</tr>
<tr>
<td style="text-align: left">translateX(<em>n</em>)</td>
<td style="text-align: left">定义 2D 转换，沿着 X 轴移动元素。</td>
</tr>
<tr>
<td style="text-align: left">translateY(<em>n</em>)</td>
<td style="text-align: left">定义 2D 转换，沿着 Y 轴移动元素。</td>
</tr>
<tr>
<td style="text-align: left">scale(<em>x</em>,<em>y</em>)</td>
<td style="text-align: left">定义 2D 缩放转换，改变元素的宽度和高度。</td>
</tr>
<tr>
<td style="text-align: left">scaleX(<em>n</em>)</td>
<td style="text-align: left">定义 2D 缩放转换，改变元素的宽度。</td>
</tr>
<tr>
<td style="text-align: left">scaleY(<em>n</em>)</td>
<td style="text-align: left">定义 2D 缩放转换，改变元素的高度。</td>
</tr>
<tr>
<td style="text-align: left">rotate(<em>angle</em>)</td>
<td style="text-align: left">定义 2D 旋转，在参数中规定角度。</td>
</tr>
<tr>
<td style="text-align: left">skew(<em>x-angle</em>,<em>y-angle</em>)</td>
<td style="text-align: left">定义 2D 倾斜转换，沿着 X 和 Y 轴。</td>
</tr>
<tr>
<td style="text-align: left">skewX(<em>angle</em>)</td>
<td style="text-align: left">定义 2D 倾斜转换，沿着 X 轴。</td>
</tr>
<tr>
<td style="text-align: left">skewY(<em>angle</em>)</td>
<td style="text-align: left">定义 2D 倾斜转换，沿着 Y 轴。</td>
</tr>
</tbody>
</table>
<blockquote>
<p>matrix详解</p>
</blockquote>
<pre><code class="language-css">/*从左边元素移动50个像素，并从顶部移动100像素*/
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
transform: translate(50px,100px);
}

/*顺时针旋转30度*/
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
transform: rotate(30deg);
}

/*宽度为原来的大小的2倍，和其原始大小3倍的高度*/
div {
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}

/*在X轴倾斜30度,在Y轴上20度*/
div
{
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
transform: skew(30deg,20deg);
}

/*旋转div元素30度*/
div
{
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</code></pre>
<h1 id="css3-3d转换">CSS3 3D转换</h1>
<h2 id="转换属性-1">转换属性</h2>
<ul>
<li>tansform、tansform-orgin</li>
<li><strong>transform-style</strong> 属性指定嵌套元素是怎样在三维空间中呈现。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">flat</td>
<td style="text-align: left">表示所有子元素在2D平面呈现。默认值</td>
</tr>
<tr>
<td style="text-align: left">preserve-3d</td>
<td style="text-align: left">表示所有子元素在3D空间中呈现。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">/*让转换的子元素保留3D转换*/
div {
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
</code></pre>
<ul>
<li><strong>perspective</strong> 规定 3D 元素的透视效果。</li>
</ul>
<pre><code class="language-css">perspective: number|none;

/*设置从何处查看一个元素的角度*/
div
{
-webkit-perspective: 500px; /* Safari and Chrome */
perspective: 500px;
}
</code></pre>
<ul>
<li><strong>perspective-origin</strong> 规定 3D 元素的底部位置。</li>
</ul>
<pre><code class="language-css">perspective-origin: x-axis y-axis;

div {
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
perspective:150;
perspective-origin: 10% 10%;
}
</code></pre>
<ul>
<li><strong>backface-visibility</strong> 定义元素在不面对屏幕时是否可见。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">visible</td>
<td style="text-align: left">背面是可见的。</td>
</tr>
<tr>
<td style="text-align: left">hidden</td>
<td style="text-align: left">背面是不可见的。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">div
{
-webkit-backface-visibility:hidden; /* Chrome 、Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
backface-visibility:hidden;
}
</code></pre>
<h2 id="3d-转换方法">3D 转换方法</h2>
<table>
<thead>
<tr>
<th style="text-align: left">函数</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">matrix3d(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>, <em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td style="text-align: left">定义 3D 转换，使用 16 个值的 4x4 矩阵。</td>
</tr>
<tr>
<td style="text-align: left">translate3d(<em>x</em>,<em>y</em>,<em>z</em>)</td>
<td style="text-align: left">定义 3D 转化。</td>
</tr>
<tr>
<td style="text-align: left">translateX(<em>x</em>)</td>
<td style="text-align: left">定义 3D 转化，仅使用用于 X 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">translateY(<em>y</em>)</td>
<td style="text-align: left">定义 3D 转化，仅使用用于 Y 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">translateZ(<em>z</em>)</td>
<td style="text-align: left">定义 3D 转化，仅使用用于 Z 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">scale3d(<em>x</em>,<em>y</em>,<em>z</em>)</td>
<td style="text-align: left">定义 3D 缩放转换。</td>
</tr>
<tr>
<td style="text-align: left">scaleX(<em>x</em>)</td>
<td style="text-align: left">定义 3D 缩放转换，通过给定一个 X 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">scaleY(<em>y</em>)</td>
<td style="text-align: left">定义 3D 缩放转换，通过给定一个 Y 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">scaleZ(<em>z</em>)</td>
<td style="text-align: left">定义 3D 缩放转换，通过给定一个 Z 轴的值。</td>
</tr>
<tr>
<td style="text-align: left">rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)</td>
<td style="text-align: left">定义 3D 旋转。</td>
</tr>
<tr>
<td style="text-align: left">rotateX(<em>angle</em>)</td>
<td style="text-align: left">定义沿 X 轴的 3D 旋转。</td>
</tr>
<tr>
<td style="text-align: left">rotateY(<em>angle</em>)</td>
<td style="text-align: left">定义沿 Y 轴的 3D 旋转。</td>
</tr>
<tr>
<td style="text-align: left">rotateZ(<em>angle</em>)</td>
<td style="text-align: left">定义沿 Z 轴的 3D 旋转。</td>
</tr>
<tr>
<td style="text-align: left">perspective(<em>n</em>)</td>
<td style="text-align: left">定义 3D 转换元素的透视视图。</td>
</tr>
</tbody>
</table>
<h1 id="css3-过渡">CSS3 过渡</h1>
<p>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。</p>
<h2 id="transition">transition</h2>
<p><strong>transition</strong> 属性设置元素样式的过渡效果，是以下四个属性的简写：</p>
<ul>
<li><strong>transition-property</strong> 规定应用过渡的 CSS 属性的名称。</li>
<li><strong>transition-duration</strong> 定义过渡效果花费的时间。默认是 0。</li>
<li>**transition-timing-function **规定过渡效果的时间曲线。默认是 "ease"。</li>
<li><strong>transition-delay</strong>规定过渡效果何时开始。默认是 0</li>
</ul>
<pre><code class="language-css">transition: property duration timing-function delay; /* 默认值：all 0 ease 0 */
</code></pre>
<p><strong>注意：</strong> 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。</p>
<h2 id="transition-property">transition-property</h2>
<pre><code class="language-css">transition-property: none|all| property;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">没有属性会获得过渡效果。</td>
</tr>
<tr>
<td style="text-align: left">all</td>
<td style="text-align: left">所有属性都将获得过渡效果。</td>
</tr>
<tr>
<td style="text-align: left"><em>property</em></td>
<td style="text-align: left">定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。</td>
</tr>
</tbody>
</table>
<h2 id="transition-duration">transition-duration</h2>
<p>transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。</p>
<pre><code class="language-CSS">transition-duration: time;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>time</em></td>
<td style="text-align: left">规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。</td>
</tr>
</tbody>
</table>
<h2 id="transition-timing-function">transition-timing-function</h2>
<p>transition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。</p>
<pre><code class="language-CSS">transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">linear</td>
<td style="text-align: left">规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td>
</tr>
<tr>
<td style="text-align: left">ease</td>
<td style="text-align: left">规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td>
</tr>
<tr>
<td style="text-align: left">ease-in</td>
<td style="text-align: left">规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td>
</tr>
<tr>
<td style="text-align: left">ease-out</td>
<td style="text-align: left">规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td>
</tr>
<tr>
<td style="text-align: left">ease-in-out</td>
<td style="text-align: left">规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td>
</tr>
<tr>
<td style="text-align: left">cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td style="text-align: left">在立方贝塞尔曲线函数函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td>
</tr>
</tbody>
</table>
<h2 id="transition-delay">transition-delay</h2>
<p>transition-delay 属性指定何时将开始切换效果。</p>
<p>transition-delay值是指以秒为单位（S）或毫秒（ms），默认值是0。</p>
<pre><code class="language-css">transition-delay: time;
</code></pre>
<pre><code class="language-css"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s ease 2s, height 3s ease 2s; /* Safari */
transition: width 2s ease, height 3s ease 2s;
}

div:hover
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>
</code></pre>
<h1 id="css3-动画">CSS3 动画</h1>
<p>CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。</p>
<p><strong>@keyframes</strong> 规则是创建动画，创建动画是通过逐步改变从一个CSS样式设定到另一个。</p>
<p>在动画过程中，您可以更改CSS样式的设定多次。</p>
<p>指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。</p>
<p>为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。</p>
<pre><code class="language-css">@keyframes animationname {keyframes-selector {css-styles;}}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>animationname</em></td>
<td style="text-align: left">必需的。定义animation的名称。</td>
</tr>
<tr>
<td style="text-align: left"><em>keyframes-selector</em></td>
<td style="text-align: left">必需的。动画持续时间的百分比。合法值：0-100% 、from (和0%相同)、 to (和100%相同)。<strong>注意：</strong> 您可以用一个动画keyframes-selectors。</td>
</tr>
<tr>
<td style="text-align: left"><em>css-styles</em></td>
<td style="text-align: left">必需的。一个或多个合法的CSS样式属性</td>
</tr>
</tbody>
</table>
<h2 id="animation">animation</h2>
<p>animation所有动画属性的简写属性。</p>
<pre><code class="language-css">animation: name duration timing-function delay iteration-count direction fill-mode play-state;
</code></pre>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation: mymove 5s linear 2s infinite alternate;/* Safari 与 Chrome: */
animation: mymove 5s linear 2s infinite alternate;
}

@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25%{top:0px; left:100px; background:blue;}
50%{top:100px; left:100px; background:yellow;}
75%{top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25%{top:0px; left:100px; background:blue;}
50%{top:100px; left:100px; background:yellow;}
75%{top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>
</code></pre>
<h2 id="animation-name">animation-name</h2>
<p>animation-name 属性为 @keyframes 动画指定名称。</p>
<pre><code class="language-css">animation-name: keyframename|none;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>keyframename</em></td>
<td style="text-align: left">指定要绑定到选择器的关键帧的名称</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">指定有没有动画（可用于覆盖从级联的动画）</td>
</tr>
</tbody>
</table>
<h2 id="animation-duration">animation-duration</h2>
<p>animation-duration属性定义动画完成一个周期需要多少秒或毫秒。</p>
<pre><code class="language-css">animation-duration: time;
</code></pre>
<h2 id="animation-timing-function">animation-timing-function</h2>
<p>animation-timing-function指定动画将如何完成一个周期。</p>
<p>速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。</p>
<pre><code class="language-css">animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|
cubic-bezier(n,n,n,n)|steps(int,start|end);
</code></pre>
<h2 id="animation-delay">animation-delay</h2>
<p>animation-delay 属性定义动画什么时候开始。</p>
<p>animation-delay 值单位可以是秒（s）或毫秒（ms）。</p>
<p><strong>提示:</strong> 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。</p>
<h2 id="animation-iteration-count">animation-iteration-count</h2>
<p>animation-iteration-count属性定义动画应该播放多少次。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>n</em></td>
<td>一个数字，定义应该播放多少次动画。默认值1</td>
</tr>
<tr>
<td>infinite</td>
<td>指定动画应该播放无限次（永远）</td>
</tr>
</tbody>
</table>
<h2 id="animation-direction">animation-direction</h2>
<p>animation-direction 属性定义是否循环交替反向播放动画。</p>
<p><strong>注意：</strong>如果动画被设置为只播放一次，该属性将不起作用。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认值。动画按正常播放。</td>
</tr>
<tr>
<td style="text-align: left">reverse</td>
<td style="text-align: left">动画反向播放。</td>
</tr>
<tr>
<td style="text-align: left">alternate</td>
<td style="text-align: left">动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。</td>
</tr>
<tr>
<td style="text-align: left">alternate-reverse</td>
<td style="text-align: left">动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。</td>
</tr>
</tbody>
</table>
<h2 id="animation-fill-mode">animation-fill-mode</h2>
<p>animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</p>
<p>默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。</td>
</tr>
<tr>
<td style="text-align: left">forwards</td>
<td style="text-align: left">在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。</td>
</tr>
<tr>
<td style="text-align: left">backwards</td>
<td style="text-align: left">动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。</td>
</tr>
<tr>
<td style="text-align: left">both</td>
<td style="text-align: left">动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">/*把物体动画地从一个地方移动到另一个地方，并让它停留在那里*/
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
animation-fill-mode:forwards;
</code></pre>
<h2 id="animation-play-state">animation-play-state</h2>
<p>animation--play-state属性指定动画是否正在运行或已暂停。</p>
<p><strong>注意：</strong>在 <strong>JavaScript</strong> 中使用此属性在一个周期中暂停动画。</p>
<pre><code class="language-css">animation-play-state: paused|running;
</code></pre>
<h1 id="css3-多列">CSS3 多列</h1>
<h2 id="column-count">column-count</h2>
<p><code>column-count</code> 属性指定了需要分割的列数。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>number</em></td>
<td style="text-align: left">列的最佳数目将其中的元素的内容无法流出</td>
</tr>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">列数将取决于其他属性，例如："column-width"</td>
</tr>
</tbody>
</table>
<h2 id="column-gap">column-gap</h2>
<p><code>column-gap</code> 属性指定了列与列间的间隙。</p>
<pre><code class="language-css">column-gap: length|normal;
</code></pre>
<h2 id="column-rule-style">column-rule-style</h2>
<p><code>column-rule-style</code> 属性指定了列与列间的边框样式。</p>
<pre><code class="language-css">column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
</code></pre>
<h2 id="column-rule-width">column-rule-width</h2>
<p><code>column-rule-width</code> 属性指定了两列的边框厚度。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">thin</td>
<td style="text-align: left">指定一个细边框的规则</td>
</tr>
<tr>
<td style="text-align: left">medium</td>
<td style="text-align: left">定义一个中等边框规则</td>
</tr>
<tr>
<td style="text-align: left">thick</td>
<td style="text-align: left">指定一个粗边框的规则</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">指定宽度的规则</td>
</tr>
</tbody>
</table>
<h2 id="column-rule-color">column-rule-color</h2>
<p><code>column-rule-color</code> 属性指定了两列的边框颜色。</p>
<h2 id="column-rule">column-rule</h2>
<p><code>column-rule</code> 属性是 column-rule-* 所有属性的简写。column-rule属性设置列之间的宽度，样式和颜色。</p>
<pre><code class="language-css">/* column-rule: column-rule-width column-rule-style column-rule-color; */

div.newspaper {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
</code></pre>
<h2 id="column-width">column-width</h2>
<p>column-width属性指定列的宽度。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">浏览器将决定列的宽度</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">指定列宽的长度</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">div {
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px;
}
</code></pre>
<h2 id="column-span">column-span</h2>
<p>column-span属性指定某个元素应该跨越多少列。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">1</td>
<td style="text-align: left">元素应跨越一列</td>
</tr>
<tr>
<td style="text-align: left">all</td>
<td style="text-align: left">该元素应该跨越所有列</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">h2 {
-webkit-column-span:all; /* Safari and Chrome */
column-span:all;
}
</code></pre>
<h2 id="columns">columns</h2>
<p>columns 是 column-width 与 column-count 的简写属性。</p>
<pre><code class="language-css">/*columns: column-width column-count;
默认值：auto auto*/
div {
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
/*
   当每列宽度大于 100px 时，就以 3 列分割显示；当浏览器宽度缩小，导致在 3 列情况下无法满足每列大于 100px，就开始转为 2 列；当浏览器再缩小，2 列中每列无法再保持 100px 每列时，再次转为 1 列...

以此类推，"100px" 为每列不可低于的宽值，"3" 表示指定要显示的列。相对于单独设置 column-width 或 column-count， columns 要更加灵活。
*/
columns:100px 3;
}
</code></pre>
<h1 id="css3-用户界面">CSS3 用户界面</h1>
<h2 id="resize">resize</h2>
<p>resize属性指定一个元素是否是由用户调整大小的。效果类似 <code><textarea></textarea></code> 文本域标签。</p>
<pre><code class="language-css">resize: none|both|horizontal|vertical:
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">用户无法调整元素的尺寸。</td>
</tr>
<tr>
<td style="text-align: left">both</td>
<td style="text-align: left">用户可调整元素的高度和宽度。</td>
</tr>
<tr>
<td style="text-align: left">horizontal</td>
<td style="text-align: left">用户可调整元素的宽度。</td>
</tr>
<tr>
<td style="text-align: left">vertical</td>
<td style="text-align: left">用户可调整元素的高度。</td>
</tr>
</tbody>
</table>
<h2 id="outline-offset">outline-offset</h2>
<p>outline-offset属性设置轮廓框架在 border 边缘外的偏移。</p>
<pre><code class="language-css">outline-offset: length|inherit:
</code></pre>
<h2 id="box-sizing">box-sizing</h2>
<p>box-sizing 属性规定容器元素的最终尺寸计算方式，主要设置是否需要加上内边距(padding)和边框等。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">content-box</td>
<td style="text-align: left">默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。</td>
</tr>
<tr>
<td style="text-align: left">border-box</td>
<td style="text-align: left">告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 <strong>注：</strong>border-box 不包含 margin。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">指定 box-sizing 属性的值，应该从父元素继承</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">/* 设置通用的 box-sizing */
* {
box-sizing: border-box;
}
</code></pre>
<p>box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。</p>
<p>content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。</p>
<p>而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。</p>
<h1 id="css3-图片">CSS3 图片</h1>
<h2 id="filter滤镜">filter(滤镜)</h2>
<p>filter 属性定义了元素(通常是<code><img></code>)的可视效果(例如：模糊与饱和度)。</p>
<pre><code class="language-css">filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
</code></pre>
<p><strong>注意:</strong></p>
<ul>
<li>滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。</li>
<li>可以使用多个滤镜，每个滤镜使用空格分隔。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">Filter</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值，没有效果。</td>
</tr>
<tr>
<td style="text-align: left">blur(<em>px</em>)</td>
<td style="text-align: left">给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</td>
</tr>
<tr>
<td style="text-align: left">brightness(<em>%</em>)</td>
<td style="text-align: left">给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</td>
</tr>
<tr>
<td style="text-align: left">contrast(<em>%</em>)</td>
<td style="text-align: left">调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</td>
</tr>
<tr>
<td style="text-align: left">drop-shadow(<em>h-shadow v-shadow blur spread color</em>)</td>
<td style="text-align: left">给图像设置一个阴影效果。</td>
</tr>
<tr>
<td style="text-align: left">grayscale(<em>%</em>)</td>
<td style="text-align: left">将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</td>
</tr>
<tr>
<td style="text-align: left">hue-rotate(<em>deg</em>)</td>
<td style="text-align: left">给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</td>
</tr>
<tr>
<td style="text-align: left">invert(<em>%</em>)</td>
<td style="text-align: left">反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。</td>
</tr>
<tr>
<td style="text-align: left">opacity(<em>%</em>)</td>
<td style="text-align: left">转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</td>
</tr>
<tr>
<td style="text-align: left">saturate(<em>%</em>)</td>
<td style="text-align: left">转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。</td>
</tr>
<tr>
<td style="text-align: left">sepia(<em>%</em>)</td>
<td style="text-align: left">将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</td>
</tr>
<tr>
<td style="text-align: left">url()</td>
<td style="text-align: left">URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：<code>filter: url(svg-url#element-id)</code></td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">设置属性为默认值，可参阅： CSS initial 关键字</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从父元素继承该属性，可参阅：CSS inherit 关键字</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">img {
-webkit-filter: contrast(200%) brightness(150%);/* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
</code></pre>
<h1 id="css3-弹性盒子flex-box">CSS3 弹性盒子(Flex Box)</h1>
<p><strong>弹性盒子</strong>是 CSS3 的一种新的布局模式。</p>
<p>CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。</p>
<p>引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。</p>
<h2 id="flex-container--flex-item">Flex container && Flex item</h2>
<p>弹性盒子由<strong>弹性容器(Flex container)</strong>和<strong>弹性子元素(Flex item)</strong>组成。</p>
<p>弹性容器通过设置 <strong>display</strong> 属性的值为 <strong>flex</strong> 或 <strong>inline-flex</strong> 将其定义为弹性容器。</p>
<p>弹性容器内包含了一个或多个弹性子元素。</p>
<p><strong>注意：</strong> 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。</p>
<p>弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>
</code></pre>
<h2 id="justify-content">justify-content</h2>
<p>justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。</p>
<pre><code class="language-css">justify-content: flex-start | flex-end | center | space-between | space-evenly | space-around;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">flex-start</td>
<td style="text-align: left">默认值。从行首起始位置开始排列</td>
</tr>
<tr>
<td style="text-align: left">flex-end</td>
<td style="text-align: left">从行尾位置开始排列</td>
</tr>
<tr>
<td style="text-align: left">center</td>
<td style="text-align: left">居中排列（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）</td>
</tr>
<tr>
<td style="text-align: left">space-between</td>
<td style="text-align: left">均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点（如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start）</td>
</tr>
<tr>
<td style="text-align: left">space-evenly</td>
<td style="text-align: left">均匀排列每个元素，每个元素之间的间隔相等</td>
</tr>
<tr>
<td style="text-align: left">space-around</td>
<td style="text-align: left">均匀排列每个元素，每个元素周围分配相同的空间（如果剩余空间为负或者只有一个弹性项，则该值等同于center）</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</code></pre>
<h2 id="align-items">align-items</h2>
<p><code>align-items</code> 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</p>
<p><strong>提示：</strong>使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。</p>
<pre><code class="language-css">align-items: flex-start | flex-end | center | baseline | stretch
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">stretch</td>
<td style="text-align: left">默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。</td>
</tr>
<tr>
<td style="text-align: left">flex-start</td>
<td style="text-align: left">元素位于容器的开头。</td>
</tr>
<tr>
<td style="text-align: left">flex-end</td>
<td style="text-align: left">元素位于容器的结尾。</td>
</tr>
<tr>
<td style="text-align: left">center</td>
<td style="text-align: left">元素位于容器的中心。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。</td>
</tr>
<tr>
<td style="text-align: left">baseline</td>
<td style="text-align: left">元素位于容器的基线上。如果弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</code></pre>
<h2 id="flex-flow">flex-flow</h2>
<p>flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。</p>
<p><strong>注意：</strong>如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。</p>
<pre><code class="language-css">flex-flow: flex-direction flex-wrap|initial|inherit;

/* 默认值：flex-flow: row nowrap */
</code></pre>
<h3 id="flex-direction">flex-direction</h3>
<p><code>flex-direction</code> 属性指定了弹性子元素在父容器中的位置。</p>
<pre><code class="language-css">flex-direction: row | row-reverse | column | column-reverse;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">row</td>
<td style="text-align: left">横向从左到右排列（左对齐），默认的排列方式</td>
</tr>
<tr>
<td style="text-align: left">row-reverse</td>
<td style="text-align: left">反转横向排列（右对齐，从后往前排，最后一项排在最前面）</td>
</tr>
<tr>
<td style="text-align: left">column</td>
<td style="text-align: left">纵向排列</td>
</tr>
<tr>
<td style="text-align: left">column-reverse</td>
<td style="text-align: left">反转纵向排列，从后往前排，最后一项排在最上面</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</code></pre>
<h3 id="flex-wrap">flex-wrap</h3>
<p><strong>flex-wrap</strong> 属性用于指定弹性盒子的子元素换行方式。</p>
<pre><code class="language-css">flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">nowrap</td>
<td style="text-align: left">默认值。规定灵活的项目不拆行或不拆列。</td>
</tr>
<tr>
<td style="text-align: left">wrap</td>
<td style="text-align: left">规定灵活的项目在必要的时候拆行或拆列。</td>
</tr>
<tr>
<td style="text-align: left">wrap-reverse</td>
<td style="text-align: left">规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
</code></pre>
<h2 id="align-content">align-content</h2>
<p><code>align-content</code> 属性用于修改 <code>flex-wrap</code> 属性的行为。类似于 <code>align-items</code>, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。</p>
<p><strong>注意：</strong>容器内必须有多行的项目，该属性才能渲染出效果。</p>
<pre><code class="language-css">align-content: flex-start | flex-end | center | space-between | space-around | stretch;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">stretch</td>
<td style="text-align: left">默认。各行将会伸展以占用剩余的空间。</td>
</tr>
<tr>
<td style="text-align: left">center</td>
<td style="text-align: left">各行向弹性盒容器的中间位置堆叠。</td>
</tr>
<tr>
<td style="text-align: left">flex-start</td>
<td style="text-align: left">各行向弹性盒容器的起始位置堆叠。</td>
</tr>
<tr>
<td style="text-align: left">flex-end</td>
<td style="text-align: left">各行向弹性盒容器的结束位置堆叠。</td>
</tr>
<tr>
<td style="text-align: left">space-between</td>
<td style="text-align: left">各行在弹性盒容器中平均分布。</td>
</tr>
<tr>
<td style="text-align: left">space-around</td>
<td style="text-align: left">各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
</code></pre>
<h2 id="order">order</h2>
<p>order 属性设置或检索弹性盒模型对象的子元素出现的順序。</p>
<p><strong>注意：</strong>如果元素不是弹性盒对象的元素，则 order 属性不起作用。</p>
<pre><code class="language-css">order: number;
</code></pre>
<p>用整数值来定义排列顺序，数值小的排在前面。可以为负值。</p>
<pre><code class="language-css">/*
<div class="flex-item first">flex item 2</div>
*/
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.first {
-webkit-order: -1;
order: -1;
}
</code></pre>
<h2 id="对齐-margin">对齐 margin</h2>
<p>设置"<strong>margin</strong>"值为"<strong>auto</strong>"值，自动获取弹性容器中剩余的空间。</p>
<p>所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都<strong>完全居中</strong>。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">Perfect centering!</div>
</div>

</body>
</html>
</code></pre>
<p>块元素垂直居中问题采用 flex 解决。</p>
<p>行内元素垂直居中问题解决如下：</p>
<p><strong>1）单行</strong></p>
<p>该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。</p>
<p><strong>2）多行</strong></p>
<p>设置该元素 css 属性：<strong>display: table-cell; vertical-align: middle;</strong>，还需设置该元素的父级元素 css 属性：<strong>display: table;</strong>。</p>
<h2 id="align-self">align-self</h2>
<p><code>align-self</code> 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。align-self 属性可重写灵活容器的 align-items 属性。</p>
<pre><code class="language-css">align-self: auto | flex-start | flex-end | center | baseline | stretch
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。</td>
</tr>
<tr>
<td style="text-align: left">flex-start</td>
<td style="text-align: left">弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。</td>
</tr>
<tr>
<td style="text-align: left">flex-end</td>
<td style="text-align: left">弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。</td>
</tr>
<tr>
<td style="text-align: left">center</td>
<td style="text-align: left">弹性盒子元素在该行的侧轴（纵轴）上居中放置。</td>
</tr>
<tr>
<td style="text-align: left">baseline</td>
<td style="text-align: left">如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</td>
</tr>
<tr>
<td style="text-align: left">stretch</td>
<td style="text-align: left">元素被拉伸以适应容器。</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}

.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}

.item3 {
-webkit-align-self: center;
align-self: center;
}

.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}

.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item item1">flex-start</div>
<div class="flex-item item2">flex-end</div>
<div class="flex-item item3">center</div>
<div class="flex-item item4">baseline</div>
<div class="flex-item item5">stretch</div>
</div>

</body>
</html>
</code></pre>
<h2 id="flex">flex</h2>
<p>flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。</p>
<p>flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。</p>
<p><strong>注意：</strong>如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。</p>
<pre><code class="language-css">flex: auto | initial | none | inherit |[ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>flex-grow</em></td>
<td style="text-align: left">一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。</td>
</tr>
<tr>
<td style="text-align: left"><em>flex-shrink</em></td>
<td style="text-align: left">一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。</td>
</tr>
<tr>
<td style="text-align: left"><em>flex-basis</em></td>
<td style="text-align: left">项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。</td>
</tr>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">与 1 1 auto 相同。</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">与 0 0 auto 相同。</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">设置该属性为它的默认值，即为 0 1 auto。请参阅 <em>initial</em>。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从父元素继承该属性。请参阅 <em>inherit</em>。</td>
</tr>
</tbody>
</table>
<h3 id="flex-grow">flex-grow</h3>
<p>flex-grow 属性用于设置或检索弹性盒子的扩展比率。</p>
<p><strong>注意：</strong>如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。</p>
<pre><code class="language-css">div {display: flex;}
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
</code></pre>
<h3 id="flex-shrink">flex-shrink</h3>
<p>flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。</p>
<p>flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。</p>
<p><strong>注意：</strong>如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#content {
display: flex;
width: 500px;
}

#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}

.box {
flex-shrink: 1;
}

.box1 {
flex-shrink: 2;
}
</style>
</head>
<body>

<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>
</code></pre>
<p>例子解析：flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。</p>
<p>本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2</p>
<p>我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么<strong>超出的 100px 需要被 A、B、C、D、E 根据收缩因子消化。</strong></p>
<p>于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：</p>
<p>A 被移除溢出量：100*(1/7)，即约等于14px<br>
B 被移除溢出量：100*(1/7)，即约等于14px<br>
C 被移除溢出量：100*(1/7)，即约等于14px<br>
D 被移除溢出量：100*(2/7)，即约等于28px<br>
E 被移除溢出量：100*(2/7)，即约等于28px</p>
<p>最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是<strong>包含边框</strong>的。</p>
<h3 id="flex-basis">flex-basis</h3>
<p>flex-basis 属性用于设置或检索弹性盒伸缩基准值。</p>
<pre><code class="language-css">flex-basis: number|auto|initial|inherit;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>number</em></td>
<td style="text-align: left">一个长度单位或者一个百分比，规定灵活项目的初始长度。</td>
</tr>
<tr>
<td style="text-align: left">auto</td>
<td style="text-align: left">默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">设置该属性为它的默认值。请参阅 <em>initial</em>。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从父元素继承该属性。请参阅 <em>inherit</em>。</td>
</tr>
</tbody>
</table>
<h1 id="css3-多媒体查询">CSS3 多媒体查询</h1>
<p>使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。</p>
<p>@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。</p>
<p>当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。</p>
<p><strong>语法：</strong></p>
<pre><code class="language-css">@media not|only mediatype and (media feature) {
CSS-Code;
}
</code></pre>
<p><strong>not:</strong> not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。<strong>only:</strong> 用来定某种特别的媒体类型。</p>
<p>多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。返回 true，文档会在匹配的设备上显示指定样式效果。</p>
<pre><code class="language-css">/* 当浏览器的宽度在520到699px或者宽度大于1151px,改变背景颜色为红色 */
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
div.example {background: red;}
}
</code></pre>
<p><strong>可以针对不同的媒体使用不同 <em>stylesheets</em> :</strong></p>
<pre><code class="language-css"><link rel="stylesheet" media="not|only mediatype and (media feature)" href="mystylesheet.css">
</code></pre>
<h2 id="媒体类型-mediatype">媒体类型 mediatype</h2>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">all</td>
<td style="text-align: left">用于所有设备</td>
</tr>
<tr>
<td style="text-align: left">print</td>
<td style="text-align: left">用于打印机和打印预览</td>
</tr>
<tr>
<td style="text-align: left">screen</td>
<td style="text-align: left">用于电脑屏幕，平板电脑，智能手机等。</td>
</tr>
<tr>
<td style="text-align: left">speech</td>
<td style="text-align: left">应用于屏幕阅读器等发声设备</td>
</tr>
</tbody>
</table>
<h2 id="媒体功能-media-feature">媒体功能 media feature</h2>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">width</td>
<td style="text-align: left">定义输出设备中的页面可见区域宽度。</td>
</tr>
<tr>
<td style="text-align: left">min-width</td>
<td style="text-align: left">定义输出设备中的页面最小可见区域宽度。</td>
</tr>
<tr>
<td style="text-align: left">max-width</td>
<td style="text-align: left">定义输出设备中的页面最大可见区域宽度。</td>
</tr>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">定义输出设备中的页面可见区域高度。</td>
</tr>
<tr>
<td style="text-align: left">min-height</td>
<td style="text-align: left">定义输出设备中的页面最小可见区域高度。</td>
</tr>
<tr>
<td style="text-align: left">max-height</td>
<td style="text-align: left">定义输出设备中的页面最大可见区域高度。</td>
</tr>
<tr>
<td style="text-align: left">device-width</td>
<td style="text-align: left">定义输出设备的屏幕可见宽度。</td>
</tr>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">定义输出设备中的页面可见区域高度。</td>
</tr>
<tr>
<td style="text-align: left">max-device-width</td>
<td style="text-align: left">定义输出设备的屏幕最大可见宽度。</td>
</tr>
<tr>
<td style="text-align: left">min-device-width</td>
<td style="text-align: left">定义输出设备的屏幕最小可见宽度。</td>
</tr>
<tr>
<td style="text-align: left">device-height</td>
<td style="text-align: left">定义输出设备的屏幕可见高度。</td>
</tr>
<tr>
<td style="text-align: left">min-device-height</td>
<td style="text-align: left">定义输出设备的屏幕的最小可见高度。</td>
</tr>
<tr>
<td style="text-align: left">max-device-height</td>
<td style="text-align: left">定义输出设备的屏幕可见的最大高度。</td>
</tr>
<tr>
<td style="text-align: left">orientation</td>
<td style="text-align: left">定义输出设备中的页面可见区域高度是否大于或等于宽度。</td>
</tr>
<tr>
<td style="text-align: left">device-aspect-ratio</td>
<td style="text-align: left">定义输出设备的屏幕可见宽度与高度的比率。</td>
</tr>
<tr>
<td style="text-align: left">min-device-aspect-ratio</td>
<td style="text-align: left">定义输出设备的屏幕可见宽度与高度的最小比率。</td>
</tr>
<tr>
<td style="text-align: left">max-device-aspect-ratio</td>
<td style="text-align: left">定义输出设备的屏幕可见宽度与高度的最大比率。</td>
</tr>
<tr>
<td style="text-align: left">aspect-ratio</td>
<td style="text-align: left">定义输出设备中的页面可见区域宽度与高度的比率</td>
</tr>
<tr>
<td style="text-align: left">min-aspect-ratio</td>
<td style="text-align: left">定义输出设备中的页面可见区域宽度与高度的最小比率。</td>
</tr>
<tr>
<td style="text-align: left">max-aspect-ratio</td>
<td style="text-align: left">定义输出设备中的页面可见区域宽度与高度的最大比率。</td>
</tr>
<tr>
<td style="text-align: left">color</td>
<td style="text-align: left">定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0</td>
</tr>
<tr>
<td style="text-align: left">min-color</td>
<td style="text-align: left">定义输出设备每一组彩色原件的最小个数。</td>
</tr>
<tr>
<td style="text-align: left">max-color</td>
<td style="text-align: left">定义输出设备每一组彩色原件的最大个数。</td>
</tr>
<tr>
<td style="text-align: left">color-index</td>
<td style="text-align: left">定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0</td>
</tr>
<tr>
<td style="text-align: left">min-color-index</td>
<td style="text-align: left">定义在输出设备的彩色查询表中的最小条目数。</td>
</tr>
<tr>
<td style="text-align: left">max-color-index</td>
<td style="text-align: left">定义在输出设备的彩色查询表中的最大条目数。</td>
</tr>
<tr>
<td style="text-align: left">resolution</td>
<td style="text-align: left">定义设备的分辨率。如：96dpi, 300dpi, 118dpcm</td>
</tr>
<tr>
<td style="text-align: left">min-resolution</td>
<td style="text-align: left">定义设备的最小分辨率。</td>
</tr>
<tr>
<td style="text-align: left">max-resolution</td>
<td style="text-align: left">定义设备的最大分辨率。</td>
</tr>
<tr>
<td style="text-align: left">monochrome</td>
<td style="text-align: left">定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</td>
</tr>
<tr>
<td style="text-align: left">min-monochrome</td>
<td style="text-align: left">定义在一个单色框架缓冲区中每像素包含的最小单色原件个数。</td>
</tr>
<tr>
<td style="text-align: left">max-monochrome</td>
<td style="text-align: left">定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。</td>
</tr>
<tr>
<td style="text-align: left">scan</td>
<td style="text-align: left">定义电视类设备的扫描工序。</td>
</tr>
</tbody>
</table>
<pre><code class="language-css">/*
<h2>响应式判断</h2>
<p class="example">操作浏览器窗口，查看效果。</p>
*/
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</code></pre>
<p><strong>注意：</strong>为元素设置css样式的属性，假如与媒体查询中设置的媒体样式是相同的属性时。那么需要注意，<strong>元素的css样式要写在媒体查询上面，否则css样式会覆盖媒体样式，使其失效。</strong></p>
<h1 id="css-网格布局">CSS 网格布局</h1>
<p>CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。</p>
<h2 id="css-网格容器">CSS 网格容器</h2>
<p>要使 HTML 元素变成一个网格容器，可以将 <strong>display</strong> 属性设置为 <strong>grid</strong> 或 <strong>inline-grid</strong>。这个元素的<strong>所有直系子元素</strong>将成为网格元素。</p>
<ul>
<li>使用 display: grid; 来设置网格容器的块级元素。</li>
<li>使用 display: inline-grid; 来设置内联的网格容器。</li>
</ul>
<h3 id="grid-template-columns">grid-template-columns</h3>
<p>grid-template-columns 属性用于设置网格布局中的列数及宽度。属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。</p>
<pre><code class="language-css">grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值，不指定列的大小。</td>
</tr>
<tr>
<td style="text-align: left"><em>auto</em></td>
<td style="text-align: left">列的大小由容器的大小和列中网格元素内容的大小决定。</td>
</tr>
<tr>
<td style="text-align: left"><em>max-content</em></td>
<td style="text-align: left">每列的大小设置为该列中最大网格元素的大小。</td>
</tr>
<tr>
<td style="text-align: left"><em>min-content</em></td>
<td style="text-align: left">每列的大小设置为该列中最小网格元素的大小。</td>
</tr>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">将此属性设置为默认值。 <em>阅读关于 initial</em></td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从父元素继承该属性。 <em>阅读关于 inherit</em></td>
</tr>
</tbody>
</table>
<p>如果您希望网格布局包含 4 列，则需要设置 4 列的宽度，如果所有列的宽度都是一样的，可以设置为 <strong>auto</strong>。</p>
<pre><code class="language-css">.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
</code></pre>
<p><strong>注意：</strong>如果您在 4 列网格中有 4 个以上的网格元素，网格布局会生成新的一行放置该元素。</p>
<pre><code class="language-css">.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px; /* 声明4列并且指定了列的宽度 */
}
</code></pre>
<p>网格引入了 <strong>fr</strong> 单位来帮助我们创建灵活的网格轨道（一个网格轨道就是网格中任意两条线之间的空间）。一个 fr 单位代表网格容器中可用空间的一等份。</p>
<pre><code class="language-css">.grid-container {
display: grid;
/*定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩*/
grid-template-columns: 1fr 1fr 1fr;
}
</code></pre>
<h3 id="grid-template-rows">grid-template-rows</h3>
<p>grid-template-rows 属性用于设置网格布局中的行数及高度。这些值是一个以空格分隔的列表，其中每个值指定相应行的高度。</p>
<pre><code class="language-css">grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
</code></pre>
<h3 id="grid-template-areas">grid-template-areas</h3>
<p>grid-template-areas 属性用于设置网格布局。</p>
<p>grid-area 属性可以对网格元素进行命名。</p>
<p>命名的网格元素可以通过容器的 grid-template-areas 属性来引用。</p>
<p><strong>每行由单引号内 <code>' '</code> 定义，以空格分隔。</strong></p>
<p><strong><code>.</code> 号表示没有名称的网格项。</strong></p>
<pre><code class="language-css">.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
</code></pre>
<h3 id="justify-content-1">justify-content</h3>
<p>justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。</p>
<p><strong>注意：</strong>网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。</p>
<pre><code class="language-css">justify-content: start|end|center|space-between|spance-evenly|space-around|initial|inherit;
</code></pre>
<pre><code class="language-css">.grid-container {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /* 设置网格宽度小于容器宽度 */
}
</code></pre>
<h3 id="align-content-1">align-content</h3>
<p><strong>align-content</strong> 属性用于设置垂直方向上的网格元素在容器中的对齐方式。</p>
<p><strong>注意：</strong>网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。</p>
<pre><code class="language-css">align-content: start|end|center|space-between|space-evenly|space-around;
</code></pre>
<pre><code class="language-css">.grid-container {
display: grid;
height: 400px;
align-content: center;
}
</code></pre>
<h3 id="gap">gap</h3>
<p>gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。</p>
<pre><code class="language-css">gap: row-gap column-gap;
</code></pre>
<pre><code class="language-css">/*设置行间距为 50px，列间距为 50px*/
.grid-container {
gap: 50px;
}
/*设置行间距为 20px，列间距为 50px*/
.grid-container {
gap: 20px 50px;
}
</code></pre>
<h4 id="row-gap">row-gap</h4>
<p>row-gap 的属性指定的行之间的间隙大小。</p>
<pre><code class="language-css">row-gap: length|normal|initial|inherit;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>length</em></td>
<td style="text-align: left">一个指定的长度，将设置行之间的差距</td>
</tr>
<tr>
<td style="text-align: left">normal</td>
<td style="text-align: left">默认值。指定行之间的正常间隙</td>
</tr>
<tr>
<td style="text-align: left">initial</td>
<td style="text-align: left">将此属性设置为其默认值。阅读关于 initial</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">从其父元素继承此属性。阅读关于 inherit</td>
</tr>
</tbody>
</table>
<h4 id="column-gap-1">column-gap</h4>
<p>column-gap 的属性指定的列之间的间隙。</p>
<pre><code class="language-css">column-gap: length|normal;
</code></pre>
<h3 id="grid-auto-flow">grid-auto-flow</h3>
<p>grid-auto-flow 属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。</p>
<pre><code class="language-css">grid-auto-flow: row|column|dense|row dense|column dense;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>row</em></td>
<td style="text-align: left">默认值。通过填充每一行来放置网格元素，在必要时增加新列。</td>
</tr>
<tr>
<td style="text-align: left">column</td>
<td style="text-align: left">通过填充每一列来放置网格元素，在必要时增加新列。</td>
</tr>
<tr>
<td style="text-align: left">dense</td>
<td style="text-align: left">该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。</td>
</tr>
<tr>
<td style="text-align: left">row dense</td>
<td style="text-align: left">按行来填充网格中前面留下的空白</td>
</tr>
<tr>
<td style="text-align: left">column dense</td>
<td style="text-align: left">按列来填充网格中前面留下的空白</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.item3 { grid-column: auto / span 2; }

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>

<p>"item3" 跨越两列, 哪个元素填充前面的空白?</p>
<h2>grid-auto-flow: column dense</h2>
<div class="grid-container" style="grid-auto-flow:column dense;">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<h2>grid-auto-flow: row dense</h2>
<div class="grid-container" style="grid-auto-flow: row dense;">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>

</body>
</html>
</code></pre>
<h3 id="grid-auto-rows">grid-auto-rows</h3>
<p>grid-auto-rows 属性用于设置网格容器中行的默认大小。</p>
<p>此属性仅影响未设置大小的行。</p>
<pre><code class="language-css">grid-auto-rows: auto|max-content|min-content|length;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">描述</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>auto</em></td>
<td>默认值。列的大小由容器的大小决定</td>
</tr>
<tr>
<td style="text-align: left">max-content</td>
<td>根据列中最大的网格元素设置每列的大小</td>
</tr>
<tr>
<td style="text-align: left">min-content</td>
<td>根据列中的最小的网格元素设置每列的大小</td>
</tr>
<tr>
<td style="text-align: left">length</td>
<td>使用自定义的长度值设置列的大小。阅读关于长度单位内容</td>
</tr>
</tbody>
</table>
<h3 id="grid-auto-columns">grid-auto-columns</h3>
<p>grid-auto-columns 属性用于设置网格容器中列的默认大小。</p>
<p>此属性仅影响未设置大小的列。</p>
<pre><code class="language-css">grid-auto-columns: auto|max-content|min-content|length;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>auto</em></td>
<td style="text-align: left">默认值。列的大小由容器的大小决定</td>
</tr>
<tr>
<td style="text-align: left">fit-content()</td>
<td style="text-align: left">相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))</td>
</tr>
<tr>
<td style="text-align: left">max-content</td>
<td style="text-align: left">根据列中最大的网格元素设置每列的大小</td>
</tr>
<tr>
<td style="text-align: left">min-content</td>
<td style="text-align: left">根据列中的最小的网格元素设置每列的大小</td>
</tr>
<tr>
<td style="text-align: left">minmax(min.max)</td>
<td style="text-align: left">设置大于等于 min 且小于等于 max</td>
</tr>
<tr>
<td style="text-align: left">length</td>
<td style="text-align: left">使用自定义的长度值设置列的大小。阅读关于长度单位内容</td>
</tr>
<tr>
<td style="text-align: left">%</td>
<td style="text-align: left">使用百分比值设置列的大小</td>
</tr>
</tbody>
</table>
<h3 id="grid-template">grid-template</h3>
<p>grid-template 属性用于网格布局，设置网格中行、列与分区。</p>
<p>grid-template 是以下属性的简写形式：</p>
<ul>
<li>grid-template-rows</li>
<li>grid-template-columns</li>
<li>grid-template-areas</li>
</ul>
<pre><code class="language-css">grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
</code></pre>
<pre><code class="language-css">/*制作一个三列网格布局，其中第一行高 150 像素*/
.grid-container {
display: grid;
grid-template: 150px / auto auto auto;
}
</code></pre>
<h3 id="grid">grid</h3>
<p>grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：</p>
<ul>
<li>显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。</li>
<li>隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。</li>
<li>间距属性： grid-column-gap 和 grid-row-gap。</li>
</ul>
<h2 id="css-网格元素">CSS 网格元素</h2>
<p>网格容器包含了一个或多个网格元素。默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。</p>
<h2 id="网格线">网格线</h2>
<p>列与列，行与行之间的交接处就是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。</p>
<img src="https://img2022.cnblogs.com/blog/2024073/202202/2024073-20220203010751276-1945993274.png" alt="image-20220203010749631" style="zoom: 50%">
<h3 id="grid-column">grid-column</h3>
<p>grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。</p>
<p>grid-column 属性定义了网格元素列的开始和结束位置。</p>
<pre><code class="language-css">grid-column: grid-column-start / grid-column-end;
</code></pre>
<pre><code class="language-css">/* 设置 "item1" 在第 1 列开始，在第 5 列前结束 */
.item1 {
grid-column: 1 / 5;
}
/* 设置 "item1" 在第 1 列开始，跨越 3 列*/
.item1 {
grid-column: 1 / span 3;
}
</code></pre>
<h4 id="grid-column-start">grid-column-start</h4>
<p>grid-column-start 属性定义了网格元素从哪一列开始。</p>
<pre><code class="language-css">grid-column-start: auto|span n|column-line;
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><em>auto</em></td>
<td style="text-align: left">默认值，网格元素按流设置。</td>
</tr>
<tr>
<td style="text-align: left"><em>span n</em></td>
<td style="text-align: left">指定网格元素将跨越的列数。</td>
</tr>
<tr>
<td style="text-align: left"><em>column-line</em></td>
<td style="text-align: left">指定从哪个列上开始显示网格元素。</td>
</tr>
</tbody>
</table>
<h4 id="grid-column-end">grid-column-end</h4>
<p>grid-column-end 属性定义了网格元素跨越多少列，或者在哪一列结束。</p>
<pre><code class="language-css">grid-column-end: auto|span n|column-line;
</code></pre>
<h3 id="grid-row">grid-row</h3>
<p>grid-row 属性定义了网格元素行的开始和结束位置。</p>
<p>grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。</p>
<pre><code class="language-css">grid-row: grid-row-start / grid-row-end;
</code></pre>
<h4 id="grid-row-start">grid-row-start</h4>
<p>grid-row-start 属性指定哪一行开始显示网格元素。</p>
<pre><code class="language-css">grid-row-start: auto|row-line|span n;
</code></pre>
<h4 id="grid-row-end">grid-row-end</h4>
<p>grid-row-end 属性指定哪一行停止显示网格元素，或设置跨越多少行。</p>
<pre><code class="language-css">grid-row-end: auto|row-line|span n;
</code></pre>
<h3 id="grid-area">grid-area</h3>
<p>grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。</p>
<pre><code class="language-css">grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
</code></pre>
<pre><code class="language-css">/*设置 "item8" 从第 1 行开始和第 2 列开始，第 5 行和第 6 列结束*/
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
</code></pre>
<p>grid-area 属性也可以对网格元素进行命名。命名的网格元素可以通过容器的 grid-template-areas 属性来引用。</p>
<pre><code class="language-css">/*item1 命名为 "myArea", 并跨越2列*/
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
</code></pre>
<h2 id="响应式网格布局">响应式网格布局</h2>
<p>使用媒体查询，重新排列在指定屏幕尺寸下的顺序</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
</head>
<body>

<h1>不同设备上不同布局</h1>

<p>重置浏览器大小，查看效果。</p>

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>

</body>
</html>
</code></pre>

</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：hzyuan，转载请注明原文链接：https://www.cnblogs.com/hzyuan/p/15861118.html</p><br><br>
来源：https://www.cnblogs.com/hzyuan/p/15861118.html

頁: [1]

琼殿技术论坛's Archiver

【css】css语法学习笔记