css属性总结css知识点汇总css的属性和属性值有哪些区别太疯狂了，

### css总结

## 1.层叠样式表

1.css的全称是什么？ Cascading Style Sheets（层叠样式表）

2.样式表的组成

3.浏览器读取编译css的顺序？

## 2.样式表的组成

规则

选择器+声明块

声明

CSS合法的属性名+属性值

## 3.浏览器渲染样式表的顺序

从右往左

## 4.CSS选择器

CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/

CSS3选择最新选择器规范: https://www.w3.org/TR/selectors

1.基本选择器

/*通配符选择器*/ * { margin: 0; padding: 0; border: none; }

/*元素选择器*/ body { background: #eee; }

/*类选择器*/ .list { list-style: square; }

/*ID选择器*/ #list { width: 500px; margin: 0 auto; }

/*后代选择器*/ .list li { margin-top: 10px; background: #abcdef; }

2.基本选择器扩展

/*子元素选择器*/ #wrap > .inner {color: pink;}

也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素

/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}

它只会匹配紧跟着的兄弟元素

/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}

它会匹配所有的兄弟元素(不需要紧跟)

/*选择器分组*/ h1,h2,h3{color: pink;}

此处的逗号我们称之为结合符

3.属性选择器

/*存在和值属性选择器*/

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

/*子串值属性选择器*/

[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。

[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。

[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

[attr*=val] : 选择attr属性的值中包含字符串val的元素。

4.伪类与伪元素选择器

/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！

:link 表示作为超链接，并指向一个未访问的地址的所有锚

:visited 表示作为超链接，并指向一个已访问的地址的所有锚

:target 代表一个特殊的元素，它的id是URI的片段标识符

/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！

:hover 表示悬浮到元素上

:active 表示匹配被用户激活的元素（点击按住时）

由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签

身上时 :link和:visited不能放在最后！！！

隐私与:visited选择器

只有下列的属性才能被应用到已访问链接：

color

background-color

border-color

/*表单相关伪类*/

:enabled 匹配可编辑的表单

:disable 匹配被禁用的表单

:checked 匹配被选中的表单

:focus 匹配获焦的表单

/*结构性伪类*/

index的值从1开始计数！！！！

index可以为变量n(只能是n)

index可以为even odd

#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele

#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素

除此之外:nth-child和:nth-of-type有一个很重要的区别！！

nth-of-type以元素为中心！！！

:nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

:nth-of-type(index)系列

:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not

:empty(内容必须是空的，有空格都不行，有attr没关系)

/*伪元素*/

::after

::before

::firstLetter

::firstLine

::selection

5.css声明的优先级

选择器的特殊性

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0

一个选择器的具体特殊性如下确定：

1.对于选择器中给定的ID属性值，加 0,1,0,0

2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0

3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1

4.通配符选择器的特殊性为0,0,0,0

5.结合符对选择器特殊性没有一点贡献

6.内联声明的特殊性都是1,0,0,0

7.继承没有特殊性

特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意：id选择器和属性选择器

div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）

重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明

并允许在这些声明的结束分号之前插入 !important 来标志

必须要准确的放置 !important 否则声明无效。

!important 总是要放在声明的最后，即分号的前面

标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。

实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决

非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决

如果一个重要声明与非重要声明冲突，胜出的总是重要声明

继承

继承没有特殊性，甚至连0特殊性都没有

0特殊性要比无特殊性来的强

来源

css样式的来源大致有三种

创作人员

读者

用户代理

权重：

读者的重要声明

创作人员的重要声明

创作人员的正常声明

读者的正常声明

用户代理的声明

层叠

1.找出所有相关的规则，这些规则都包含一个选择器

2.计算声明的优先级

先按来源排序

在按选择器的特殊性排序

最终按顺序

## 5.自定义字体

@font-face

字体图标

1.制作一套矢量图

2.将矢量图与字符进行绑定

3.使用工具或者站点生成一套字体

4.最终使用

字体兼容处理网站

https://www.fontsquirrel.com/tools/webfont-generator

icomoon字体图标

https://icomoon.io/#home

## 6.文本新增样式

文本阴影

怎么溢出显示省略号

white-space=no-wrap

overflow=hidden

text-overflow=ellipsis

包裹区域必须不能让子元素撑开

## 7.盒模型新增样式

box-shadow

关键字(内 外阴影)

length(x轴的偏移量)

length(y轴的偏移量)

length(模糊程度)

length(阴影面积)

color(阴影颜色)

text-shadow

color(阴影颜色

## 8.倒影（webkit内核 文字描边 背景镂空）

渐变倒影

## 9.box-sizing

border-box：代表元素上设置的width和height表示的是border-box尺寸

content-box：代表元素上设置的width和height表示的是content-box尺寸

## 10.层级

a.浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层

定位元素提一层

相对定位会在文档流有残留

b.z-index为1怎么都会比a高;z-index为-1怎么都会比a低

## 11.包含块

初始包含块：和视窗大小位置尺寸一样的矩形

滚动系统滚动条会不会影响初始包含块的位置？

会

禁止系统滚动条

html,body{

height:100%;

overflow:hidden

}

怎么解决ie6下固定定位失效的问题？

用绝对定位来模拟固定定位

1.禁止系统滚动条

2.将滚动条作用在最外层的包裹器上或者在body上

3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置

所以一个按照初始包含块定位的元素就不会产生移动

## 12.边框图片、渐变

background-image:linear-gradient(45deg,#fff,#fff),linear-gradient(45deg,#5c5fa5,#893f60);

## 13.背景

css2

background-color 平铺整个border-box

background-image 默认从padding-box开始绘制，从border-box开始剪裁

css3中有多背景，默认绘制时尺寸是自己的位图像素

background-repeat

控制平铺与否

background-position

控制背景图片在背景区域中的位置

px

百分比

参照于背景区域减去背景图片的位图像素值

background-attachment

scroll：默认值，背景图不会随着元素滚动条的滚动而滚动

fixed：背景图铺在视口中固定定位了

css3

background-origin

background-clip

background-size

图片是自适应的

## 14.如何实现一张图片的垂直水平居中

body:after{

content: "";

display: inline-block;

height: 100%;

vertical-align: middle;

}

img{

## 15.过渡说明

a.过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态

b.元素在初次渲染还没有结束的时候，是没有办法触发过渡的

c.在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

## 16.过渡

transition-property

指定过渡动画的属性（并不是所有的属性都可以动画）

transition-duration

指定过渡动画的时间（0也要带单位）

transition-timing-function

指定过渡动画的形式（贝塞尔）

transition-delay

指定过渡动画的延迟

transition

第一个可以被解析成时间的值会赋给transition-duration

transtionend事件（DOM2）

在每个属性完成过渡时都会触发这个事件

当属性值的列表长度不一致时

跟时间有关的重复列表

transition-timing-function使用默认值

## 17.2D变换（transform）

rotate

旋转

translate

平移

skew

斜切

scale

缩放

变换组合!

顺序是从右往左的，变换的底层其实就是矩阵的运算

基点的变换

transform-origin

## 18.元素垂直水平居中方案

已知高宽

1.position=absolute,lrtb=0,margin=auto,包含块一定的是容器。（绝对定位盒模型的特性）

left+right+w+p+m = 包含块的宽度

top+bottom+h+p+m = 包含块的高度

2.position=absolute,lt=50%,包含块一定的是容器,marginT/L为负的自身的一半。

3.position=absolute,lt=50%,包含块一定的是容器,transform:tranlate3d(-50%,-50%,0)

4.flex

未知高宽

1.position=absolute,lt=50%,包含块一定的是容器,transform:tranlate3d(-50%,-50%,0)

2.flex

img元素如何元素垂直水平居中

1.基线

## 19.3D变换

perspective，灭点

景深的写法：

2种写法。一种css属性，一种是transform属性的一个变换函数（必须在第一位）

景深的作用：

构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉

景深和灭点的关系

景深越大，灭点越远，元素变形越小

景深越小，灭点越近，元素变形越大

景深基点

景深叠加

景深是一个不可继承属性，但他可以作用于所有的后代元素

transform-style

transform-style的作用

构建3D舞台，使3d舞台有层次感

transform-style是一个不可继承属性，他只作用于子元素

backface-visibility

隐藏元素背面

一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面

## 20.css3动画基础

animation-name：代表关键帧的名字

关键帧：

@keyframes animiationName{

keyframes-selector{

css-style;

}

}

animation-duration：一个动画周期的时长

animation-timing-function：作用于一个关键帧周期而非整个动画周期

animation-delay：代表动画的延迟（这是一个动画外的属性）

animation-iteration-count：循环关键帧的次数！（只会管理动画内的属性，动画的延迟不会被循环）

animation-direction：改变关键帧的执行方向，还会影响animation-timing-function的形式

animation-fill-mode：管理所有动画外的状态！

什么是动画外的状态

from之前

animation-delay

to之后

值

none : 动画外的状态保持在动画之前的位置

backwards：from之前的状态与from的状态保持一致

forwards ：to之后的状态与to的状态保持一致

both ：动画外的状态与from和to的状态保持一致

animation-play-state：管理动画的运行和停止

关键帧：

keyframes-selector可以是关键帧form（0%）和to（100%）

可以是百分比

代表的是时间的百分比（时间点）

## 21.steps(num,[start/end])

num:拆成多少步（当吗num为12时，整个动画最好有13帧）

start：看不见第一帧

end：看不见最后一帧

transform只能使用在块级元素上！！！

## 22.Flex

0.flex frog练习

http://flexboxfroggy.com/

1.flex基础点

---什么是容器，什么是项目，什么是主轴，什么是侧轴？

---项目永远排列在主轴的正方向上

---flex分新旧两个版本

-webkit-box

-webkit-flex / flex

2.注意点

---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？

移动端开发者必须要关注老版本的flex

因为很多移动端设备内核低只老版本的flex

---老版本的box通过两个属性四个属性值控制了主轴的位置和方向

新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

3.老版本

容器

容器的布局方向

-webkit-box-orient:horizontal/vertical

控制主轴是哪一根

horizontal：x轴

vertical ：y轴

容器的排列方向

-webkit-box-direction：normal/reverse

控制主轴的方向

normal：从左往右（正方向）

reverse：从右往左（反方向）

富裕空间的管理

只决定富裕空间的位置，不会给项目区分配空间

主轴

-webkit-box-pack

主轴是x轴

start：在右边

end: 在左边

center：在两边

justify：在项目之间

主轴是y轴

start：在下边

end：在上边

侧轴

-webkit-box-algin

侧轴是x轴

end： 在左边

侧轴是y轴

end： 在上边

项目

弹性空间管理

-webkit-box-flex：弹性因子（默认值为0）

4.新版本

flex-direction

控制主轴是哪一根，控制主轴的方向

row; 从左往右的x轴

row-reverse;从右往左的x轴

column; 从上往下的y轴

column-reverse;从下往上的y轴

justify-content

flex-start： 在主轴的正方向

flex-end: 在主轴的反方向

center： 在两边

space-between： 在项目之间

space-around： 在项目两边

align-items

flex-start：在侧轴的正方向

flex-end： 在侧轴的反方向

center： 在两边

base#ne 基线对齐

stretch 等高布局（项目没有高度）

flex-grow：弹性因子（默认值为0）

5.新版本新增的

flex-wrap：控制的是侧轴的方向

nowrap 不换行

wrap 侧轴方向由上而下 （flex-shrink失效）

wrap-reverse 侧轴方向由下而上 （flex-shrink失效）

align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）

flex-flow：flex-direction和flex-wrap的简写属性

本质上控制了主轴和侧轴分别是哪一根，以及他们的方向

order:控制项目的排列顺序

align-self：项目自身富裕空间的管理

flex-shrink：收缩因子（默认值为1）

flex-basis：伸缩规则计算的基准值（默认拿width或height的值）

6.伸缩规则

flex-basis（默认值为auto）

flex-grow（默认值为0）

可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)

可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)

每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))

flex-shrink（默认值为1）

--.计算收缩因子与基准值乘的总和

var a = 每一项flex-shrink*flex-basis之和

--.计算收缩因数

收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和

var b = (flex-shrink*flex-basis)/a

--.移除空间的计算

移除空间= 项目收缩因数 x 负溢出的空间

var c = b * 溢出的空间

7.侧轴富裕空间的管理

单行单列

align-items

align-self（优先级高）

多行多列

align-content

8.flex的简写属性

flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)

等分布局

## 23.响应式布局核心 CSS3媒体查询选择器

@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 {

//规则

媒体类型

all 所有媒体（默认值）

screen 彩色屏幕

print 打印预览

projection 手持设备

tv 电视

braille 盲文触觉设备

embossed 盲文打印机

speech “听觉”类似的媒体设备

tty 不适用像素的设备

媒体属性

width：浏览器的窗口尺寸（可加max min前缀）

device-width：设备尺寸（可加max min前缀）

device-pixel-ratio（可加max min前缀,必须加webkit前缀）：像素比

---以上三个媒体属性可加 min 和 max 前缀

min：最小值为谁

max：最大值为谁

height:高度(不常用) （可加max min前缀）

横竖屏切换

orientation：landscape（横屏）

orientation：portrait （竖屏）

操作符，关键字

only：处理浏览器尽量问题

防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.

@media only screen and (min-width:800px ){

规则；

规则

@media screen and (min-width:800px ){

在老款的浏览器下

@media only ---> 因为没有only这种设备 规则被忽略

@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

建议在每次抒写media query的时候带上only

and：连接一条查询规则

连接媒体属性 、连接媒体类型

对于所有的连接选项都要匹配成功才能应用规则

,：连接多条查询规则

or(,) : 和and相似

对于所有的连接选项只要匹配成功一个就能应用规则

not：取反

各位观看的小主,如需源文件doc文档或者pdf文档,请私信我或评论,我看到第一时间分享给您