day12

1.⾕歌chrome======内核(webkit)========前缀（-webkit-）

2.苹果safari======内核（webkit）======前缀(-webkit-)

3.⽕狐firefox=====内核（gecko）=======前缀(-moz-)

4.欧朋opera=======内核（presto）======前缀（-o-)

5.IE=============内核（trident）=====前缀（-ms-)

2.渐进增强和优雅降级(面试题）

渐进增强：根据低版本浏览器，开发基本功能，再根据浏览器版本的升级，逐渐增强用户体验

优雅降级：高版本浏览器开发，用户体验功能是最完善的，随着浏览器的版本降低，用户体验逐渐降低

3.层级选择器（关系选择器）4个

1.后代选择器

E F{}-------E所有的子集F

2.子集选择器

E>F{}--------E的直接子集

3.相邻兄弟选择器

E+F{}--------E紧邻的F（弟）

4.通用选择器

E~F{}-------E后边所有的F

4.属性选择器 7个重要的＋一个鸡肋的

1.具有attr属性的元素

[attr]{}

2.选择器E具有attr属性

E[attr]{}

3.选择器E，属性attr=value的选择器

E[attr="value"]{}

4.属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词（此处value必须是独立属性值）

E[attr~="value"]{}

~代表词组列

5.以value开头的属性

（此处value指字母组合，不一定是独立属性值，可以是独立属性值也可以不是）

E[attr^="value"]{}

6.以value结尾的属性

（此处value指字母组合，不一定是独立属性值）

E[attr$="value"]{}

7.只要包含value属性就可以

（此处value指字母组合，不一定是独立属性值）

E[attr*="value"]{}

8.以value或者value-开头的属性

E[attr|="value"]{}

5.伪类选择器分五种（11+1+4+1+5=22个）

1.结构性伪类选择器

1.E里面的第一个F

E F:first-child{}

2.E里面的最后一个F

E F:last-child{}

3.E里面的第N个F（正序）

E F:nth-child(n){}

4.E里面的第二列F

E F:nth-child(2n){}

5.E里面所有的偶数F

E F:nth-child(2n|even){}

6.E里面所有的奇数F

E F:nth-child(2n-1|odd){}

7.E里面的从后往前的第N个F

E F:nth-last-child(n){}

8.E里面第一个F类型

E F:first-of-type{}

9.E直面只能有唯一的F

E F:only-child{}

10.F里面不能有任何内容（内容包括文本，标签）

F:empty{}

11.根元素（html）

:root{}

2、目标伪类选择器

与锚点链接用法类似，锚点链接主要用于楼层跳转和图片左右上下滚动，该选择器则用于隐藏section点击链接使其出现

E:target========选择匹配E的所有元素，且匹配元素被相关URL指向(锚点链接)

E 要起ID名，放在a链接的href里面

3、UI元素状态伪类选择器

1.form表单中不能够选中的元素

E:disabled{}

2.form表单中能够选中的元素

E:enabled{}

3.form表单中默认选中的元素

E:checked{}

4.内容被选中的状态

E::selection{} 这个选择器只能定义文字内容被选中时的颜色与背景色，其他样式不生效。

4.否定伪类选择器

E:not(){}---------li:not(.list5){} 除了（）之外的所以元素

5.动态伪类选择器

1.a:link{}

2.a:visited{}

3.E:hover{}

4.a:active{}

5.input:focus{}----------聚焦的一个状态

6.字体类型

1.步骤：

1.字体放到对应的font文件夹中，字体一般类型 ttf

2. @font-face {

font-family:"hahaha";

定义字体名称

src: url(font/AaYangGuanQu-2.ttf);

字体引入路径

}

3.使用：

:root{

font-family: "hahaha";

}

7.文字阴影

text-shadow:x y b red;

1.x:x轴阴影位置

2.y:y轴阴影位置

3.b:模糊度（不能为负值）

4.颜色

注意：多个阴影用逗号隔开

8.盒子阴影

box-shadow:x y b size red inset;

x:x轴阴影位置-------------------必写

y:y轴阴影位置-------------------必写

b:模糊度（不能为负值）-----------选写

size:阴影大小-------------------选写

red:颜色----------------------------选写

inset:内阴影--------------------选写

注意：多个阴影用逗号隔开

9.圆角

border-radius:10px;----------四个角都是这个值

border-radius:10px 20px;-----------左上右下右上左下

border-radius:10px 20px 30px;-----------左上右上左下右下

border-radius:10px 20px 30px 40px;---------顺时针

注意：单个值最大值有效值是高度的一半

圆形：宽高一致

border-radius:width/2|50%;

注意：

一般情况下给盒子在添加 overflow:hidden,而不是给图片添加圆角属性，因为后者会造成图片hover前后大小超出盒子范围，前者图片hover前后大小变化会在盒子范围内完成;