选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| element1~element2 | p~ul | 选择前面有 p 元素的每个 ul 元素 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 a 元素 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a 元素 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a 元素。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p 元素的每个 <p 元素 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p元素的每个 <p 元素 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p 元素的每个 <p 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p 元素 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p 元素。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p元素的每个 <p 元素。 |
| :root | :root | 选择文档的根元素。 |
| :empty | p:empty | 选择没有子元素的每个 <p元素（包括文本节点） |
| :target | #news:target | 选择当前活动的 #news 元素。 |
| :enabled | input:enabled | 选择每个启用的 <input 元素 |
| :disabled | input:disabled | 选择每个禁用的 <input元素 |
| :checked | input:checked | 选择每个被选中的 <input元素 |
| :not(selector) | :not(p) | 选择非 <p元素的每个元素 |
| ::selection | ::selection | 选择被用户选取的元素部分 |
框模型
背景和边框
新边框属性
| 属性 | 描述 | 使用方法 |
|---|---|---|
| border-image | 用图片创建边框 | 边框图片路径，向内偏移，边框宽度，边框图像区域超出边框的量 ，图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched) border-image:url(border.png) 30 30 round |
| border-radius | 创建圆角 | border-radius:2px |
| box-shadow | 向方框添加一个或多个阴影 | 水平阴影位置，垂直阴影位置，模糊距离(可选)，阴影尺寸（可选），阴影颜色（可选），阴影再内部或外部（可选）box-shadow: 10px 10px 5px 5px #888888 outset; |
新背景属性
| 属性 | 描述 | 使用方法 |
|---|---|---|
| background-clip | 规定背景的绘制区域 | background-clip: border-box\padding-box\content-box; 背景被裁剪到边框盒\背景被裁剪到内边距框\背景被裁剪到内容框 |
| background-origin | 规定背景图片的定位区域。 | background-origin:padding-box\border-box\content-box; 背景图象相对于内边距框来定位\ 背景图象相对于边框盒来定位 \ 背景图象相对于内容框来定位 |
| background-size | 规定背景图片的尺寸 | background-size: length\percentage\cover\contain; 设置背景图片的高度和宽度 \以父元素的百分比来设置背景图像的宽度和高度 \把背景图象扩展至足够大，以使背景图象完全覆盖背景区域，背景图象的某些部分也许无法显示在背景定位区域中 \ 把图象扩展至最大尺寸，以使宽度和高度完全适应内容区域 |
文本效果/字体
文本效果
| 属性 | 描述 |
|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外 |
| punctuation-trim | 规定是否对标点字符进行修剪 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法 |
| text-outline | 规定文本的轮廓 |
| text-overflow | 规定当文本溢出包含元素时发生的事情 |
| text-shadow | 向文本添加阴影 |
| text-wrap | 规定文本的换行规则 |
| word-break | 规定非中日韩文本的换行规则 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
字体 @font-face
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称 |
| src | URL | 必需。定义字体的文件的url |
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
2D/3D转换(transform)
| 属性 | 描述 |
|---|---|
| transform | 向元素应用2D或3D转换 |
| transform-origin | 允许你改变被转换元素的位置 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示 |
| perspective | 规定 3D 元素的透视效果 |
| perspective-origin | 规定 3D 元素的底部位置 |
| backface-visibility | 定义元素在不面对屏幕时是否可见 |
过渡(transition)
当元素从一种样式变换为另一种样式时为元素添加效果
- 添加到某个 CSS 属性上
- 规定效果的时长
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间。默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease" |
| transition-delay | 规定过渡效果何时开始。默认是 0 |
动画(animation)
动画是使元素从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
- 在 @keyframes 中创建动画时，需捆绑到某个选择器
- 规定动画的名称
- 规定动画的时长
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running" |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
多列布局
将某个元素中的文本创建多个列
Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9 以及更早的版本不支持多列属性。
<div>前端面试题 css3 多列布局</div>
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
| 属性 | 描述 |
|---|---|
| column-count | 规定元素应该被分隔的列数 |
| column-fill | 规定如何填充列 |
| column-gap | 规定列之间的间隔 |
| column-rule | 设置所有 column-rule-* 属性的简写属性 |
| column-rule-color | 规定列之间规则的颜色 |
| column-rule-style | 规定列之间规则的样式 |
| column-rule-width | 规定列之间规则的宽度 |
| column-span | 规定元素应该横跨的列数 |
| column-width | 规定列的宽度 |
| columns | 规定设置 column-width 和 column-count 的简写属性 |
用户界面
重设元素尺寸、盒尺寸以及轮廓 resize:规定是否可由用户对元素的尺寸进行调整
| 属性 | 描述 | 值 |
|---|---|---|
| appearance | 允许将元素设置为标准用户界面元素的外观 | normal(正常)icon（呈现为图标）window（呈现为视口）button（呈现为按钮）menu（呈现为一套供用户选择的选项）field（呈现为输入字段）(测试谷歌浏览器只支持button) |
| box-sizing | 以确切的方式定义适应某个区域的具体内容 | content-box(宽度和高度分别应用到元素的内容框) 标准盒模型；border-box(设定的宽高决定了元素的边框盒（content + padding + margin = heignt）)IE盒模型 |
| icon | 为创作者提供使用图标化等价物来设置元素样式的能力 | |
| nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 目前只有 Opera 支持 nav-up 属性 |
| nav-index | 设置元素的 tab 键控制次序 | 目前只有 Opera 支持 nav-up 属性 |
| nav-left | 规定在使用 arrow-left 导航键时向何处导航 | 目前只有 Opera 支持 nav-up 属性 |
| nav-right | 规定在使用 arrow-right 导航键时向何处导航 | 目前只有 Opera 支持 nav-up 属性 |
| nav-up | 规定在使用 arrow-up 导航键时向何处导航 | auto(浏览器决定导航到哪个元素)、id(规定被导航元素的id)、target-name(规定被导航的目标框架)、inherit(规定应从父元素继承nav-up属性的值) ；目前只有 Opera 支持 nav-up 属性 |
| outline-offset | 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 | length(轮廓与边框边缘的距离 px)、inherit(规定应从父元素继承outline-offset属性的值) |
| resize | 规定是否可由用户对元素的尺寸进行调整 | none(用户无法调整元素的尺寸)、both(用户可调整元素的高度和宽度)、horizontal(用户可调整元素的宽度)、vertical(用户可调整元素的高度) |
Firefox、Chrome 以及 Safari 支持 resize 属性。 Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。 所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer
所有主流浏览器都不支持 appearance 属性。 Firefox 支持替代的 -moz-appearance 属性。 Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
