web字体 字体图标 CSS高级

----字体格式

1.TureType .ttf 格式

2.OpenType .otf 格式

3.Web Open Font Format .woff 格式

4.Embedded Open Type .eot 格式

5.SVG .svg 格式

----字体图标 iconfont

阿里字库 http://www.iconfont.cn/

Font-Awesome  http://fortawesome.github.io/Font-Awesome/(http://fortawesome.github.io/Font-Awesome/)

----CSS高级

--兼容处理

1.邀请用户升级浏览器

2.meta强制解析模式

x-ua-compatible 用来指定IE浏览器解析编译页面的model 

x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

使用一行代码来指定浏览器使用特定的文档模式

<meta http-equiv="x-ua-compatible" content="IE=9" >

<meta http-equiv="x-ua-compatible" content="IE=8" >

<meta http-equiv="x-ua-compatible" content="IE=7" >

使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

目前最实用的最新写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

3.对多核浏览器进行强制指定渲染内核

<meta name="renderer" content="webkit|ie-comp|ie-stand">

/若页面需默认用极速核，增加标签<meta name="renderer" content="webkit">

若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">

 若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">

4.兼容前缀

不同浏览器因为内核不同,针对同一条css属性的兼容支持程度也不同,我们可以通过加 兼容前缀的方式 让一些标准样式在浏览器内可以使用

5.兼容查询

https://www.caniuse.com/ 查询样式

 6.HACK兼容 主要应对老版本IE浏览器(IE6 IE7 IE8 IE9) 进行单独样式处理

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。 类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><[endif]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

一般是将识别能力强的浏览器的CSS写在后面

----优雅降级和渐进增强

渐进增强 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

渐进增强是向上兼容 优雅降级是向下兼容

----3D变换

transform3D

translateX(x) 水平方向移动 translateY(y) 垂直方向移动 translateZ(z) z轴方向移动 直观表现形式就是大小变化

translate3d(x,y,z) x和y可以是长度值或者百分比 z只能设置长度值

perspective透视 设置3D空间的景深 即z轴的深度 只影响3D转换元素

transform-style 使被转换的子元素保留其 3D 转换  flat子元素将不保留其 3D 位置 | preserve-3d子元素将保留其 3D 位置

visibility 控制元素是否可见  visible | hidden  设置hidden时元素不可见但是保留渲染位置 只是视觉上不可见  如果display:none 则元素不进行渲染在页面上不存在

--visibility和display:none区别

1.visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2.visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3.CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验

4.opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

----filter滤镜

定义了元素的可视效果

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

----css变量

声明变量  body { --foo: #777; } foo为变量名 #777为变量值 --变量名

读取变量 var(--foo)

css变量遵从css优先级原则 如果同一个变量在多个css样式域赋值 变量值会被覆盖

----css content计数器

counter-reset 创建或者重置计数器

counter-increment 递增变量 增一个或多个值

content 插入生成的内容  使用 ::before 和 ::after 伪元素来插入自动生成的内容

counter()或counters()函数 将计数器的值添加到元素

例如 div.count { counter-reset: count1; }  div.count:before { counter-increment: count1 2; }  counter()

----cursor鼠标指针样式

default 默认光标 | auto 默认 | pointer 手指 | help 帮助

----BFC 块级格式化上下文

Block Formatting Contexts  就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此

形成条件

1.根元素

2.float属性不为none

3.position为absolute或者fixed

4.display为inline-block table-cell table-caption flex inline-flex

5.overflow不为visible(hidden auto scroll)

BFC元素具有的特性

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘

计算BFC的高度时，自然也会检测浮动的盒子高度

BFC主要用途

1.清除浮动影响

2.处理外边距穿透

3.实现两栏|三栏自适应布局

----视口单位 viewport 

vw 1vw等于视口宽度的1%

vh 1vh等于视口高度的1%

vmin 选取vw和vh中最小的一个

vmax 选取vw和vh中最大的一个

----可编辑 contentEditable属性

可指定元素内容是否可编辑