CSS （一）

优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式
>是子代选择符，它表示的是选择body的子代div
：active 元素被用户激活 :link未访问链接 :hover鼠标停留  :visited 已访问链接
::after[3] 在元素最后面 和content一起用
颜色渐变：
1.  linear-gradient（线性渐变）渐变的方向 起点颜色，终点颜色，你还可以在它们之间插入更
多的参数，表示多种颜色的渐变
注： background: -moz-linear-gradient( top,#ccc,#000);
-webkit-linear-gradient(top,#ccc,#000);Opera浏览器：background: -o-linear-gradient
(top,#ccc, #000);IE:filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, 
startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
30度角：background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到

右横向梯度，而90度将创建一个从底部到顶部的垂直渐变

2.  radial-gradient（径向渐变）
align-content 在弹性容器内适用于父类容器上  一行 （
flex-start 第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧
靠住前面一行。
flex-end伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前
的每一行都紧靠住后面一行。
center各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边
和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。
space-between只有一行，该值等效于「flex-start」。在其它情况下，第一行在侧轴起点
的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴

终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。

space-around如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「center」。在

其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空

间的一半的状况下排列。

stretch如果剩余的空间是负数，该值等效于「flex-start」。在其它情况下，剩余空间被

所有行平分，扩大各行的侧轴尺寸。)
align-items:一列 侧轴（flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的
侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。）
align-self:适用于弹性盒模型子元素 侧轴(auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。)
justify-content (适用于父类容器上)
justify-content: flex-start | flex-end | center | space-between | space-around
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
flex ：适用于弹性盒模型子元素 设置或检索伸缩盒对象的子元素如何分配空间
none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
flex-direction (适用于父类容器的元素上)设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-wrap (适用于父类容器上)
设置或检索伸缩盒对象的子元素超出父容器时是否换行。
flex-wrap: nowrap | wrap | wrap-reverse
nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。
all重设属性
 initial该关键字代表改变该元素或其父元素的所有属性至初始值。
 inherit该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。 
 unset该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。
animation css属性animation是如下属性的简写形式：animation-name（none 表示无关键帧index由大小写不敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置）, animation-duration指定一个动画周期的时长, 默认值为0s，表示无动画animation-timing-function定义CSS动画在每一动画周期中执行的节奏, animation-delay定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度, animation-iteration-count, animation-direction（normal循环从头开始 alternate前后后前循环 reverse 后前一直循环alternate-reverse前后后前前后循环） 指示动画是否反向播放和 
animation-fill-mode指定动画执行之前之后的样式.（none动画前后不改变任何样式 forwards 保持最后的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count backwards 第一帧的样式 both 同时forwards和backwards样式）创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
attr()用来获取选择到的元素的某一HTML属性值，并用于其样式
backface-visibility 属性指定当元素背面朝向观察者时是否可见（visible 表示背面可见，允许显示正面的镜像。hidden 表示背面不可见。）
background-blend-mode CSS属性定义该元素的背景图片，以及背景色如何混合。
<blend-mode>混合模式是一种方法,计算最后一个像素的颜色值,当层重叠normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
background-clip  设置元素的背景（背景图片或颜色）是否延伸到边框下面。
如果没有背景图片，那么只有在边框设置为透明或半透明时才能看到视觉效果。
（border-box背景延伸到边框外沿。padding-box背景延伸到内边距外沿。content-box背景裁剪到内容区外沿）
background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.
border-box背景将会延伸到延伸到外边界的边框，但是是在边框在上，背景在下，这个用border-
style 为dashed可以直接看得出来。
padding-box背景描绘在padding盒子，边框里不会有背景出现。同样，背景将会延伸到最外边界的
padding.content-box背景描绘在内容区范围.
background-repeat 指定背景图片是否以平铺效果重复出现，以及重复的方式。
repeat图像同时向水平和垂直方向重复。
repeat-x图像仅水平重复。
repeat-y图像仅垂直重复。
no-repeat不重复图像：仅绘制图像的一份拷贝。
background-size 设置背景图片大小。
contain 或 cover:
保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。
auto 或 auto auto:
图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例， 效果同 contain。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。一个为 auto 另一个不是auto:如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。
blur()给图像设置高斯模糊,值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
border-image 属性用来给元素边框添加背景图片(repeat round stretch )
border-image-outset属性定义边框图像可超出边框盒的大小。(sides horizontal vertical top 
bottom right left inherit四个方向的值都继承于父元素的该属性计算后值。)
border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。(horizontal vertical type stretch repeat round inherit)
border-image-width 定义边框宽度(auto length percentage number)
border-radius 用来设置边框圆角,当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果
border-style用来设定元素所有边框的样式(none hidden dotted dashed solid double groove 

ridge浮雕效果 inset陷入效果 outset突出效果 )
border-top-right-radius属性设置元素的右上角弧形
box-shadow 以逗号分割列表来描述一个或多个阴影效果（inset offset-x offset-y blur-radius 
spead-radius color ）box-sizing 用来改变 CSS 盒模型 ，从而改变元素高宽的计算方式。这个属性用于模拟那些非正确支持标准盒模型的浏览器的表现。(content-box是内容区的宽与高， 不包括边框，内边距，外边距 border-box包括内边距与边框，不包括外边距)
brightness()给图片应用一种线性乘法，使其看起来更亮或更暗值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。filter: brightness(0.5)
CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.


*** ch 
CSS clear属性指定了一个元素是紧挨着一个他前面浮动的元素，还是必须移动到它们的下面（浮动被清除）。
clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

(shape auto)
cm 一厘米
column-count CSS属性描述元素的列数。
column (column-width column-count)
column-span 跨列(none all)
column-width 最优的列宽 （length auto）
content CSS 属性用于在元素的  ::before 和 ::after 伪类中插入内容
contrast()调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
cubic-bezier()定义了一个立方曲线
cursor鼠标指针悬浮时显示样式
：dir() 如direction 的值，文字书写方向
：disabled表示任何被禁用的元素
@document 可以应用在URL的外来的文档上
drop-shadow()：图像下面的阴影效果
em 计算元素的字体大小
：enabled启用
ex x坐标的字体
filter滤镜 可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染
:first-child父元素的的第一个子元素.
CSS flex 属性是一个简写属性，用来定义flex item的改变尺寸来填充可用空间的能力。Flex元素可以根据他们的flex grow因子拉伸以填充可用空间，或根据他们的flex shrink因子收缩以防止溢出。
flex-flow 设置或检索弹性盒模型对象的子元素排列方式
 flex-direction ]：定义弹性盒子元素的排列方向。
[ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。
flex-grow:子元素的拉伸列宽显示
：focus元素焦点
@font-face 插入一段外来资源的样式
font-family列表 显示字体，浏览器会选择计算机上有的字体显示
font-size 
font-size-adjust: 数值乘以font-size的数值才是真正显示的字体的数值
grayscale()将图像转换为灰度图像。值定义转换的比例
height
:hover
hsl()可以自行设计色调相同而饱和度不同的颜色
hsla()扩展了hsl的颜色显示
hue-rotate()给图像应用色相旋转“angle”一值设定图像会被调整的色环角度值
in 一英寸 2.54cm
image-orientation 用来修正某些图片的预设方向.（from-image angle90deg的整数倍 flip水平翻转）
invert()反转输入图像 定义转换比例
isolation 元素隔离出来
@keyframes指定动画名称和动画效果。@keyframes定义的动画名称用来被animation-name所使用

ns|* - 会匹配ns命名空间下的所有元素
*|* - 会匹配所有命名空间下的所有元素
|* - 会匹配所有没有命名空间的元素
相邻选择器. 它只会匹配紧跟其前方元素的同胞元素
通用兄弟选择器  在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素
子选择器 当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素当使用空格选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.

:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。
letter-spacing 字符之间的间隙长度 （normal length）
 linear-gradient() 函数创建了一个呈现线性渐变颜色的 <image>。
line-height指定了元素内部line-boxes的最小高度 

CSS list-style 属性是设置list-style-type, list-style-image 和 list-style-position  的简写属性。
margin外边距属性 一个值时，四个边同值；两个值时，一个是上下，一个是左右；三个值时，第一个给上，第三个给下，中间给左右；四个值时，分别上右下左 

transform：四个属性：skew scale rotate translate
matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);
matrix（a,b,c,d,水平偏移距离, 垂直偏移距离）无须关心前四个数值
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)== transform:rotate(30deg);

matrix(1,tan(θy),tan(θx),1,0,0)拉伸
matrix矩阵是一种高级应用技巧 镜像效果
3d:transform: rotate3d(0.7, 0.5, 0.7, 45deg);
@media CSS 标准定义的媒体组之一。
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值
min-width 的值会同时覆盖 max-width 和 width。
mm毫米 
：not() p:not(.classy) { color: lime; }
nth-clild(an+b)匹配多个位置满足an+b的子元素
:nth-last-child与:nth-child相同，但是其是从后往前选择元素，而不是从前往后
number 可为整数或小数
:nth-of-type 匹配元素的类型 left等
:only-child代表了属于某个父元素的唯一一个子元素.等效的选择器还可以写成 :first-
child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
filter: opacity(50%)
outline和border类似
当一个块级元素的内容在水平方向发生溢出时，CSS属性overflow-x决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。visible | hidden | scroll | auto取决于浏览器
overflow-y
1 pc 等于 12 点
perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。（none length 指定观察者距离z=0平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。）
perspective-origin 属性指定了观察者的位置，在属性perspective中被用作消失点。
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）
position定位方式 position: static一般行为top right left z-index | relative | absolute | 
sticky | fixed 不会随页面而滚动| inherit
pt 一个点1/72英寸
px像素
radial-gradient()表示起源于原点（渐变中心）的颜色渐变
rem[3] 只是相对html根元素的字体大小 是相对大小
 repeating-linear-gradient 方法 创造一个可重复的渐变（或者<image>）. 它接受和普通线性渐变相同的属性值并且表现也一致

rgb(255,0,51)
rgba(255,0,0,0.1)   
rotate()
rotatex()
rotatey()
rotatez()
rotate3d()
saturate()转换图像饱和度。
scalex()
scaley()
scalez()
scale3d()
::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。只有一小部分CSS属性可以用于::selection选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。
sepia()将图像转换为深褐色
skew()倾斜
skewx()
skewy()
step()一帧帧的播放
@supports”条件判断规则，它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式
text-decoration 这个 CSS 属性是用于设置文本排版（下划线、顶划线、删除线或者闪烁）。下划线和顶划线修饰于文本的下部，删除线位于文本之上。
text-indent 首行的顶格空格距离
text-rendering 用来给渲染引擎提供信息，让文本在速度和可读性方面得到优化
text-shadow 为文字添加阴影。可以为文字与  text-decorations  添加多个阴影，阴影值之间用逗号隔开。每个阴影指定相对文字的偏移量，可选的颜色及模糊半径。
多个阴影从前往后叠加，第一个阴影在最前面。
text-transform检索或设置对象中的文本的大小写text-transform : none | capitalize | uppercase | lowercase
<timing-function> CSS 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度
top 
transform使用transform，元素可以按照设定的值变形、旋转、缩放、倾斜
transform-origin CSS属性让你更改一个元素变形的原点
transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化
transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
transition用来定义元素两种状态之间的过渡
 vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式

vh 相对于视口的高度。视口被均分为100单位的vh,相对于窗口改变
visibility元素是否正常显示（visible hidden collapse）
vmax 相对于视口的宽度或高度中较大的那个
vmin 最小的
vm 相对于视口的宽度
white-space CSS 属性是用来描述如何处理元素中的空格。
 normal 连续的空白符会被合并，换行符会被当作空白符来处理| pre连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。  | nowrap 和 normal 一样| pre-wrap连续的空白符会被保留 | pre-line连续的空白符会被合并。
will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。
word-break 指定怎样在单词内断行。normal | break-all | keep-all
 word-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的