CSS知识点

css 基础

选择器分类：
元素选择器 a{}
类选择器 .link{}
ID选择器 #id{}
属性选择器 [type=radio]{}
伪元素选择器 ::before{}
伪类选择器 :hover{}
组合选择器 [type=checkbox]+label{}
否定选择器 :not(.link){}
通用选择器 *{}
选择符号 > + ~ 直接子类 相邻 同级

选择器权重：
最高是!important
内联写法比ID还要高
ID选择器 100
属性 类 伪类 10
元素 伪元素 1
其他选择器 0

css 布局

早起以table为主(简单 但回流比较严重)
后来以技巧性布局为主(难 两栏 三栏 圣杯 双飞翼 全屏 九宫格…)
现在有flexbox / grid (偏简单 但兼容性不好)
响应式布局(必备 media query + rem)

flex布局:
2009年w3c提出了一种新的方案flex布局，可以简洁，完整，响应式的实现页面各种布局
兼容： IE10+
基本概念：
采用flex布局的元素，称为Flex容器。他的所有子元素自动称为容器成员，称为容器项目。设置flex布局后，子元素的float clear和vertival-align属性将失效。
容器的常用属性：
flex-direction    justify-content    align-items 所有成员作为一个整体进行在盒子里布局
项目成员的常用属性：
flex    flex-grow    flex-shrink    flex-basis 的缩写 默认 0 1 auto
align-self   单个项目与其他项目不一样的对齐方式 可覆盖align-items
对齐方式：
flex-start    center    flex-end     spacing-between    spacing-around    baseline    stretch

响应式布局
响应式网站是一个设计理念，它是一个多项技术的综合体。一般使用flex grid media query进行布局设计。
优点：
减少工作量(一套代码 多个终端运行)节省时间
每个设备都能得到正确的设计
缺点：
会加载更多的样式
老版本浏览器兼容性不好
viewport
在只有桌面浏览器的时候视口只有一个概念，就是桌面屏幕。到了手机浏览器的时候有了三个视口的概念

• 布局视口： 用一个虚拟的视口把网页布局出来（一般960）
• 可视视口： 设备屏幕可见区域（用户可以在虚拟的视口里面任意缩放类似于放大镜）
• 理想视口： 布局视口在设备上的最佳尺寸（为优化移动端页面添加的）

单位
px em rem

• px 绝对单位，用来精确还原设计稿
• em 相对单位，相对父亲节点的font-size大小进行计算，没有就继续往上找直到HTML根节点，有继承特点，还没有就是默认1em即16px 。缺点就是每个父元素不确定。不好统一页面的缩放。
• rem 相对单位，相对文档的根节点进行计算，没有就是默认的1rem也是16px。

常用布局方式:
table     inline-block     float+margin     position     flexbox

垂直水平居中

.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

css 效果

效果属性:
box-shadow      text-shadow       border-radius
background      clip-path             2d/3d-transform

css 动画

动画的原理：由于视觉暂留的原因，连续播放多张静态图片，呈现的效果就是动态的。
帧动画：

• GIF
• CSS animation (补间 逐帧)
• JS实现帧动画

GIF和CSS animation实现帧动画的不足

1. 不能灵活的控制动画的暂停和播放（GIF CSS3 animation）
2. 不能捕捉到动画完成的事件（GIF）
3. 不能对帧动画做更加灵活的扩展（GIF CSS3 animation）

CSS中的动画类型:
transition   补间动画
keyframe   关键帧动画
补间动画
transition-property
transition-duration
transition-timing-function
transition-delay
简写：    tansition : all 1s ease 0s
关键帧动画
相当于多个补间动画，与元素状态的变化无关
keyframes更灵活 且不用定义动画元素的状态 直接进来就自动动画
@keyframes name 定义的name要和animation的名字一样

JS实现帧动画的原理
1 如果有多张帧图片，用一个image标签取承载图片，定时改变image的src（不推荐）
2 把所有动画的关键帧绘制在一张图片里，把图片作为元素的background-image，定时改变元素的background-postion属性（推荐）

css预处理器

预处理器： 是基于CSS的另外一种语言，通过工具编译成CSS，添加了很多不具备的特性（嵌套 变量 mixin extend loop import…），可以提高代码的复用率，对后期css代码的维护也有明显的提高.
常见的预处理器：

1. sass是基于ruby写的，虽然没有less编译快，但是他有一个移植版本node-sass,可以解决
2. less是基于node写的，用JS写的编译比较快，入门也简单一点
3. Stylus是由TJ大神开发，简洁的语法，更像是一门编程语言

预处理器的作用：
帮助开发者更好的组织CSS代码，提高代码的复用率，提升后期代码的可维护性
预处理器的优缺点以及后处理器：
优点：提高代码的复用率和可维护性
缺点：需要引入编译过程，有学习成本
后处理器：post-css 主要对编译后的css做一些兼容的处理例如加一些前缀,合并图片

Bootstrap

Bootstrap是美国Twitter公司的设计师创建的,他是一个基于HTML CSS JS的前端开发框架,开发的页面非常漂亮，简洁。
Bootstrap的优缺点
优点：不用自己写样式，有现成的样式可以用。而且很漂亮。
缺点：局限性较强，一般用于后台没有设计师参与的情况下风格不会有很大的冲突。如果用于前台的话设计师和bootstrap的风格就会冲突，显得很累赘，因为定制很繁琐，还要详细了解他的结构学习成本也会增大。
Bootstrap如何实现响应式布局
原理：通过media query设置不同分辨率的class。
使用：为不同分辨率设置不同的网格class
如何基于bootstrap定制自己的样式
使用css同名覆盖
修改bootstrap源码

css工程化方案

webpack：一个模块打包器，JS是整个应用的核心入口，一切资源均由JS管理依赖，一切资源均由webpack打包。
webpack中对css的处理
css-loader                 将css变成JS
style-loader               将JS样式插入head
ExtractTextPlugin      将css从JS中提取出来 方便管理
less-loader sass-loader stylus-loader      处理预处理器
post-css      后处理器 postcss本身只有解析能力，各种神奇的特性全靠插件
常见的插件
autoprefixier      自动加前缀
cssnano            压缩代码
cssnext             使用css新的特性
precss               提供变量，mixin，循环的特性（和预处理器很像）

vue中的css

vue处理css有两套方案：一个是随机属性 ，一个是随机选择器。

随机属性就是在样式表中添加 scoped 限定样式的范围。为每一个定义的样式和在模板里引用的样式生自定义一个随机属性，关联起来。
① 随机属性
<style scoped>
   .demo{ color:red; }
</style>
<div class="demo">hello</div>

随机选择器就是在样式表中添加 module准备随机生成选择器，然后再关联到模板里引用的地方，一一对应
② 随机选择器
<style module>
   .demo{ color:red; }
</style>
<div class="this.$style.demo">hello</div>

css模块化

加前缀区分防止命名冲突
分模块定义功能便于维护
缺点：因为需求的不确定性，导致单页文件的部分样式需要提升到common,从而common文件会越来越大
解决办法：
可以使用预处理器的mixin来代替直接书写模块，由于mixin并不直接生成代码，而是通过主动引用，才能生成对应内容。

css3中的新特性

动画          （补间 关键帧）
形态转换    tansform：rotate / translate / scale / skew / origin
选择器       [src^=“https”]  nth-child  nth-of-type  p ~ ul  input:checked
阴影          box-shadow   text-shadow   偏移量x/y 模糊距离 扩展半径 颜色 方向
边框          边框图片 边框圆角
背景          background-clip border-box || padding-box || content-box
                 background-origin border-box || padding-box || content-box
                 background-size contain || cover || auto || length
                 background:url(‘test.jpg’) no-repeat left,url(logo.png) no-repeat right; 多张
反射         reflect    above | below | right | left ，偏移量，遮罩背景图片(img可省)
文字         word-break      keep-all空格和连字符换行    break-all单词内换行
                word-wrap        break-all允许长单词换行，浏览器默认不换则–会溢出
                text-overflow    clip / ellipsis / string         string只有火狐兼容
                text-shadow     水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
渐变        线性渐变 径向渐变
                linear-gredient (to top/0 deg,green,red,blue) 第一个为方向 剩下的渐变颜色
                radial-gradient (circle/ellipsis,green,red,blue) 第一个为形状 剩下的渐变颜色
                radial-gradient(circle at top, rgb(220, 75, 200),rgb(0, 0, 75))
滤镜        用于图片 filter:opacity(.5) / filter:blur(3px)
弹性布局
栅格布局
盒模型定义    box-sizing border-box || padding-box || content-box
媒体查询        监听屏幕尺寸，在不同的尺寸下显示不同的样式