1.兼容性
| 前缀 | 浏览器 |
|---|---|
| -webkit | Chrome和Safairi |
| -moz | firefox |
| -ms | IE |
| -o | opera |
2.边框
- 圆角效果
border-radius:左上角 右上角 右下角 左下角
实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致
实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。
- 阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
- border-image
3.颜色
- RGBA
rgba(R,G,B,A)
- 渐变色彩
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示
4.文字与字体
-
text-overflow
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，
还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
- 嵌入字体
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
- 文本阴影
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
5.与背景有关样式
- background-origin 设置元素背景图片的原始起始位置
background-origin ： border-box | padding-box | content-box;
//表示背景图片是从边框，还是内边距（默认值），或者是内容区域开
始显示
*背景图片必须为no-repeat*
- background-clip 将背景图片做适当的裁剪以适应实际需要
background-clip ： border-box | padding-box | content-box | no-clip
//参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box
- background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩
background-size: auto | <长度值> | <百分比> | cover | contain
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
- multiple backgrounds 多重背景
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
6.属性选择器
-
属性选择器
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
- 伪类选择器
:root选择器,匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>
:not选择器称为否定选择器,可以选择除某个元素之外的所有元素
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素
:first-child”选择器表示的是选择父元素的第一个子元素的元素E
:last-child”选择器选择的是元素的最后一个子元素
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素
:nth-last-child(n)选择器用来从某父元素的最后一个子元素开始计算，来选择特定的元素
:first-of-type指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
:nth-of-type(n)只计算父元素中指定的某种类型的子元素
:last-of-type选择是父元素下的某个类型的最后一个子元素
:nth-last-of-type(n)选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
:only-child匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素
:only-of-type表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的
:enabled选择器
:disabled选择器(需要在表单元素的HTML中设置“disabled”属性)
:checked选择器表示的是选中状态
::selection选择器
:read-only用来指定处于只读状态元素的样式,元素中设置了“readonly=’readonly’
:read-write主要用来指定当元素处于非只读状态时的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
7.动画
- 旋转
通过指定的角度参数使元素相对原点进行旋转,如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
transform: rotate(45deg);
- 扭曲
扭曲skew()函数能够让元素倾斜显示，它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
skew(x,y)//使元素在水平和垂直方向同时扭曲
skewX(x)//仅使元素在水平方向扭曲变形
skewY(y)//仅使元素在垂直方向扭曲变形
- 缩放
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
scale(X,Y)//使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放)
scaleX(x)//元素仅水平方向缩放（X轴缩放）
scaleY(y)//元素仅垂直方向缩放（Y轴缩放）
- 位移
translate()函数可以将元素向指定的方向移动
translate(x,y)//水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)//仅水平方向移动（X轴移动）
translateY(Y)//仅垂直方向移动（Y轴移动）
- 矩阵
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素 - 原点
通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，其取值见下图
- 过渡属性
就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
transition-property:指定过渡或动态模拟的CSS属性,值为width、height、background等属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数，值为ease/linear/ease-in/ease-out/ease-in-out
transition-delay:指定开始出现的延迟时间
可以合写为：
transition: all .5s ease-in 0.2s;
- keyframe 关键帧
在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
@keyframes wobble {
0% {
margin-left: 100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
div:hover{
animation: wobble 5s ease .1s;
}
- 调用动画
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
animation-name: none | IDENT[,none|DENT]*;
/*
1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
*/
- 设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间
animation-duration: <time>[,<time>]*
//取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。
- 设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
- 设置动画开始播放时间
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点
animation-delay:<time>[,<time>]*
- 设置动画播放此时
animation-iteration-count属性主要用来定义动画的播放次数。
animation-iteration-count: infinite | <number> [, infinite | <number>]*
/*
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
*/
- 设置动画播放方向
animation-direction属性主要用来设置动画播放方向
animation-direction:normal | alternate [, normal | alternate]*
/*
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
*/
- 设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。
animation-play-state:paused|running;
//paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放
- 设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
| 属性值 | 效果 |
|---|---|
| none | 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 |
| forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
| backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
| both | 元素动画同时具有forwards和backwards效果 |
8.布局
- 多列布局
columns：<column-width> || <column-count>
//定义列宽和列数
- 列间距
column-gap: normal || <length>
//列间距，normal为默认值1em
- 列表边框
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
//用来定义列与列之间的边框宽度、边框样式和边框颜色
| 属性值 | 属性值说明 |
|---|---|
| column-rule-width | 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin |
| column-rule-style | 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset |
| column-rule-color | 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) |
- 跨列设置
column-span: none | all
//不跨任何列和跨所有列
- 盒子模型
box-sizing: content-box | border-box | inherit
| 属性值 | 属性值说明 |
|---|---|
| content-box | 元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height |
| border-box | 元素的宽度或高度等于元素内容的宽度或高度 |
| inherit | 使元素继承父元素的盒模型模式 |
9.Media Queries
- 引用媒体
三种
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
//link方法
@importurl(reset.css) screen;
//import方法
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
//media方法
- 使用方法
@media 媒体类型and （媒体特性）{你的样式}
最大宽度max-width
最小宽度min-width
not 关键词
only关键词
10.其他重要属性
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验
resize: none | both | horizontal | vertical | inherit
| 属性值 | 取值说明 |
|---|---|
| none | 用户不能拖动元素修改尺寸大小 |
| both | 用户可以拖动元素，同时修改元素的宽度和高度 |
| horizontal | 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度 |
| vertical | 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度 |
| inherit | 继承父元素的resize属性值 |
- outline
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
