1.盒模型2.BFC3.层叠上下文4.居中布局5.选择器优先级6.清除浮动的方法7.link和@import的区别8.css预处理器9.css动画10.rem布局的原理11.如何实现多端适配？复制代码

盒模型

• 盒模型分类：

• 计算方式：

content box：盒模型的宽高 = content的宽高border box：盒模型的宽高 = content的宽高 + padding + border复制代码

• css切换方式：

• 通过js获取盒模型对应的宽高

1. dom.style.width/height --- 对应 content box只能获取dom元素内联样式设置的宽高，通过外联css文件或者style标签中的样式这只的，都无法获取2. dom.currwntStyle.width/height页面渲染完成后的结果，不管哪种方式都能获取，仅IE支持3. window.getComputedStyle(dom).width/height原理同2，兼容性更好些4. dom.getBoundingClientRect().width/height根据元素在视窗中的绝对位置来获取宽高5. dom.offsetWidth/offsetHeight --- 对应border box   dom.clientWidth/clientHeight --- 对应padding box   dom.scrollWidth/scrollHeight --- 对应padding box, 但是包含溢出的尺寸复制代码

BFC

• 什么是BFC?

其实根据盒子的不同类型，分为Block Formatting Context（BFC） 和 Inline Formatting Context(IFC)

• 这里讲清三个盒子的概念：

块级盒（block-level boxes）: 由块级元素构成的盒子，每个块级元素至少会生成一个盒子，称为主要块级盒。比如li这样的元素，还会生成额外的盒子来防止项目符号。描述父元素和兄弟元素的关系。 块容器盒（block containing boxes）: 指只包含其他块级盒的盒子，或生成行内格式化上下文的盒子，由此生成的盒子只包含行内盒。描述元素和后代元素的关系。 块盒（block boxes）: 既是块级盒，又是块容器盒的盒子

• 什么是Formatting Context？

• BFC触发条件：

1. 根元素2. float 不为none的元素3. position: absolute/fixed 4. display: inline-block/table/table-cell/table-caption/flex/inline-flex5. 块级元素且overflow !== visible复制代码

• BFC特性：

1. 属于同一个BFC的两个相邻的盒子垂直排列2. 同一个BFC的两个相邻的盒子的margin发生重叠3. BFC中的子元素的margin box的左边，与包含块的border box 的左边相接触(子元素 absolute 除外)4. BFC元素不会和float元素重叠5. BFC的高度包含float子元素的高度6. 文字层不会被浮动层覆盖，环绕于周围7. BFC就是页面伤的一个隔离的独立容器，容器内的子元素和外部的元素不会不想影响复制代码

• 应用：

1. 阻止margin重叠：给其中一个盒子添加父元素，并且触发BFC
2. 清除内部浮动（将浮动元素外边包裹一个BFC,使其对外部元素不造成影响）
3. 解决浮动导致的高度坍塌问题（BFC的高度包含浮动元素的高度）
4. 阻止被浮动元素覆盖（形成BFC, 与浮动元素的BFC互不影响）

层叠上下文

• 触发层级的条件：

1. position
2. css3的属性：flex、transform、opacity、filter、will-change、-webkit-overflow-scrolling
3. 根层级上下文（html）

    
        
        
            
    
     background
    
    
    
     z-index-minus
    
    
    
     block
    
    
    
     float
    
    
    
     inline
    
    
    
     z-index-0
    
    
    
     z-index-puls
    
复制代码

居中布局

• 水平居中

1. text-align:center
2. margin: 0 auto;
3. flex+ justify-content: center
4. absolute + transform

• 垂直居中

1. line-height: height
2. flex + align-item: center
3. absolute + transform
4. display:table

• 水平垂直居中

1. absolute + transform
2. flex + justify-content + align-item

选择器优先级

清除浮动的方法

• 在浮动元素末尾添加:after伪类标签 设置clear:both
• 父级元素构造BFC

link 和 @import 的区别

• link 不仅能引入外部的css，还可以定义RSS(作用： )和 定义Rel( )等作用；@import 只能用于加载css
• 都用于引入css的时候，页面加载顺序也不一样：link，只要解析到link,页面会同步加载css，而@import 需要等页面加载完才会加载
• link 可以通过js 动态添加，但是@import不行

css预处理器（sass/less/stylus/postcss）

• 文件分割：将大文件切割成小文件，方便维护
• 选择器嵌套：更容易看清层级关系
• 变量：更容易使视觉风格统一，便于整体风格的替换
• 循环语句：sass举例

@for $i from 1 to 10 { .border-#{$i} {
    　　border: #{$i}px solid blue;　}}复制代码

• 条件语句：sass举例

@if lightness($color) > 30% {　background-color: #000;} @else {　background-color: #fff;}复制代码

• 自动前缀: webpack编译通过postcss插件实现自动加前缀
• mixin复用：简单举例Less中的使用方法，详细讲解可以

1. 简单的mixin.a,#b{
      color: rebeccapurple;}.mixin-class{  .a();}.mixin-id{  #b();}2. 带参数的mixin.border-radius(@radius) { // 设置默认值： .border-radius(@radius: 5px) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}#header {
      .border-radius(4px);}.button {  .border-radius(6px);}复制代码

css动画

• transition -- 过渡动画

transition: property duration timing-function delay;复制代码

• animation -- 可以定义每一帧的动画

animation: keyframe-name duration timing-function delay iteration-count direction;复制代码

• transform -- 静态的

translate、scale、rotate、skew、opacity等属性函数复制代码

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 复制代码

$ue-width: 640; /* ue图的宽度 */@function px2rem($px) {  @return #{$px/$ue-width*100}rem;}p {  width: px2rem(100);}复制代码

@media screen and (min-width: 320px) {    body {font-size: 16px}}@media screen and (min-width: 481px) and (max-width:640px) {    body {font-size: 18px}}@media screen and (min-width: 641px) {    body {font-size: 20px}} div {font-size: 1.2em}复制代码

.selector {    width: 2rem;    border: 1px solid #ddd;}[data-dpr="1"] .selector {    font-size: 14px;}[data-dpr="2"] .selector {    font-size: 28px;}[data-dpr="3"] .selector {    font-size: 42px;}复制代码

document.documentElement.setAttribute('data-dpr', window.devicePixelRatio);复制代码

window.devicePixelRatio复制代码

     复制代码