一、简介
参考CSS 教程和CSS 参考手册，对里面内容进行了优化与总结。
若设置属性后在浏览器中没有作用，可能需要添加前缀。
适配IE: -ms-。
适配Safari、Chrome: -webkit-。
适配火狐: -moz-。
适配opera: -o-。
二、选择器
标签选择器
直接对同标签的所有元素生效。使用方式：div {}。id选择器
对相同id的元素生效。
使用方式：#test {}；如只针对某一种元素，则需在前加上标签名，如：p#test {}。class选择器
对相同类名的元素生效。
使用方式：.testClass {}；如只针对某一种元素，则需在前加上标签名，如：p.testClass {}。内联样式
只对该元素生效。
使用方式：<p style="color: red">Hello World!</p>
<body>
<div>Hello World!</div>
<div id="test">Hello World!</div>
<p id="test">Hello World!</p>
<p class="testClass">Hello World!</p>
<!-- 只对该元素生效 -->
<p style="color: red">Hello World!</p>
</body>
<style type="text/css">
/* 对所有div生效 */
div {
color: #ff0000;
}
/* 对id="test"的p生效 */
p#test {
color: #0000FF;
}
/* 对class="testClass"的元素生效 */
.testClass {
color: #FFFF00;
}
</style>
注意：
不论是id或class，第一位最好不要是数字。
多种选择器可同时起作用。
优先级：内联样式 > id 选择器 > class选择器 = 伪类选择器 = 属性选择器 > 标签选择器。若为相同权限选择器，后出优先级大于先出。
!important声明，强制某条语句为最高优先级。如p { color: red !important; }，表示p的字体颜色红色为最高优先。该声明建议少用。
对多种元素同时生效，用逗号分割。如p,div {}表示对所有p和div元素生效。
其他常用选择器
后代选择器
对该元素的后代元素(不论是子类还是孙子类)生效。
使用方式：div p {}，表示对div中的所有元素p生效；也可使用上面的形式，如：#div1 #p1 {}，表示对id="div1"的元素中的所有id="p1"的后代元素生效。属性选择器
对所有某属性等于某值的元素生效。
使用方式：a[target=_blank]，表示对所有target="_blank"的a元素生效。也可写成a[target] {}，表示对所有设置了target属性的a元素生效。
<body>
<div><p>Hello World!</p></div>
<div id="div1">
<p id="p1">Hello World!</p>
</div>
<a target="_blank">Hello World!</a>
<a target="_self">Hello World!</a>
</body>
<style type="text/css">
/* 对div中的所有p元素生效 */
div p {
color: aqua;
}
/* 对id="div1"的元素的所有id="p1"的元素生效 */
#div1 #p1 {
color: antiquewhite;
}
/* 对所有target="_blank"的a元素生效 */
a[target=_blank] {
color: #FFFF00;
}
/* 对所有设置了target属性的元素生效 */
[target] {
color: #0000FF;
}
</style>
更多选择器查看 CSS 参考手册 - 选择器。
三、背景
背景 background
语法顺序为background:background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment。
若只想显示图像中某一部分，详见图像拼合技术。
设置多重背景，每个值用逗号隔开。如background-image: url(""), url("");，下面的属性除了background-color都支持这种写法。背景颜色 background-color
属性可用值：
color颜色。
transparent透明色，默认值。
inherit继承父类。
color类型：
#FF000016进制颜色，分别为红绿蓝，范围为00-FF。
rgb(255, 0, 0)RGB颜色，分别红绿蓝，范围为0-255。
rgba(255, 0, 0, 1)RGBA颜色，分别红绿蓝和透明度，透明度范围为0-1。
hsl(120,100%,100%)HSL颜色，分别色相、饱和度、亮度。
色相范围为0-360，0（或360）是红色，120是绿色，240是蓝色；饱和度范围为0%-100%，0％为灰色，100％为全彩；亮度范围为0%-100%，0％是黑色，100％是白色。
hsla(120,100%,100%,1)HSLA颜色，分别色相、饱和度、亮度、透明度，透明度范围为0-1。
red预定义颜色。查看颜色参考 CSS 参考手册 - 颜色名称。
背景图像 background-image
默认情况下，图像放置在元素的左上角，并重复垂直和水平方向平铺。
请同时设置一种background-color，假如background-image不可用，也可以使用背景颜色代替。
属性可用值：
url("")url地址，可使用绝对或相对路径。
none无图像，默认值。
linear-gradient()创建一个线性渐变的背景色，从上到下。参考 CSS 参考手册 - 函数。
radial-gradient()创建一个径向渐变的背景色，从中心到边缘。
repeating-linear-gradient()创建重复的线性渐变的背景色。
repeating-radial-gradient()创建重复的径向渐变的背景色。
inherit继承父类。背景图像的起始位置 background-position
需要设置background-repeat:no-repeat，该属性才有效。默认情况起始位置是在元素的左上角。
background-attachment: fixed时该属性不生效。
属性可用值：
left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom若只指定一个值，则第二个值默认为center。
10% 10%第一个值是水平位置，第二个值是垂直位置，默认值为0% 0%。
左上为0% 0%，右下为100% 100%，若只指定一个值，则第二个值默认为50%。
10px 10px第一个值是水平位置，第二个值是垂直位置。若只指定一个值，则第二个值默认为50%。可以混用，如0px 50%。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。背景图像的大小 background-size
默认为图像原始大小。
属性可用值：
10px 10px分别为宽度和高度。如果只指定一个值，第二个为auto(自动)。可使用其他单位，参考 CSS 参考手册 - 单位。
100% 100%相对于元素的宽高。100% 100%表示宽高与元素相同，如果只指定一个值，第二个为auto(自动)。
contain保持原有尺寸比例，内容被缩放。
cover保持原有尺寸比例，但部分内容可能被剪切。背景图像的平铺方式 background-repeat
默认情况下，图像在水平和垂直方向平铺。
属性可用值：
repeat背景图像将向垂直和水平方向重复，默认值。
repeat-x只在水平方向重复平铺。
repeat-y只在垂直方向重复平铺。
no-repeat不会重复，只显示一次，此时可用background-position调整图像的位置。
inherit继承父类。背景图像的定位区域 background-origin
设置background-position定位时的参考点。默认为填充框，即background-position:0% 0%时图像位于填充框外边左上角。
属性可用值：
border-box相对于元素边界框。
padding-box相对于元素填充框，默认值。
content-box相对于元素内容框。背景的绘画区域 background-clip
该属性对background-color和background-image都生效。background-origin只对background-image生效。
属性可用值：
border-box相对于元素边界框，默认值。
padding-box相对于元素填充框。
content-box相对于元素内容框。背景图像的固定方式 background-attachment
属性可用值：
scroll背景图像会随页面的滚动而滚动，默认值。
fixed背景图像不会随着页面的滚动而滚动。
local背景图像会随元素内容的滚动而滚动。
initial重置为默认值，即scroll。
inherit继承父类。
<body>
<div class="bg">Hello World!</div>
<div class="scroll">Hello World!</div>
</body>
<style type="text/css">
.bg {
/* 背景颜色 */
background-color: orange;
/* 背景图像 */
background-image: url(../123.jpg);
/* 背景图像位置,需要background-repeat: no-repeat */
background-position: center;
/* 背景图像大小 contain为长边等于元素 */
background-size: contain;
/* 背景图像平铺方式 */
background-repeat: no-repeat;
/* 背景图像定位区域 content-box为相对于内容框 */
background-origin:content-box;
/* 背景绘画区域 padding-box为相对于填充框 */
background-clip: padding-box;
/* 背景图像的固定方式 scroll为跟随界面滚动 */
background-attachment: scroll;
/* 边距与填充 */
margin: 20px;
padding: 20px;
height: 500px;
/* 边框设置 */
border-width: 10px;
border-style: dotted;
border-color: #0000FF;
}
.scroll {
height: 1000px;
}
</style>
四、文本
文本颜色 color
属性可用值：参考 背景颜色 background-color。文本方向 direction
默认为从左到右。若文本结尾有标点，ltr时标点会放置在右边，rtl时标点会放置在左边。
属性可用值：
ltr从左到右，默认值。即left to right。
rtl从右到左。
inherit继承父类。文本的字符间距 letter-spacing
属性可用值：
normal字符间没有额外的空间，默认值。
10px固定值，允许使用负值。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。文本高度 line-height
指的是每行文本的高度。若要设置整个元素的高度，请使用height。
单行文本时，同时设置line-height与height并且两值相等，可让文本垂直居中显示。
属性可用值：
normal合理的高度值，默认值。
1数字，font-size的倍率，font-size默认为16px，2则表示32px。
20px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
100%百分比。100%相当于1。
inherit继承父类。文本的水平对齐方式 text-align
若direction: ltr，则默认值为left；若direction: rtl，则默认值为right。
属性可用值：
left文本靠左。
right文本靠右。
center文本居中。
justify文本两端对齐。
inherit继承父类。元素的垂直对齐方式 vertical-align
属性可用值：
baseline元素放置在父元素的基线上，默认值。
sub元素对齐父元素文本的下标。
super元素对齐父元素文本的上标。
top元素的顶端与行中最高元素的顶端对齐。
text-top元素的项端与父元素字体的顶端对齐。
middle元素放置在父元素的中部。
bottom元素的底端与行中最低元素的底端对齐。
text-bottom元素的底端与父元素字体的底端对齐。
10px将元素升高或降低一个固定值，可以是负数。
100%将元素升高或降低一个line-height的百分比的值，可以是负数。
inherit继承父类。文本的修饰线 text-decoration
设置文本修饰属性。
语法顺序：text-decoration: text-decoration-line text-decoration-style text-decoration-color。
文本的修饰线类型 text-decoration-line
大多数浏览器不支持单独使用，仅用做text-decoration的第一个参数。
属性可用值：
none没有线条，默认值。
underline下划线。
overline上划线。
line-through中划线。
initial重置为默认值，即none。
inherit继承父类。
可以同时使用多个值，text-decoration: underline overline表示同时有上划线和下划线。文本的修饰线样式 text-decoration-style
大多数浏览器不支持单独使用，仅用做text-decoration的第二个参数。
属性可用值：
solid单线，默认值。
double双线。
dotted点状线。为.......。
dashed虚线。为_ _ _。
wavy线条将显示为波浪线。
initial重置为默认值，即solid。
inherit继承父类。文本的修饰线颜色 text-decoration-color
大多数浏览器不支持单独使用，仅用做text-decoration的第三个参数。
属性可用值：
color参考 背景颜色 background-color。
initial重置为默认值，即transparent。
inherit继承父类。
文本的首行缩进 text-indent
就像中文首行时前面要空两个字。
属性可用值：
10px固定值，可为负数。默认值：0px。可使用其他单位，参考 CSS 参考手册 - 单位。
10%相对于父元素宽度的百分比。
inherit继承父类。文本阴影 text-shadow
若要设置元素的阴影，请使用box-shadow。
语法顺序：text-shadow: h-shadow v-shadow blur color
- h-shadow 水平阴影的位置
10px必须值，允许负值。 可使用其他单位，参考 CSS 参考手册 - 单位。 - v-shadow 垂直阴影的位置
10px必须值，允许负值。 - blur 模糊的距离
10px可选值。 - color 阴影的颜色
#FF0000可选值 。参考 背景颜色 background-color。
文本大小写 text-transform
属性可用值：
none可同时有大写与小写，默认值。
capitalize每个单词以大写字母开头。
uppercase全部大写。
lowercase全部小写。
inherit继承父类。文本重写 unicode-bidi
需要与direction一起使用，来设置文本是否重写。
查看示例。
属性可用值：
normal不使用附加的嵌入层面。默认值。
embed创建一个附加的嵌入层面。
bidi-override创建一个附加的嵌入层面。重新排序取决于direction属性。
initial重置为默认值，即normal。
inherit继承父类。文本的空格处理 white-space
默认情况下，多个空格只会保留一个，回车也被看成一个空格。
属性可用值：
normal默认值。
pre多个空格和回车会被保留，但不会自动换行。其行为类似<pre>标签。
pre-wrap多个空格和回车会被保留，但会自动换行。
nowrap多个空格和回车视为一个空格，不会自动换行，遇到<br>才会换行。
pre-line多个空格视为一个空格，回车会换行。也会自动换行。
inherit继承父类。文本的段落间距 word-spacing
letter-spacing指每个汉字间或字母间的间距。该属性指每个单词间或一段汉字间的间距。
属性可用值：
normal标准空间，默认值。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。文本溢出 text-overflow
文本宽度大于元素宽度时如何处理溢出文本。
属性可用值：
clip裁剪溢出的文本，默认值。
ellipsis使用省略符号来替代被裁剪的文本。
" "使用给定的字符串来替代被裁剪的文本。长单词的换行 word-wrap
当一个单词过长，大于元素宽度，默认情况下，单词出溢出元素显示。可设置成break-word强制换行。
属性可用值：
normal只在允许的断字点(如空格)换行，默认值。
break-word在长单词或URL地址内部进行换行。单词的换行 word-break
默认情况下，当行尾的单词过长导致溢出元素时，该单词会放在下一行的前面，上一行后面则显示空格。设置为break-all则会强制显示在第一行，超出元素宽度的部分字母则会放在下一行。
normal浏览器默认的换行规则，默认值。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处(如_ -)换行。文本的水平对齐 text-align-last
text-align对文本的所有行都生效，该属性只对文本的最后一行有效。
需要设置text-align: justify该属性才有效。
属性可用值：
auto自动对齐，默认值。
left文本靠左。
right文本靠右。
center文本居中。
justify文本两端对齐。
start若text-direction: ltr，则向左对齐；若text-direction: rtl，则向右对齐。
end与start相反。
initial重置为默认值，即auto。
inherit继承父类。文本的排布方式 writing-mode
查看示例。
属性可用值：
horizontal-tb水平方向自上而下的书写方式。即从左到右，从上到下，默认值。
vertical-lr垂直方向自左向右的书写方式。即从上到下，从左到右。
vertical-rl垂直方向自右向左的书写方式。即从上到下，从右到左。
sideways-rl内容垂直方向从上到下排列。
sideways-lr内容垂直方向从下到上排列。
<body>
<!-- 文本颜色 -->
<div style="color: red;">color</div>
<!-- 文本方向 当文本最后有标点时，rtl标点会显示在左边 -->
<div style="direction: rtl;">direction!</div>
<!-- 文本重写 文本书写方式也会从右向左-->
<div style="direction: rtl; unicode-bidi: bidi-override;">unicode-bidi!</div>
<!-- 文本的字符间隔 -->
<div style="letter-spacing: 10px;">letter-spacing</div>
<!-- 文本每行的高度 -->
<div style="background-color: #00FFFF;line-height: 2;">
line-height<br/>line-height
</div>
<!-- 文本的对齐方式 -->
<div style="text-align: left;">
text-align text-align text-align text-align text-align text-align text-align text-align
</div>
<!-- 文本的对齐方式 justify时会将每个单词的间隔均分-->
<div style="text-align: justify;">
text-align text-align text-align text-align text-align text-align text-align text-align
</div>
<!-- 文本修饰 下划线和上划线 -->
<div style="text-decoration: underline overline;">text-decoration</div>
<!-- 文本缩进 第一行距左100px -->
<div style="text-indent: 100px;">text-indent</div>
<!-- 文本阴影 -->
<div style="text-shadow: 2px 2px 1px red;">text-shadow</div>
<!-- 文本大小写方式 capitalize表示所有单词的首字母大写-->
<div style="text-transform: capitalize;">text transform</div>
<!-- 元素垂直对齐方式 text-top表示元素的项部与文字顶部对齐-->
<div style="background-color: #00FFFF;">
一个
<span style="font-size: 30px;background-color: red; vertical-align: text-top;">vertical-align</span>
默认对齐的图像。</div>
<!-- 对空格回车的处理 pre表示保留空格与回车换行-->
<div style="white-space: pre">white-space white-space white-space
white-space white-space
</div>
<!-- 文本的段落间距 -->
<div style="word-spacing: 20px">
测试 测试 测试 test test
</div>
<!-- 单词宽度大于元素宽度 则强制换行 -->
<div style="word-wrap:break-word;width: 100px;border: 1px solid red;">aaaaaaaaaaaaaaaa</div>
<!-- 行尾单词溢出元素时 强制使单词换行 -->
<div style="word-break:break-all;width: 100px;border: 1px solid red;">hello hello hello hello</div>
<!-- 最后一行右对齐 -->
<div style="width: 150px;text-align: justify;text-align-last: right;">最后一行右对齐最后一行右对齐</div>
</body>
五、文本字体
font语法顺序为 font: font-style font-variant font-weight font-size/line-height font-family
font-size和font-family是必须值。
若要使用本地字体，参考 CSS 参考手册 - @font-face。
- 字体样式 font-style
属性可用值：
normal标准的字体样式，默认值。
italic斜体的字体样式。
oblique倾斜的字体样式。
inherit继承父类。
关于italic和oblique
一些不常用的字体，可能就只有标准样式，如果使用italic，就没有效果。
可以理解成italic是使用文字的斜体，oblique是让没有斜体的文字倾斜！
字体变体 font-variant
该属性只对小写字母有作用。small-caps会将小写字母转换成大写字母，但尺寸比正常的大写字母小。
属性可用值：
normal标准的字体，默认值。
small-caps小型大写字母的字体。
inherit继承父类。字体宽度 font-weight
即字体的粗细。
属性可用值：
normal标准宽度的字符，默认值。
bold粗体字符。
bolder更粗的字符。
lighter更细的字符。
100-900从细到粗的字符。400为normal，而700为bold。
inherit继承父类。字体大小 font-size
属性可用值：
xx-small、x-small、small、medium、large、x-large、xx-large从++小到++大。默认为medium，即16px。
smaller比父元素更小的尺寸。
larger比父元素更大的尺寸。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
100%默认字体大小的百分比值。相当于16px * 100%
inherit继承父类。字体名称 font-family
可设置多种字体，用逗号隔开。若前面的字体不能使用，则自动使用后面的字体。请保证有一定能使用的字体，可查看 CSS 参考手册 - Web安全字体。
若字体是一个单词，可以不加引号；若为几个单词，必须加引号。
<!-- 字体样式 italic为斜体 -->
<div style="font-style: italic;">italic</div>
<!-- 字体变体-->
<div style="font-variant: normal;">测试 italic ABC</div>
<div style="font-variant: small-caps;">测试 italic ABC</div>
<!-- 字体粗细 700相当于bold -->
<div style="font-weight: 700;">font-weight</div>
<!-- 字体尺寸 默认为16px 2em相当于16*2 -->
<div style="font-size: 16px;">font-size</div>
<div style="font-size: 2em;">font-size</div>
<!-- 字体名称 -->
<div style="font-family: 'arial black';">font-family</div>
六、列表和表格
ul 无序列表 列表前面标记有特殊图形（如小黑点、小方框等）。
ol 有序列表 列表前面标记有数字或字母。
- 列表样式 list-style
语法顺序为list-style: list-style-type list-style-position list-style-image
列表项的标记类型 list-style-type
查看示例。
属性可用值：
none无标记。
ul可用
disc标记是实心圆，默认值。
circle标记是空心圆。
square标记是实心方块。
ol可用
decimal标记是数字，默认值。
decimal-leading-zero0开头的数字标记。(01, 02, 03)。
lower-roman小写罗马数字(i, ii, iii, iv, v)。
upper-roman大写罗马数字(I, II, III, IV, V)。
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e)。
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E)。
lower-greek小写希腊字母(alpha, beta, gamma,)。
lower-latin小写拉丁字母(a, b, c, d, e,)。
upper-latin大写拉丁字母(A, B, C, D, E)。
hebrew传统的希伯来编号方式。
armenian传统的亚美尼亚编号方式。
georgian传统的乔治亚编号方式(an, ban, gan)。
cjk-ideographic简单的表意数字。
hiragana日文平假名字符（：a, i, u, e, o, ka, ki）。
katakana日文片假名字符（标记是：A, I, U, E, O, KA, KI）。
hiragana-iroha日文平假名序号（i, ro, ha, ni, ho, he, to）。
katakana-iroha日文片假名序号（I, RO, HA, NI, HO, HE, TO）。-
列表项标记的位置 list-style-position
属性可用值：
inside标记放置在文本内部。
outside标记放置在文本左侧，默认值。
inherit继承父类。
列表项的标记图像 list-style-image
若url不可用，当相于none。
属性可用值：
url("")图像的路径。
none无图像，默认值。
inherit继承父类。
也可设置list-style-type: none，给<li>添加background-image来设置未提供的标记。
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(xxx.png);
background-repeat:no-repeat;
padding-left:14px;
}
-
表格边框折叠 border-collapse
默认情况下，表格和单元格有单独的边框，所以显示两条边框。设为collapse后两条会合并成一条。
属性可用值：
collapse合并为单一的边框。会忽略border-spacing和empty-cells属性。
separate边框会被分开，默认值。
inherit继承父类。
默认
collapse时 表格边框间距 border-spacing
表格边框与单元格边框的间距，若border-collapse: collapse则无效。
属性可用值：
0px 0px前面为水平间距，后面为垂直间距。只设置一个值时，水平间距与垂直间距相同。
inherit继承父类。表格标题位置 caption-side
属性可用值：
top表格上方，默认值。
bottom表格下方。
inherit继承父类。空单元格 empty-cells
属性可用值：
hide空单元格隐藏边框。
show空单元格显示边框，默认值。
inherit继承父类。表格布局算法 table-layout
默认情况下，是根据单元格内容计算每列的宽度，从而得出表格的宽度。
设置为fixed后，则使用width属性来设定每列宽度和表格宽度，如<td width="50%">、<table width="100%">。
属性可用值：
automatic每列宽度由单元格内容设定，默认值。
fixed每列宽度由表格宽度和列宽度设定。
inherit继承父类。
<body>
<table class="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table class="table2">
<caption>Table2</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
<style type="text/css" scoped="scoped">
table.table1 {
/* 双边框变为单边框 */
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}
table.table2 {
margin-top: 10px;
border-collapse: separate;
/* 表格边框与单元格边框的间隔为10px collapse时无效 */
border-spacing: 10px;
/* 标题放在下方 */
caption-side: bottom;
/* 单元格无数据时隐藏单元格边框 */
empty-cells: hide;
/* 列宽由内容决定 */
table-layout: auto;
}
</style>
七、盒子
元素实质上是一个盒子，它包括：Margin(外边距) ，Border(边框)，Padding(内边距)，和Content(内容)。
margin - 外边距是透明的，调整数值后会向外部扩张。
border - 实际意义上的边框，调整后元素的实际宽高会变化。
padding - 内边距是透明的，调整后元素的实际宽高会变化。
content - 盒子的内容，显示文本和图像。元素的
width、height即为content的宽高。默认情况下，元素的实际宽高与
margin无关，是border+padding+content(通过width、height设置)的大小之和。
- 外边距 margin
可设置4个值，分别表示 上右下左。
当设置3个值时，表示 上右下，左与右相等。
当设置2个值时，表示 上右，左与右相等，下与上相等。
当设置1个值时，表示 上，右下左与上相等。
属性可用值：
auto自动计算外边距。若设置了width，元素会居中显示在父元素内。
10px固定值，默认值是0px。可使用其他单位，参考 CSS 参考手册 - 单位。
10%父元素的宽度的百分比。
inherit继承父类。
可设置单边
margin-top上、margin-right右、margin-bottom下、margin-left左。属性值与margin相同，但只能设置一个值。
- 边框 border
语法顺序：border: border-width border-style border-color
可使用border画三角形，见下面例子。
边框宽度 border-width
属性可用值：
thin细边框。
medium中等边框，默认值。
thick粗边框。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。-
边框样式 border-style
无默认值，该属性必填，否则不显示边框。
属性可用值：
none无边框。
hidden与none相同。对于表table时，hidden用于解决边框冲突。
dotted点状边框。
dashed虚线。
solid实线。
double双线。双线的宽度等于border-width的值。
groove3D凹槽边框。其效果取决于border-color的值。
ridge3D 垄状边框。其效果取决于border-color的值。
inset3D inset边框。其效果取决于border-color的值。
outset3D outset边框。其效果取决于border-color的值。
inherit继承父类。
边框颜色 border-color
参考 背景颜色 background-color。
可设置单边的边框
上边框 border-top、上边框宽度 border-top-width、上边框样式 border-top-style、上边框颜色border-top-color。
右边框 border-right、右边框宽度 border-right-width、右边框样式 border-right-style、右边框颜色border-right-color。
下边框 border-bottom、下边框宽度 border-bottom-width、下边框样式 border-bottom-style、下边框颜色border-bottom-color。
左边框 border-left、左边框宽度 border-left-width、左边框样式 border-left-style、左边框颜色border-left-color。
边框圆角半径 border-radius
可设置2组值:
第1组表示水平方向的半径，第2组表示垂直方向的半径。
1组有4个值:
设置4个值，分别表示上左 上右 下右 下左。
设置3个值，下左与上右相等。
设置2个值。下左与上右相等，下右与上左相等。
设置1个值。四角都相等。
例:border-radius: 5px 10px 15px 20px/25px 30px 35px 40px;
属性可用值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10%元素宽高的百分比。水平方向的半径则为宽度的百分比，垂直方向的半径则为高度的百分比。四圆角半径
左上角 border-top-left-radius、右上角 border-top-right-radius、右下角 border-bottom-right-radius、左下角 border-bottom-left-radius。
可设置2个值，第1个值是水平方向的半径，第2个是垂直方向的半径。
若设置1个值，则两个值相等。
如果任一值为零，那么角落里是方的，不圆润。
属性可用值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10%相对于元素宽高的百分比。水平方向的半径则为宽度的百分比，垂直方向的半径则为高度的百分比。边框图像 border-image
将一张图像分成九个部分用来作为边框。
语法顺序border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;边框图像资源 border-image-source
属性可用值：
none不使用图像，默认值。此时border-style才会生效
url("")图像的路径。-
边框图像切片位置 border-image-slice
可设置4个数值或百分比。表示上右下左，将图像分为左上角、上、右上角、右、右下角、下、左下角、左、中间，总共9个区域。
默认情况下中间是透明处理的，设为fill就能够保留中间。
设置3个值时，第4个值与第2个值相等。
设置2个值时，第4个值与第2个值相等，第3个值与第1个值相等。
设置1个值时，所有值都相等。
属性可用值：
10数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）。
100%图像宽或高的百分比，默认值。
fill保留图像的中间部分。
切割后的四周的八个切片，四个角自动缩放显示到边框对应的四个角。
除四个角外的其他中间切片（上，右，下，左），可以设置border-image-repeat做拉伸或重复地显示到对应的边框位置。 边框图像宽度 border-image-width
可设置4个值，分别表示 上右下左。
当设置3个值时，表示 上右下，左则与右相等。
当设置2个值时，表示 上右，左则与右相等，下与上相等。
当设置1个值时，表示 上，右下左则与上相等。
属性可用值：
1数字，border-width的倍数，默认值为1。
10%图像宽高的百分比。
auto自动使用border-image-slice切片后的内在宽度或高度。边框图像轮廓 border-image-outset
默认情况下图像是设置在边框上的，设置该属性后，图像将设置在轮廓上。
可设置4个值，分别表示 上右下左。
当设置3个值时，表示 上右下，左则与右相等。
当设置2个值时，表示 上右，左则与右相等，下与上相等。
当设置1个值时，表示 上，右下左则与上相等。
属性可用值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
0border-width的倍数，默认值为0。边框图像重复方式 border-image-repeat
border-image-slice切片后的4条边，如何填充在边框上。
属性可用值：
stretch拉伸图像来填充区域，默认值。
repeat重复图像来填充区域。
round类似repeat。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space类似repeat。如果无法完整平铺所有图像，扩展空间会分布在图像周围。
inherit继承父类。
inherit重置为默认值，即stretch。
<body>
<h3>默认图像</h3>
<img src="../border.png" />
<div>图像边框</div>
</body>
<style type="text/css" scoped="scoped">
div {
margin-top: 10px;
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid #00FFFF;
text-align: center;
border-image-source: url(../border.png);
border-image-slice: 35%;
border-width: 20px;
border-image-outset: 0px;
border-image-repeat: round;
}
</style>
- 内边距 padding
可设置4个值，分别表示 上右下左。
当设置3个值时，表示 上右下，左与右相等。
当设置2个值时，表示 上右，左与右相等，下与上相等。
当设置1个值时，表示 上，右下左与上相等。
属性可用值：
10px固定值，默认值是0px。参考 CSS 参考手册 - 单位。
10%相父元素的宽高的百分比。
inherit继承父类。
可设置单边
上 padding-top、右 padding-right 、下 padding-bottom、左 padding-left。与padding相同，但只能设置一个值。
<body>
<div class="magin">magin</div>
<div class="border">border</div>
<div class="padding">padding</div>
<!-- 画三角形 -->
<div class="sanjiao"></div>
</body>
<style type="text/css" scoped>
.magin {
background-color: #FAEBD7;
/* 设置边距 */
margin: 10px 20px 30px 40px;
/* 上面相当于 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
.border {
/* 设置边框 */
border: 5px solid darkgray;
/* 上面等同于 */
border-width: 5px;
border-style: solid;
border-color: darkgray;
}
.padding {
background-color: #00FFFF;
width: 300px;
/* 设置内边距 */
padding: 10px 20px 30px 40px;
/* 上面等同于 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
.sanjiao {
/* 可使用border来画三角形 */
width: 0px;
height: 0px;
/* border-top: 20px solid red; */
border-right: 40px solid transparent;
border-bottom: 20px solid blue;
/* border-left: 20px solid yellow; */
}
</style>
- 轮廓 outline
元素周围有一条线 轮廓outline，位于边框的外边，起到突出元素的作用。
轮廓不是元素的一部分，不会影响元素的大小与布局，重叠在margin上。
语法顺序：outline: outline-color outline-style outline-width
轮廓颜色 outline-color
属性可用值：
color参考 背景颜色 background-color。
invert颜色反转，可使轮廓在不同的背景颜色中都是可见，默认值。
inherit继承父类。-
轮廓样式 outline-style
需要最先设置outline-style，因为只有获得轮廓后才能改变其轮廓的outline-color和outline-width。
对于表单元素，当获取焦点时，会自动添加一轮廓，设置为none取消这个效果。
属性可用值：
none无轮廓，默认值。
dotted点状轮廓。
dashed虚线轮廓。
solid实线轮廓。
double双线轮廓。双线的宽度等同于outline-width的值。
groove3D凹槽轮廓。此效果取决于outline-color值。
ridge3D凸槽轮廓。此效果取决于outline-color值。
inset3D凹边轮廓。此效果取决于outline-color值。
outset3D凸边轮廓。此效果取决于outline-color值。
inherit继承父类。
轮廓宽度 outline-width
属性可用值：
thin细轮廓。
medium中等的轮廓，默认值。
thick粗轮廓。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。轮廓偏移值 outline-offset
默认情况下，轮廓是紧挨在边框的外边。该属性可调整轮廓与边框的距离。
属性可用值：
10px固定值，默认为0px。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。
<body>
<div class="outline">outline</div>
</body>
<style type="text/css" scoped="">
.outline {
background-color: #00FFFF;
margin: 30px;
padding: 10px;
border: 5px solid green;
/* 设置轮廓 */
outline:red dotted 5px;
/* 轮廓与边框的距离 */
outline-offset: 10px;
/* 等同于上面 分开声明时 style需要最先声明 */
outline-style: dotted;
outline-color: red;
outline-width: 10px;
}
</style>
- 内容
宽高 width height
元素的实际宽度=左border+左padding+width+右padding+右border。
元素的实际高度=上border+上padding+height+下padding+下border。
轮廓outline和外边距margin不影响元素的总宽高。
属性可用值：
auto自动计算出实际的宽高，默认值。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10%父元素宽高的百分比。
inherit继承父类。最大宽高 max-width max-height
属性可用值：
none允许的最大高度没有限制，默认值。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10%父元素宽高的百分比。
inherit继承父类。最小宽高 min-width min-height
默认值取决于浏览器。
属性可用值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10%父元素宽高的百分比。
inherit继承父类。
- 盒子阴影 box-shadow
文本阴影使用text-shadow，元素的阴影则使用box-shadow。
默认为none，无阴影。
语法顺序:box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 水平阴影的偏移
10px必须值，允许负值，可使用其他单位，参考 CSS 参考手册 - 单位。 - v-shadow 垂直阴影的偏移
10px必须值，允许负值。 - blur 模糊距离
10px可选值。 - spread 阴影的大小
10px可选值。 - color 阴影的颜色。
参考 背景颜色 background-color。 - inset 从外层的阴影（开始时）改变阴影内侧阴影 。
10px不知什么意思???
- 盒子类型 box-sizing
默认情况下，元素实际宽度=border左宽度+padding左宽度+内容宽度+padding右宽度+border右宽度，此时width=内容宽度。
设置为border-box后，元素实际宽度=border左宽度+padding左宽度+内容宽度+padding右宽度+border右宽度，此时width=元素实际宽度。
高度同理。
属性可用值：
content-boxwidth=内容宽度，默认值。
border-boxwidth=元素实际宽度。
inherit继承父类。
八、显示
- 可见性 visibility
设置为hidden后，虽然元素隐藏了，但是仍旧会占用布局空间。
属性可用值：
visible可见的，默认值。
hidden不可见。
collapse当在表格<table>中使用时，此值可删除一行或一列，但是它不会影响表格的布局。该行或该列占据的空间会被其他行列使用。如果此值被用在其他的元素上，同hidden。
inherit继承父类。
<body>
<div>visibility</div>
<div style="visibility: hidden;">visibility</div>
<div>上面隐藏了 但会占用空间</div>
</body>
- display 显示
属性可用值：
none元素不会显示。visibility: hidden隐藏后会继续占用空间，而display: none不会占用空间。
block元素变为块级元素，元素前后会带有换行符。
inline元素变为内联元素，元素前后没有换行符。
inline-block内联块元素。
list-item元素会作为列表项显示，为块级元素。前面会有列表项的标记，可使用列表专用的属性list-style。
run-in根据上下文自动变为块级元素或内联元素。
table元素变为块级表格（类似table），表格前后带有换行符。
inline-table元素变为内联表格（类似table），表格前后没有换行符。
table-row-group元素变为一个或多个行的分组（类似tbody）。
table-header-group元素变为一个或多个行的分组（类似thead）。
table-footer-group元素变为一个或多个行的分组（类似tfoot）。
table-row元素变为一个表格行（类似tr）。
table-cell元素变为一个表格单元格显示（类似td和th）
table-caption元素变为一个表格标题（类似caption）
table-column-group元素变为一个或多个列的分组（类似colgroup）。
table-column元素变为一个单元格列（类似col）。
flex子元素进行弹性布局，元素类型不变。详见 十六、 弹性布局。
inline-flex子元素进行弹性布局，元素类型变为内联块元素。
inherit继承父类。
块级元素block:
单独占一行，宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置。
内联元素inline:
和相邻的内联元素在同一行，宽度(width)、高度(height)、上下外边距(margin-top/margin-bottom)都不可改变。元素里面内容大小不变，改变上下内边距(padding-top/padding-bottom)时，虽然元素看起来变大了，实际布局所占的空间不变。
内联块元素inline-block：
与内联元素相同但可修改宽度(width)、高度(height)、内边距(padding)和外边距(margin)。常将<li>元素设置display:inline-block，垂直的列表就能水平显示。
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li。
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var。
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script。
- 溢出显示方式 overflow
当元素里的内容大于高或宽时，内容会溢出元素。
设置了heigth的块状元素该属性才有效。
属性可用值：
visible内容不会被裁减，会呈现在元素框之外。默认值。
hidden内容会被裁减，溢出内容不可见。
scroll内容会被裁减，会显示滚动条以便查看剩余的内容。
auto如果内容被修剪，则会显示滚动条以便查看剩余的内容。
inherit继承父类。
- 溢出显示方式 overflow-y/overflow-x
表示垂直/水平方向溢出时的显示方式。
属性可用值：
visible内容不会被裁减，会呈现在元素框之外。默认值。
hidden内容会被裁减，溢出内容不可见。
scroll内容会被裁减，会显示滚动条以便查看剩余的内容。
auto如果内容被修剪，则会显示滚动条以便查看剩余的内容。
no-display如果内容不适合内容框，则删除整个框。
no-content如果内容不适合内容框，则隐藏整个内容。
光标形状 cursor
鼠标指针放在一个元素边界范围内时所显示的光标形状。
查看示例。
属性可用值：
url("")自定义光标。
default默认光标（通常是一个箭头）。
auto浏览器设置的光标。默认值。
crosshair十字线（形状如 + ）。
pointer一只手。
move指示可被移动（ + 末端有箭头）。
n-resize上箭头。
e-resize右箭头。
s-resize下箭头。
w-resize左箭头。
ne-resize右上箭头。
nw-resize左上箭头。
se-resize右下箭头。
sw-resize左下箭头。
text指示文本。
wait指示程序正忙（通常是一只表或沙漏）。
help指示可用的帮助（通常是一个问号或一个气球）。
not-allowed指示元素已禁用。透明度 opacity
完成透明时，虽然不显示，但仍会占用空间。
属性可用值：
0.5固定值，从0.0（完全透明）到1.0（完全不透明）。默认值为1.
inherit继承父类。手动调整宽高 resize
属性可用值：
none用户无法调整元素的尺寸，默认值。
both用户可调整元素的高度和宽度。
horizontal用户可调整元素的宽度。
vertical用户可调整元素的高度。滤镜 filter
默认为none，无滤镜。多个滤镜用空格分隔。
查看滤镜效果。
详见 CSS 参考手册 - filter。元素自适应 object-fit
元素的内容应该如何去适应指定的高度与宽度的容器。
一般用于<img>和<video>标签，可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
查看示例。
属性可用值：
fill不保证原有尺寸比例，内容拉伸填充整个容器，默认值。
contain保持原有尺寸比例。内容被缩放。
cover保持原有尺寸比例。但部分内容可能被剪切。
none保留原有元素内容的长度和宽度，内容不会被重置。
scale-down保持原有尺寸比例。内容的尺寸与none或contain中的一个相同，取决于谁得到的对象尺寸会更小。
initial重置为默认值，即fill。
inherit继承父类。元素位置 object-position
一般与object-fit一起使用，用来设置元素在容器里的位置。
一般用于<img>和<video>标签。
属性可用值：
50% 50%第一个值为x坐标位置的值，第二个值为 y 坐标位置的值。默认为50% 50%。
还能使用单词，x坐标为left、center、right，y坐标为top、center、bottom；还能使用像素值，如10px 10px，可使用其他单位，参考 CSS 参考手册 - 单位。
initial设置为默认值，即50% 50%。
inherit继承父类。
九、布局
- 定位 position
可使用left top right bottom z-index属性。
属性可用值：
absolute绝对定位。
fixed固定定位。
relative相对定位。
static静态定位，默认值。top bottom left right z-index属性无效。
sticky粘性定位。
inherit继承父类。
initial变为默认值，即static
绝对定位 absolute:
相对于非static定位的第一个父元素进行定位。
绝对定位的元素与其他元素重叠，不占据文档空间。
固定定位 fixed：
相对于浏览器窗口进行定位，窗口滚动它也不会移动。
固定定位的元素与其他元素重叠，不占据文档空间。
相对定位 relative：
相对于原本位置进行定位。
虽然显示位置变了，但实际位置未变化。
相对定位元素素经常被用来作为绝对定位元素的父类。
粘性定位 sticky：
相对于用户的滚动位置来定位，在relative定位与fixed定位之间切换。
而当页面滚动超出目标区域时，它的表现就像fixed，它会固定在目标位置。
目标位置通过top right botto left来设置，必须要设置其中之一，才可使粘性定位生效。
<body>
<div class="father">
<div class="absolute">absolute</div>
<div class="fixed">fixed 滚动时该元素会固定</div>
<div class="relative">relative</div>
<div>虽然relative显示在下方，但实际位置仍在本元素上面</div>
<div class="sticky">sticky 滚动时当要超出目标区域时 会保持在顶部</div>
</div>
<div>
<p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p>
</div>
</body>
<style type="text/css" scoped="">
.father {
/* 添加相对定位 给absolute定位的子元素当参照物 */
position: relative;
background-color: #00FFFF;
width: 400px;
height: 200px;
}
.absolute {
/* 相对于static定位以外的第一个父元素进行定位。可使用left top right bottom属性。 */
position: absolute;
left: 150px;
top: 100px;
}
.fixed {
/* 相对于浏览器窗口进行定位，窗口滚动它也不会移动。可使用left top right bottom属性。 */
position: fixed;
right: 30px;
top: 100px;
}
.relative {
/* 相对于原本位置进行定位。 */
/* 虽然显示位置变了，但实际位置未变化。 */
position: relative;
top: 80px;
left: 100px;
}
.sticky {
/* 滚动时当要超出目标区域时 会保持在顶部 因为top:0 */
position: sticky;
/* Safari */
position: -webkit-sticky;
top: 0px;
}
</style>
偏移量 top right bottom left
绝对定位时，top表示离非static的父元素的顶部的偏移值。其他属性值同理。
相对定位时，top表示向上方偏移的值。其他属性值同理。
对于静态定位的元素无效。
属性可用值：
auto自动计算位置，默认值。
10%包含元素(绝对定位时为非static父元素，相对定位时为本身)宽高的百分比。可使用负值。
10px固定值，可使用负值。可使用其他单位，参考 CSS 参考手册 - 单位。
inherit继承父类。堆叠顺序 z-index
由于静态定位以外定位方式都可能造成元素之间的重叠。该属性可判断哪个元素在上面。
若没有指定该属性，后面添加的元素会在先添加的元素上面。
属性可用值：
auto堆叠顺序与父元素相等，默认值。
0数值大的元素放在数值小的元素上面。
inherit继承父类。裁减 clip
裁减出对应范围的形状来显示。
只对绝对定位和固定定位的元素生效。
如果设置了overflow: visible;，该属性不起作用。
属性可用值：
rect (top, right, bottom, left)元素的形状。若不裁减，相当于rect(0, width, heigth, 0)。
auto不应用任何剪裁，默认值。
inherit继承父类。
<body>
<div style="position: relative;background-color: #00FFFF;width: 300px;height: 300px;">
<div class="div1">正常<div>
<div class="div2">裁减<div>
</div>
</body>
<style type="text/css" scoped="">
.div1 {
position: absolute;
left: 10px;
width: 100px;
height: 200px;
background-color: #A9A9A9;
}
.div2 {
position: absolute;
left: 110px;
width: 100px;
height: 200px;
background-color: #A9A9A9;
/* 相当于不裁减 */
clip: rect(0px, 100px, 200px, 0px);
/* 上面裁减20 左边裁减30px */
clip: rect(20px, 100px, 200px, 30px);
/* 右边裁减100-80 下面裁减200-100 */
clip: rect(0px, 80px, 100px, 0px);
}
</style>
- 浮动 float
使元素向左或向右移动，其周围的元素也会重新排列。
浮动元素之后添加的元素将围绕它。
浮动元素之前添加的元素将不会受到影响。
多个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。常用这种方式进行水平布局。
绝对定位的元素该属性无效。
属性可用值：
left元素向左浮动。
right元素向右浮动。
none元素不浮动，默认值。
inherit继承父类。
- 清除浮动 clear
属性可用值:
left在左侧不允许浮动元素。若左侧有浮动元素，那么自己将会另起一行。
right在右侧不允许浮动元素。若右侧有浮动元素，那么浮动元素将会另起一行。
both在左右两侧均不允许浮动元素。自己会单独占一行。
none允许浮动元素出现在两侧，默认值。
inherit继承父类。
<body>
<h3>普通div将围绕浮动元素</h3>
<div>1234</div>
<div class="float"></div>
<div>1234</div>
<div class="float"></div>
<div>1234</div>
<!-- -->
<div class="float"></div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<h3>多个浮动的元素放到一起 能水平布局</h3>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div style="clear: both;">清除左右两边的浮动 自己会另起一行</div>
</body>
<style type="text/css" scoped="">
.float {
float: left;
width: 100px;
height: 100px;
background-color: #00FFFF;
margin-left: 10px;
}
</style>
十、伪类/伪元素
- a标签伪类
a:link正常，未访问过的链接
a:visited用户已访问过的链接
a:hover当用户鼠标放在链接上时
a:active链接被点击的那一刻
需要按上面的顺序使用。
:hover和:active对其他元素也有效。
<body>
<a href="http://www.baidu.com">百度</a>
</body>
<style type="text/css">
a {
/* 去除下划线 */
text-decoration: none;
}
a:link { color:black; } /* 未访问链接 */
a:visited { color:red; } /* 已访问链接 */
a:hover { color:green; } /* 鼠标移动到链接上，a标签变绿 */
a:active { color:blue; } /* 鼠标点击时，a标签变蓝 */
</style>
表单元素伪类
:checked已选中的表单元素。仅用于<input type="radio">和<input type="checkbox">。
:disabled禁用的表单元素。
:enabled启用的表单元素。
:in-range当前值在正常范围的表单元素。常用于<input type="number">。
:out-of-range当前值不在正常范围的表单元素。常用于<input type="number">。
:invalid当前值非法的表单元素。常用于<input type="email">和<input type="number">。
:valid当前值正常的表单元素。常用于<input type="email">和<input type="number">。
:optional为可选项的表单元素。即没设置required的元素。仅用于<input><select><textarea>。
:required为必填项的表单元素。即设置了required的元素。仅用于<input><select><textarea>。
:read-only只读的表单元素。即设置了readonly的元素。仅用于<input><textarea>。
:read-write可读写的表单元素。即没设置readonly的元素。仅用于<input><textarea>。
:focus处于聚焦状态的表单元素。其他伪类
:target被链接的元素
<body>
<!-- 点击后div1变绿色 -->
<a href="#div1">goto div1</a>
<!-- 点击后div2变绿色 -->
<a href="#div2">goto div2</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<style type="text/css" scoped="scoped">
/* 被链接的元素会变为绿色 */
:target {
background-color: green;
}
</style>
:before、:after 在元素的前面/后面添加内容content。
插入内容 content
默认位置在元素前或后。
若要改变内容的位置。可将元素设置成position: relative;，再在:before或:after中设置成position: absolute;，使用绝对定位的方式改变内容位置。
属性可用值：
none不插入内容。
normal正常，默认是none。
counter()计数器内容。参考 CSS 教程 - 计数器。
attr(attribute)函数，返回元素属性的值。div:after { content: attr(id);}表示插入的内容为<div>的id的值。
""String文本。
open-quote开口引号。即"。
close-quote闭合引号。即"。，必须设置:before { content: open-quote;}后，:after { content: close-quote;}才有效。显示为" "。
no-open-quote移除内容的开始引号。
no-close-quote移除内容的闭合引号。
url(" ")设置某种媒体（图像，声音，视频等内容）。
inherit继承父类。引号定义 quotes
重新定义content属性的open-quote和close-quote的值。
属性可用值：
none无符号，使用open-quote和close-quote不会产生任何符号。
"" "" "" ""4个字符串，前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。
inherit继承父类。
<body>
<div>hello</div>
<p id=" p1">hello</p>
<div id="div1">hello</div>
</body>
<style type="text/css" scoped="scoped">
/* 修改引号的值 */
div { background-color: #00FFFF; quotes: "+" "-" "*" "/";}
/* 前面加开口引号 后面加闭合引号 */
div:before { content: open-quote;}
div:after { content: close-quote;}
p { background-color: #FFA500; }
/* 前面添加图像 后面添加id的值 */
p:before { content: url(../me.png); }
p::after { content: attr(id); }
/* 使用绝对定位更改content的位置 */
#div1 {background-color: #FAEBD7;position: relative;}
#div1:before {
content: "absolute";
position: absolute;
background-color: red;
left: 50px;
top: 50px;
z-index: 1;
}
#div1::after {content: none;}
</style>
更多伪类参考 CSS 参考手册 - 选择器。
十一、媒体类型
媒体类型允许你在不同媒体呈现不同CSS。媒体类型名称不区分大小写。
媒体语法:
@media not|only mediatype and|not|only (expressions) {
}
- 关键字
mediatype前的关键字可省略。
not表示只不满足某条件。
only表示只满足某条件。
and表示同时满足某条件。 - 媒体类型mediatype
all所有的媒体设备。
aural语音和声音合成器。已废弃。
braille盲文触摸式反馈设备。已废弃。
embossed盲人印刷设备。已废弃。
handheld掌上设备或更小的装置。已废弃。
print打印机。
projection投影设备。已废弃。
screen电脑屏幕，平板电脑，智能手机。
speech屏幕阅读器等发声设备。
tty固定的字符网格，如电报、终端设备和对字符有限制的便携设备。已废弃。
tv电视和网络电视。已废弃。 - 表达式expressions
通过and连接表达式，表示 并且 的意思，如@media only screen and (max-width: 500px) and (min-width: 400px) { }，适用于宽度大于400小于500的屏幕。
通过逗号连接表达式，表示 或 的意思，如@media only screen and (max-width: 500px), (min-width: 1000px) { }，适用于宽度小于500或大于1000的屏幕。
表达式可用属性，参考 CSS 参考手册 - @media。
十二、转换
转换的效果是让某个元素改变形状，大小和位置。
转换后虽然看起来发生了变化，但实际布局和以前一样。
- 2d转换 transform
移动转换 translate(x, y)
x表示水平向右移动一个距离，y表示垂直向下移动一个距离，为负数则向反方向移动。
只设置一个值时，y则为0。
xy为一个距离，可使用其他单位，参考 CSS 参考手册 - 单位。
translateX(x)、translateY(y)表示单独向水平或垂直方向移动。旋转转换 rotate(angle)
angle为一个角度，常用单位deg，30deg表示顺时针30度。可为负数，则为逆时针。缩放转换 scale(x, y)
x表示水平方向的缩放倍数，y表示垂直方向的缩放倍数。
当只设置一个值时，y等于x。
scaleX(x)、scaleY(y)表示单独在水平或垂直方向缩放。倾斜转换 skew(x, y)
x表示水平方向的倾斜角度，常用单位deg，30deg表示y轴逆时针倾斜30度，为负数时为顺时针倾斜。
y表示垂直方向的倾斜角度，常用单位deg，30deg表示x轴顺时针倾斜30度，为负数为逆时针倾斜。
当只设置一个值时，y等于0。
skewX(x)、skewY(y)表示单独在水平或垂直方向倾斜。综合转换 matrix()
综合转换包含旋转、缩放、移动和倾斜功能。
需要填写6个值。第1和第4表示缩放的参数；第2和第3表示倾斜的参数，这里要使用数字，3.14表示360度；第5和第6表示移动的参数，也要使用数字，100表示100px。
<body>
<div></div>
<div style="transform: translate(100px, 50px);">水平移动100px 垂直移动50px</div>
<div style="transform: rotate(30deg);">顺时针旋转30度</div>
<div style="transform: scale(1.5, 2);">水平缩放成1.5倍，垂直缩放为2倍</div>
<div style="transform: skew(30deg, 0deg);">y轴顺时针倾斜30度</div>
<div style="transform: matrix(1, 0, -0.5, 1, 0, 0);">综合变换 此时为y轴顺时针倾斜</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 100px;
border: 1px solid red;
/* 设置锚点为 10px 50% 0 */
/* transform-origin:10px; */
}
</style>
- 转换的锚点 transform-origin
需要先设置transform属性。
语法顺序：transform-origin: x-axis y-axis z-axis;
设置x轴、y轴、z轴的锚点。默认值transform-origin: 50% 50% 0;
若只设置一个值，另两个值分别为默认值，即50% 0。
该属性对rotate()和scale()有效。
x-axis可选值：
left左，即0%。
center中，即50%。
right右，即100%。
10px固定值，表示以左为0点的坐标值。可使用其他单位，参考 CSS 参考手册 - 单位。
50%宽度的百分比。
y-axis可选值：
top上，即0%。
center中，即50%。
bottom下，即100%。
10px固定值，表示以上为0点的坐标值。可使用其他单位，参考 CSS 参考手册 - 单位。
50%高度的百分比。
z-axis可选值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
10% 10%是什么意义
rotate时表示以该点为圆心来旋转。
scale时，表示在10%处把一条边分成2段，一段占10%向左或上缩放，另一段占90%向右或下缩放。
- 3d转换
移动转换 translate3d(x,y,z)
x表示水平向右移动一个距离，y表示垂直向下移动一个距离，z表示垂直屏幕向外移动一个距离，为负数则向反方向移动。
xyz为一个距离，可使用其他单位，参考 CSS 参考手册 - 单位。
translateX(x)、translateY(y)、translateZ(z)表示单独向水平方向、垂直方向、垂直于屏幕方向移动。缩放转换 scale3d(x, y, z)
x表示水平方向的缩放倍数，y表示垂直方向的缩放倍数，z表示垂直于屏幕方向的缩放倍数。
scaleX(x)、scaleY(y)、scaleZ(z)表示单独在水平方向、垂直方向、垂直于屏幕方向缩放。旋转转换 rotate3d(x,y,z,angle)
x不为0表示沿x轴旋转，y不为0表示沿y轴旋转，z不为0表示沿z轴旋转。rotate3d(0,0,1,angle)效果与rotate(angle)相同。若angle为正值，旋转方向为顺时针。
rotateX(angle)、rotateY(angle)、rotateZ(angle)表示分别沿X轴、Y轴、 Z轴的旋转。综合3d转换 matrix3d()
需要传入16个值。
子元素呈现方式 transform-style
默认情况下，子元素会以2d方式呈现，即看到的子元素3d效果是投影在初始平面的2d投影。
设置preserve-3d后，子元素与父元素重叠部分会存在交错，从而产生立体感。
查看示例。
只对3d转换有效。用在父元素上。
属性可用值:
flat在2D平面呈现，默认值。
preserve-3d在3D空间中呈现。透视 perspective
表示该元素距离视图(观测点)的距离。接近0时，观测点非常靠近元素，元素则会呈现无限大的状态。
查看示例。
只对3d转换有效。用在父元素上。
属性可用值:
10固定值，10表示10px。
none不设置透视，与0相同，默认值。透视位置 perspective-origin
语法顺序perspective-origin: x-axis y-axis;
一个表示视图(观测点)在x轴的位置，一个表示在y轴的位置。
查看实例.
只对3d转换有效。用在父元素上。
x-axis可选值：
left即0%。
center即50%。
right即100%。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
50%宽度的百分比，默认50%。
y-axis可选值：
top即0%。
center即50%。
bottom即100%。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
50%高度的百分比，默认50%。元素呈现方式 backface-visibility
当元素3d旋转后180度后会出现显示背面的情况。设置为hidden可使显示背面时隐藏，即180度-360度不可见。
属性可选值：
visible背面是可见的，默认值。
hidden背面是不可见的。
十三、过渡
元素从一种样式逐渐改变为另一种样式的效果。
- 过渡 transition
语法顺序：transition: transition-property transition-duration transition-timing-function transition-delay;
必须要指定过渡时间transition-duration，因为默认值为0。
可以同时过渡几个属性，每组间用逗号隔开。如:transition: property1 duration1 timing-function1 delay1, property2 duration2 timing-function2 delay2;
过渡属性 transition-property
属性可选值：
none没有属性会获得过渡效果。
all所有属性都将获得过渡效果，默认值。
propertyName要使用过渡效果的CSS属性，多个属性则用逗号分隔。过渡时间 transition-duration
单位为秒(s)、毫秒(ms)。必须要设置该属性，否则过渡不生效。
属性可选值：
1s默认值为0s。过渡变化速度 transition-timing-function
属性可选值：
linear均速，等同于cubic-bezier(0,0,1,1)。
ease先慢再快最后再慢，等同于cubic-bezier(0.25,0.1,0.25,1)，默认值。
ease-in先慢后快，等同于cubic-bezier(0.42,0,1,1)。
ease-out先快后慢，等同于cubic-bezier(0,0,0.58,1)。
ease-in-out先慢再快最后再慢，等于cubic-bezier(0.42,0,0.58,1)。
cubic-bezier(n,n,n,n)自定义。参考 CSS 参考手册 - 函数。过渡延迟时间 transition-delay
触发后延迟一段时间后才开始过渡。单位为秒(s)、毫秒(ms)。
属性可选值：
1s默认为0s。
<body>
<div>光标放在div后背景色和宽度会过渡</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #000000;
/* 设置width和background-color的过渡效果 */
transition:width 1s ease 0s, background-color 1s ease 0s;
-o-transition:width 1s ease 0s, background-color 1s ease 0s;
-ms-transition:width 1s ease 0s, background-color 1s ease 0s;
-moz-transition:width 1s ease 0s, background-color 1s ease 0s;
-webkit-transition:width 1s ease 0s, background-color 1s ease 0s;
}
div:hover {
width: 200px;
background-color: red;
}
</style>
十四、动画
过渡只能将元素从一个样式变到另一个样式。而动画可以将元素从样式1变到样式2，再从样式2变到样式3，样式3变到样式4....
- 动画绑定 animation
语法顺序:animation: animation-name transition-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
需要设置动画持续时间，因为默认为0，为0时动画不会生效。
选择器名称 animation-name
该属性为@keyframes指定名称。
Sting选择器的的名称，字符串两端不用加引号"。
none没有动画（可用于覆盖从级联的动画），默认值。动画时间 transition-duration
单位为秒(s)、毫秒(ms)。必须要设置该属性，因为默认为0，为0时动画不会生效。
属性可选值：
1s默认值为0s。动画变化速度 animation-timing-function
参考 过渡变化速度 transition-timing-function动画延迟时间 animation-delay
触发后延迟一段时间后才开始动画。单位为秒(s)、毫秒(ms)。
可以为负值。-2s表示立即开始动画，但跳过前2秒的动画。
属性可选值：
1s默认为0s。动画重复次数 animation-iteration-count
属性可选值：
1数字，默认值。
infinite无限次。动画播放方向 animation-direction
animation-iteration-count需要大于1，该属性才有效。
属性可选值：
normal动画按正常播放，默认值。
reverse动画反向播放。
alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial重置为默认值，即normal。
inherit继承父类。动画结束的元素样式 animation-fill-mode
当动画不播放时（当动画完成时或者当动画有一个延迟未开始播放时），元素要使用的样式。
默认情况下，当动画完成后，元素会回到动画前的样式。
属性可选值：
none动画前的样式，默认值。
forwards动画后的样式。
backwards???
both动画遵循forwards 和backwards的规则。
initial重置为默认值，即none。
inherit继承父类。动画暂停 animation-play-state
属性可选值：
paused动画暂停。
running动画执行，默认值。
- 关键帧 @keyframes
后面跟animation-name指定的名字。
使用百分比来规定变化发生的时间，0%是动画的开始，100%是动画的完成。
可以使用关键词from、to，等同于0%和100%。
<body>
<div>123</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
/* 设置4秒动画 */
animation: div_ani 4s ease none 0s 2 alternate-reverse;
}
@keyframes div_ani{
/* 动画为移动一个正方形路径 再反向移动回来 */
from {margin: 0px 0px;}
25% {margin: 0px 100px;}
50% {margin: 100px 100px;}
75% {margin: 100px 0px;}
to {margin: 0px 0px;}
}
</style>
十五、多列
将一个元素中的子元素分成多列，也可将多个子元素等宽左右布局。
- 分割线 column-rule
语法顺序:column-rule: column-rule-width column-rule-style column-rule-color;
分割线的宽度 column-rule-width
属性可选值：
thin细。
medium中等，默认值。
thick粗。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。分割线的样式 column-rule-style
参考 边框风格 border-style。分割线的颜色 column-rule-color
默认为black。
参考 背景颜色 background-color
- 多列 columns
语法顺序:columns: column-width column-count;。
在columns: 100px 3;时，当每列宽度大于100px时，就以3列显示；当浏览器宽度缩小，导致在3列情况下无法满足每列大于等于100px，就开始转为2列；当浏览器再缩小，2 列中每列无法再保持100px每列时，再次转为1列...
总之，column-width为每列宽度的最小值，column-count表示要显示的列数的最大值。
每列的宽度 column-width
属性可选值：
auto自动宽度，默认值。
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。多列的列数 column-count
属性可选值：
1数字。
auto列数将取决于column-width，默认值。
每列的间距 column-gap
该属性指每列的间距，column-rule-width指分割线的宽度。分割线宽度可以大于每列的间距，此时分割线会覆盖在每列上，分割线不会占剧空间。
属性可选值：
10px固定值。可使用其他单位，参考 CSS 参考手册 - 单位。
normal普通宽度，默认值。子元素跨越的列数 column-span
属性可选值：
1跨越一列，只能为1，默认值。
all跨越所有列。
<body>
<div class="div1">
<h2>标题跨越所有列</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，
我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，
我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；
在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
<h2>4个子元素均分 左右布局</h2>
<div class="div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
<style type="text/css" scoped="scoped">
.div1 {
border: 1px solid #00FFFF;
/* 分割线 */
column-rule: 5px solid red;
/* 最多3列 每列宽度最少为100px */
columns: 100px 3;
/* 每列间距20px */
column-gap: 20px;
}
.div1 h2 {
/* 标题跨越所有列 */
column-span: all;
}
.div2 {
margin-top: 10px;
border: 1px solid #FAEBD7;
/* 分割线 */
column-rule: 5px solid red;
/* 最多4列 */
columns: auto 4;
/* 每列间隔20px */
column-gap: 20px;
}
</style>
十六、 弹性布局
是常用的左右布局方式，能更加有效地对一个容器中的子元素进行排列、对齐和分配空白空间。
父元素需要设置display: flex;或display: inline-flex;，两者区别是inline-flex会将父元素变成内联块元素。
子元素默认在弹性盒子内一行显示且从左到右显示。
需要添加前缀:
{
/* safari */
display: -webkit-flex;
display: flex;
}
- 子元素排列方式 flex-flow
语法顺序:flex-flow: flex-direction flex-wrap;
子元素方向 flex-direction
默认情况下，row是从左到右。若direction:rtl;，row则变为从右到左。row-reverse也将变为从左到右。
属性可选值：
row从左到右，默认值。
row-reverse与row相反。
column从上到下。
column-reverse与column相反
initial重置为默认值，即row。
inherit继承父类。子元素多行显示 flex-wrap
属性可选值：
默认情况下，子元素会在一行左右排列，当数量增多后，子元素会减小宽度。
nowrap不换行，可能会减小子元素宽度，默认值。
wrap换行。
wrap-reverse换行，并以相反的顺序排列。
initial重置为默认值，即nowrap。
inherit继承父类。
子元素水平对齐方式 justify-content
属性可选值：
flex-start位于容器的开头，默认值。
flex-end位于容器的结尾。
center位于容器的中心。
space-between元素均分容器的空间，各元素间距相等，且左右元素靠边。
space-around元素均分容器的空间，各元素间距相等，但左右元素离容器左右边的距离是各元素间距的一半。
initial重置为默认值，即flex-start。
inherit继承父类
查看示例。子元素垂直对齐方式 align-items
属性可选值：
stretch拉伸以适应容器，默认值。
如果盒子和子元素都设置了height，则会呈现flex-start的效果。否则会使子元素与盒子高度相同，但也会受到min-height、max-height的限制。
center位于容器的中心。如果子元素高度大于盒子高度，则会向上下溢出相等的长度。
flex-start位于容器的开头。
flex-end位于容器的结尾。
baseline位于容器的基线上。
initial重置为默认值，即stretch。
inherit继承父类。多行元素的垂直对齐 align-content
容器有多行元素，才能渲染出效果。
属性可选值：
stretch拉伸以适应容器，默认值。
center位于容器的中心。相临行会紧靠，如果多行的高度大于容器，则会向容器上下溢出相等的长度。
flex-start位于容器的开头。相临行会紧靠。
flex-end位于容器的结尾。相临行会紧靠。
space-between各行均分容器空间，各行间距相等，最上行和最下行紧靠容器上下边。
space-around各行均分容器空间，各行间距相等，最上行和最下行离容器上下边的距离是各行间距的一半。
initial重置为默认值，即stretch。
inherit继承父类。子元素的顺序 order
默认为0，值越小子元素越靠前，可为负数。相等时按添加顺序排序。
该属性用在子元素上，上面的属性都是用在容器上。
属性可选值：
0数字，默认值为0。
initial重置为默认值，即0。
inherit继承父类。单个子元素的垂直对齐方式 align-self
align-items是控制全部子元素的垂直对齐，该属性则只控制单个子元素。
该属性用在子元素上。
属性可选值：
auto使用容器的align-items属性值，默认值。
其他可选值与 子元素垂直对齐方式 align-items 相同。子元素空间分配 flex
语法顺序:flex: flex-grow flex-shrink flex-basis
该属性用在子元素上。
属性可选值：
auto与1 1 auto相同。
none与0 0 auto相同。
initial重置为默认值，即0 1 auto。
inherit继承父类。
子元素的扩展比率 flex-grow
默认为0，表示元素使用flex-basis基准值。flex-basis默认为auto，子元素会使用width作为自己的宽度。
若存在flex-grow不为0的子元素，flex-grow为0的子元素使用flex-basis基准值作为自己的宽度，剩下的元素根据flex-grow值按比例分配剩余的宽度。
使用该属性时，最好不要设置子元素的width和flex-basis，这样才能够更方便的按比例分配子元素的宽度。
属性可选值：
0数字，默认值为0。
initial重置为默认值，即0。
inherit继承父类。子元素的收缩比率 flex-shrink
假如有一个弹性容器，宽度为500px，容器里有5个子元素，每个子元素宽度设置为120px，总计1205=600px，超出容器100px。若5个元素的flex-shrink分别为1、1、2、2、4，总计1+1+2+2+4=10份。每份则为100px/10=10px。所以5个元素分别占101、101、102、102、10*4，总计10、10、20、20、40。那么每个子元素所占实际宽度为120-10、120-10、120-20、120-20、120-40，总计110、110、100、100、80。
属性可选值：
1数字，默认值为1。
initial重置为默认值，即0。
inherit继承父类。子元素的伸缩基准值 flex-basis
属性可选值：
10px一个百分比或一个长度，长度可使用其他单位，参考 CSS 参考手册 - 单位。
auto使用子元素的width。如果未指定width，则width将根据内容决定。默认值。
initial重置为默认值，即auto。
inherit继承父类。
十七、函数
参考 CSS 参考手册 - 函数。
- attr(attribute-name)
返回元素的属性值。常用于伪元素:before、:after的content。 - calc(expression)
解析表达式，返回结果。width: calc(50% - 10px)则返回宽度的50%减去10px。
支持+-*/运算符且运算符两边要加空格。 - cubic-bezier(x1,y1,x2,y2)
贝塞尔曲线。x1y1和x2y2为两个控制点的坐标，范围为0-1。用于动画的animation-timing-function和过渡的transition-timing-function。 - hsl()、hsla()、rgb()、rgba()
返回一个颜色。 - linear-gradient()、radial-gradient()
创建一个线性渐变色或径向渐变色。用于background-image。 - repeating-linear-gradient()、repeating-radial-gradient()
创建一个重复的线性渐变色或径向渐变色。用于background-image。 - var(custom-property-name, value)
插入自定义属性值。custom-property-name为自定义属性的名称，必需以 -- 开头。value为备用值，当自定义属性不存在时使用。
十八、浏览器未全部适配属性
请在 CSS参考手册 中全局搜索查看用法。
- 重置所有属性 all
重置除unicode-bidi和direction的所有属性为默认值或继承值。 - 外观 appearance
使元素看上去像标准的用户界面元素。 - 背景混合模式 background-blend-mode
同时使用渐变色与图像时，两者如何混合显示。 - 列填充方式 column-fill
如何填充列。 - 字体自适应大小 font-size-adjust
当第一个选择的字体不可用时，浏览器会使用第二个指定的字体。这可能会导致改变字体大小。 - 元素混合模式 mix-blend-mode
元素的内容与父元素的内容和背景如何混合。 - Tab键的长度 tab-size
制表符（tab）的空格长度，默认为8个空格。
