继承系列

  1. 字体、文本、表格布局、列表、光标、元素可见性（visibility）、还有一些不常见属性（speak、page）
  2. 不可继承：除了以上七点的属性都不具备继承，比如：position、display、浮动等icon全解析
  3. 可显式使用inherit来进行继承、all：inherit继承所有不好用

选择器权重

image.png

图标

  1. 引入方式：img、area实现一张图片多个点击区域、Sprite
  2. 彩色图标：iconfont-symbol方式
  3. 纯色CSS实现的小图标：https://cssicon.space/
  4. SVG：图像中的文本是可选、可搜索的
    1. 使用方式可直接将代码放入页面，维护性不太好
    2. CSS - 图2：请求数增加，对服务负载和加载不好
    3. background-image：背景调用，最好编译成base64，避免请求
    4. SVG Sprite

彻底弄懂前端动画世界

CSS3 有哪些新特性

  1. 圆角、阴影和反射 （Shadow\Reflect）、文字特效、文字渲染、线性渐变、旋转 （transform）缩放， 定位， 倾斜， 动画， 多背景

  2. 多列布局 （multi-columnlayout）

    移动端响应式布局技巧

  3. 设备像素

    1. 固定的物理单位，比如iphone x的像素分辨率为1125 * 2436
    2. 通常说的4X显示屏指的是4096 * 2160
  4. 设备独立像素
    1. iphone x的逻辑分辨率为 375 * 812就是设备独立像素
    2. 一个设备独立像素可能包含多个物理像素，包含的越多，显示越清晰
  5. CSS像素
    1. 在不缩放的情况下，1个CSS像素就等于1个设备像素
    2. 在缩放200%的情况下，缩放的是CSS像素，1个CSS像素就等于4个设备像素（宽2 * 高2）
  6. PPI
    1. 指每英寸的物理像素数，iphone x 5.8 英寸
    2. ppi = Math.sqrt(1126 1125 + 2436 2435) / 5.8 = 463ppi
  7. DPR：devicePixelRatio
    1. 指的是物理像素和设备独立像素的比，即1独立像素由多少物理像素渲染
    2. devicePixelRation = 物理像素 / 设备独立像素
  8. 设计稿
    1. 参照iphone5：320 568 dpr = 2.0 = 640 1136
    2. 参照iphone6：375 667 dpr = 2.0 = 750 1334
    3. 参照iphoneX：375 812 dpr = 3.0 = 1125 2436
  9. layout viewport与visual viewport
  10. viewport缩放适配
  11. 媒体查询@media
    1. @media screen and (min-width:375px) -> 可以缩写为@media (min-width:375px)
  12. vw弹性适配
  13. 动态rem适配
  14. 弹性flex适配

CSS工程化和框架应用

经曲面试真题解析

线性渐变：linear-gradient

  1. 不控制方向，由某个颜色到某个颜色，默认垂直方向
  2. 通过角度控制方向，用to进行表示
  3. 通过方位控制方向，方位最终也会转变为角度

background-size的常见属性及区别

  1. 取值情况：length、percentage、auto、cover、contain
  2. background-size：cover（完全覆盖，等比例缩放，可能会出现裁剪的表现）
  3. background-size：contain（等比例缩放，只要有一边触碰到容器，则不再进行缩放，所以可能会出现留白）

background-origin：图片显示位置

  1. 主要针对图片盒子有边框和padding时图片开始的显示位置
  2. background-origin：border-box：从边框开始显示
  3. background-origin：content-box：从内容开始显示
  4. background-origin：padding-box：从内填充的地方开始显示

background-clip：图片裁剪

  1. 主要针对图片盒子有边框和padding时图片开始的显示位置
  2. background-origin：border-box：从边框往外开始裁剪
  3. background-origin：content-box：从内容往外开始裁剪
  4. background-origin：padding-box：从padding往外开始裁剪

border-radius：圆角

  1. 分为水平半径和垂直半径，起点都在左上角
  2. 可以取四个值：顺时针方向：左上、右上、右下、左下
  3. 四个值：按顺时针四个方向来计算
  4. 三个值：左上、右上和左下、右下
  5. 两个值：左上和右下、右上和左下
  6. 一个值：四个圆角相等

box-shadow

  1. 盒子阴影：X轴水平、Y轴垂直
  2. 第一个值X轴偏移、必填
  3. 第二个值Y轴偏移、必填
  4. 第三、四个值模糊半径
  5. 第五个值颜色
  6. inset表示内阴影
  7. 多个值逗号分隔，多重阴影

text-shadow

  1. 与box-shadow的区别：没有inset，没有内阴影
  2. 四个值：X轴、Y轴、阴影、颜色
  3. 偏移值也必填，无值用0填充
  4. 多个值逗号分隔，多重阴影

filter：图像处理

  1. 常用的为：blur()模糊、opacity()透明度，其它的图形效果一般出图时已经做好了
  2. brightness、contrast、grayscale、hue-rotate、invert、saturate、sepia、drop-shadow

clip-path

  1. 也可以绘制一个圆：clip-path：circle(50%);

CSS机制At-rule

  1. 常规规则：@charset @import @namespace
  2. 嵌套规则：@document @font-face @keyframes @media @page @supports

CSS变量的语法和用法

  1. 变量定义：—变量名，大小写敏感，不能包含$,[,^,(,%等字符，其它都可以，中文、数字，日文都可以
  2. 变量使用：var(—变量名，参数二为如果该变量不存在，就会使用这个默认值)
  3. 变量值为字符串，可以与其它字符串拼接：—str：’hello’，var(—str)’ world’
  4. 变量值是数值，不能与数值单位直接使用：—num：20，margin-top：calc(—num * 1px)
  5. 变量值带单位，直接使用：—单位：20px，margin-top：—单位；
  6. 同样名称的变量时，变量覆盖规则由CSS选择器的权重决定
  7. CSS属性名不能为变量，只能属性值
  8. 可以通过POSTCSS-cssnext插件转换变量写法为兼容性更好的写法

BEM

  1. B：模块名、E：元素、M：修饰：比如顶部操作条（top_operation_bar__box—icon）
  2. __连接模块名，—连接修饰符

CSS选择器权重

  1. !important(10000) > 行内(1000) > id(100) > class(10) > 标签选择器(1) > 通配符 > 继承 > 浏览器默认

选择器的命名

  1. 驼峰命名：userInfo，帕斯卡命名法：UserInfo，匈牙利命名法：user_info

AMCSS样式写法

  1. 与传统class写法不同，AMCSS使用属性名和属性值的写法，使用属性选择器进行匹配
  2. |

各种布局实战

  1. 居中布局
    1. 水平居中布局：七种方案
      1. text-align:center;
      2. margin:0 auto;
      3. 父text-align:center,子display:inline-block;
      4. 定位子绝父相；
      5. flex； ```javascript
  2. 水平居中： 给 div 设置一个宽度， 然后添加 margin:0auto 属性 div { width: 200px; margin: 0auto; } -

  3. 水平居中， 利用 text-align:center 实现 .container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; } ```

    1. 垂直居中布局：七种方案
      1. line-height；vertical-align：middle；父元素设置为table-cell、vertical-align；定位子绝父相；
      2. position：absoulte；top:0; bottom:0; margin: auto；flex；
    2. 水平垂直居中：多种方案
      1. flex；定位；table-cell；定位包含三种；
      2. 定位通过margin负值，或者transform：translate进行变换；或者四个方位为0，margin：auto即可；
  4. 多列布局：花瓣网
    1. 两列布局：左边定宽，右边自适应；右边两边固定宽度；七种
      1. float + margin、float+margin(fix)、float+overflow(利用BFC实现)、table+table-cell、position绝对定位
      2. flex、Grid
      3. table-cell相当于设置为td，父元素设置为table，table天然具有子元素自适应
    2. 三列布局：
      1. 左边两列固定宽度，右边一列自适应，也有可能两边固定宽度，中间自适应
      2. 实现方案和两列布局原理基本一致
    3. 圣杯布局：一种
      1. 圣杯布局和三列布局的区别为，正常三列布局为左中右，圣杯为了让重要的内容优先显示，所以布局为中左右，中宽度自适应，左右固定列宽
    4. 双飞翼：一种
  5. 全屏布局
    1. 等分布局
      1. float + 百分比手动计算，会产生的问题子元素浮动，父元素高度塌陷（兼容性好）
        1. 解决方法：1，给父元素一个固定高度
        2. ovefflow：hidden：通过触发BFC把浮动的高度给计算进去：缺点会把内容也溢出隐藏
        3. clear：both：在浮动子元素后面添加一个DIV，缺点，需要手动添加一个div
        4. 项目中最常用的：封装一个class：clearfix，通过伪元素::after，原理和clear：both一致，不需要添加一个DOM元素，.clearfix::after { content:””; display:block; clear:both }
      2. table
      3. flex
    2. 等高布局：一行被划分成若干列，每一列的高度是相同的值
      1. 利用table、table-cell实现，table具有高度自动等高效果，
      2. 利用margin-bottom、padding-bottom正负值相互抵消来实现
      3. 利用 flex 布局中项目 align-items 属性默认为 stretch， 如果项目未设置高度或设为 auto，将占满整个容器的高度的特性， 来实现多列等高
    3. 全屏布局：一种
      • 利用fixed布局

定位和层叠上下文

  1. 定位的原理和常见值：
    1. static：一般用于覆盖继承过来的position值
    2. realtive
    3. fixed：正常情况下根据浏览器窗口进行定位，但当祖先元素中存符合以下一个条件时，固定定位会相对于该元素进行定位
      1. transfrom属性值不为none;
      2. transform-style：preeserve-3d
      3. perspective值为不none
      4. will-change属性指定了上面3个CSS属性中的任意一个
    4. absoulte：会脱离文档流，相对于除stitac值的定位元素进行定位
    5. sticky：粘性定位，像relative和fixed的结合，元素可以固定于页面指定位置，但并不一定始终固定位置
      1. 四个方位值必须设定一个才会生效，定位参考对象距离其最近的overflow属性值为visible的具有滚动答的祖先元素，元素不会脱离文档流
      2. 默认相对定位，当达到临界值时则为fixed固定定位
  2. 层叠顺序：
    1. 在当前层叠上下文元素比较才有意义，不同层叠上下文不具可比性（子元素层叠再高还是由低级决定）
    2. 同一个层叠上下文顺序：背景或边框 < 块级元素 < 浮动元素 < 行内、行内块元素 ＜ position
    3. 同级后来居上
  3. 层叠产生条件：
    1. position + z-index：数值、html根层叠、
    2. C3属性：display:flex + z-index、transform、opacity、filter

BFC

  1. 实现了一个独立隔离的容器，不受其它元素影响

盒子模型

  1. 正常盒子模型：box-sizing：content-box
    1. width=width
  2. box-sizing：border-box
    1. width=(width + padding + border)
  3. margin两种盒模型都不计算到宽度内

伪类与伪元素

  1. 伪类本质是为了补充CSS选择器的不足
  2. 伪类与伪元素一个单冒号，一个双冒号
  3. 伪元素：::selection ::placeholder ::backdrop ::before ::after ::first-letter ::first-line
  4. 伪元素是无法选中的，真的文字可以选中，结合content使用

CSS单位

  1. px：固定单位
  2. %：相对单位，参照父元素宽度
  3. rem：相对单位 参照根元素字体大小，1rem = root font-size
    1. 为了方便计算，一般将根元素size设为100，或10
    2. 移动端响应式：rem || vw
  4. vw、vh：相对单位，根据视口来改变，把视口分为100等份
  5. em：相对单位，1em等于父元素的字体大小

项目

  1. QQ音乐布局实战
    1. 布局：flex
    2. 响应式：viewport、@media
    3. 单位：html：vm，内容：rem
    4. sass预处理器：变量，嵌套，minixs，extend，easy sass

SASS
**

画一个圆

  1. border-radious
  2. clip-path: circle(50%)

项目中样式重置

  1. css reset 和 normalize.css 有什么区别
  2. reset是将各个浏览器自带的样式重置掉
  3. normalize是让各个浏览器不同的样式尽量保持一致的显示效果

遇到的兼容性问题

  1. chrome对于12号以下的字体，按12来显示，通过transform:scale(0.8)来缩小
  2. 统一getAttribute()获取自定义属性

base64优缺点

  1. 优点：节约一个HTTP请求
  2. 缺点：体积比原图大1/3、无法直接缓存，只能缓存CSS文件、增加HTML CSS页面的解析时间
  3. 为什什么体积会大1/3：

CSS模块化

  1. 全局重置样式：http://meyerweb.com/eric/tools/css/reset/
  2. 全局通用样式类，比如color，clearfix，text-overflow等常用类
  3. 全局Sass通用变量
  4. 滚动条通用样式
  5. 组件库覆写样式