CSS基础知识

这里写目录标题

• CSS常用知识点总觉
• 1.CSS盒模型，在不同浏览器的差异
• • css 标准盒子模型
  • IE盒子模型
• 2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则
• • css选择器种类有：
  • css选择器优先级：
  • CSS哪些属性可以继承？
  • 常用at规则及使用示例：
• 3.CSS伪类和伪元素有哪些，它们的区别和实际应用
• • 伪类的例子有：
  • 伪元素的例子有：
• 4.CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理
• • 定位的规则
  • 定位总结
  • 雪碧图实现原理：
• 5.写出尽可能多的水平垂直居中的方案并对比它们的优缺点
• • 水平居中
  • • 行内元素水平居中：
    • 块级元素水平居中：
  • 垂直居中
  • • 行内元素（元素为行内元素）
    • 块级元素
  • 水平垂直居中
  • • 已知高度和宽度的元素
    • 未知高度和宽度的元素
    • 使用flex布局实现（不管元素是否设有宽高）
  • 常用N列布局
  • • 两列布局
    • 三列布局
    • 多列等分布局
    • 多列等高布局
• 6.BFC的布局规则，实现原理，可以解决的问题
• 7.CSS函数有哪些？
• 8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种
• 9.CSS模块化方案有哪些？
• • oocss
  • smacss
  • bem
  • style-components
  • CSS Modules
• 10.CSS如何配置按需加载
• 11. 如何防止CSS阻塞渲染
• 12.熟练使用CSS(3)实现常见动画，如渐变、移动、旋转、缩放等等
• 13.CSS浏览器兼容性写法
• • 浏览器CSS样式初始化
  • 浏览器私有属性
  • CSS hack
• 14.掌握一套完整的响应式布局方案
• • 附两张CSS知识图谱:

CSS常用知识点总觉

1.CSS盒模型，在不同浏览器的差异

css 标准盒子模型

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：

图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果border设置颜色的时候会显示boder颜色当boder颜色是透明时会显示background-color的颜色。而该元素的子元素的是从content开始的。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right;

元素框的总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

IE盒子模型

IE盒子模型如下图：

图中的内层是content依次是content padding border。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width（padding-left+padding-right+border-left+border-right)；

元素框的总高度=height（padding-top+padding-bottom+border-top+border-bottom）;

两个模型宽度和高度的计算（是不一样的）

w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin2+border2+padding2+width; height:margin2+border2+padding2+height;

iE中的盒子模型的width:包括border+padding+width;

上面的两个宽度相加的属性是一样的。因此我们应该选择标准盒子模型，在网页的顶部加上 DOCTYPE 声明。

2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则

css选择器种类有：

通用选择器：*
id选择器：#header{}
class选择器：.header{}
元素选择器：div{}
子选择器：ul > li{}
后代选择器：div p{}

伪类选择器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}

注意：：nth-child 和 ：nth-of-type的区别
nth-child：先选择第几个子元素，然后再匹配前面的限定（标签或者类）；
nth-of-type：主要用于标签作为限定，先选定标签类型组后，再匹配该组的第几个元素；如果用于类作为限定，则限定为选中元素符合类限定，且该元素是它的父元素下同一个标签名的元素中的第几个

 	  /* 类是item，且同一标签中第一个元素*/
 	  .box .item:nth-of-type(1) {
        background-color: blue;
      }
	 /* 类是item，且同一标签中第二个元素*/
      .box .item:nth-of-type(2) {
        background-color: greenyellow;
      }
	  /* 类是item，且同一标签中第三个元素*/
      .box .item:nth-of-type(3) {
        background-color: aquamarine;
      }

    <div class="box">
      <p class="item">test</p>		<!-- 类是item，p标签组中第一个元素 -->
      <p class="item">test2</p>		<!-- 类是item，p标签组中第二个元素 -->
      <span>0</span>
      <div>1</div>					<!-- 类不是item，但却是div标签组中第一个元素 -->
      <div class="item">2</div>		<!-- 类是item，div标签组中第二个元素 -->
      <div class="item">3</div>		<!-- 类是item，div标签组中第三个元素 -->
      <div>4</div>
      <div>5</div>
      <p class="item">test3</p>		<!-- 类是item，p标签组中第三个元素 -->
      <div class="item">6</div>
      <div>7</div>
      <div class="item">8</div>
    </div>

效果图：

伪元素选择器: :after、:before等,例如：li:after

属性选择器: input[type=“text”]

组合选择器：E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）

层次选择器：p~ul 选择前面有p元素的每个ul元素

css选择器优先级：

• 选择器优先级由高到低分别为：
  !important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；
• 当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
  1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
  2. 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
  3. 第三级的优先属性由<link/>标签所引入的样式表定义。
  4. 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
  5. 第五级优先的样式有用户设定。
  6. 最低级的优先权由浏览器默认。

使用场景：

• class使用场景：需要某些特定样式的标签则放在同一个class中，需要此样式的标签可再添加此类。（class不可被javascript中的GetElementByID函数所调用）
• id使用场景：1、根据提供的唯一id号快速获取标签对象，如：document.getElementById(id)
  ；2、用于充当label标签for属性的值：示例：用户名：，表示单击此label标签时，id为userid的标签获得焦点

CSS哪些属性可以继承？

css继承特性主要是指文本方面的继承(比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。

不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承的：
visibility和cursor

终极块级元素可继承的：
text-indent和text-align

内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image

常用at规则及使用示例：

@charset

@import

@namespace

@document

@font-face

@keyframes

@media

@page

@supports

/*定义字符集*/
@charset "utf-8"    
/*导入css文件*/ 
@import "base.css"
/*自定义字体*/
@font-face {}
/*声明CSS3 animation动画关键帧*/
@keyframes fadeIn {}
/*媒体查询*/
@media{}

3.CSS伪类和伪元素有哪些，它们的区别和实际应用

伪类的例子有：

:hover
:active
:first-child
:visited等。

伪元素的例子有：

:first-line
:first-letter
:after
:before

伪类和伪元素的根本区别在于：

它们是否创造了新的元素(抽象)。如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

伪元素在一个选择器里只能出现一次，并且只能出现在末尾;

伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

4.CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理

定位的规则

1. static定位(普通流定位) -------------- 默认定位
2. float定位(浮动定位) 例：float:left;
   有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
3. relative定位(相对定位) position:relative;（一般作为定位元素的包装元素）
   相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
   相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4. absolute定位(绝对定位) position:absolute;
   相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
   fixed(固定定位)position:fixed;
5. 相对于浏览器窗口进行定位，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
6. inherit：继承;规定应该从父元素继承 position 属性的值。

定位总结

css定位方式：

absolute定位(绝对定位) :

1. 子元素定位基准是父元素的内容区（也即是content（width+height）+padding区域，不包括border和margin。
2. 子元素定位的边界是包括子元素的 整体 = margin + border + padding + content ;的margin外边界为基准进行定位。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

1. 普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。
2. 绝对定位：position:absolute/fixed;元素框脱离普通文档流。
3. 浮动：float:left/right;元素脱离普通文档流。

对元素同时使用position和float的情况

经过实践发现，无论position和float谁写在前面或后面，都是position先起作用。

1. 当position为absolute/fixed时，元素已脱离文档流，再对元素应用float失效（即不起作用）。
2. 当position为static/relative时，元素依旧处于普通流中，再对元素应用float起作用。

css定位机制之绝对定位机制与浮动定位机制的区别

1. 用position使元素脱离普通流后，该元素不占据空间（多个定位元素可能会重叠），用top/bottom/left/right决定位置。
2. 用float使元素脱离普通流后，该元素占据空间（多个浮动元素不重叠，只会跟随），用margin,padding等决定和周围内容的距离等。

雪碧图实现原理：

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

5.写出尽可能多的水平垂直居中的方案并对比它们的优缺点

方案如下：

水平居中

行内元素水平居中：

• 首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
• 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

text-align不控制块状元素的对齐，只控制它的行内元素。

块级元素水平居中：

元素定宽：

• 给其设置 margin: 0 auto;

• 父元素为相对定位（position:relative）的情况下：

  设置子元素绝对定位(position:absolute)，然后设置left:50%
  再设置：margin-left: -width/2;
  或者设置： transform: translateX(-50%);

css中的单位

• 绝对单位
  in-英寸；cm；mm；pt-磅；pc-pica
• 相对单位
  em-与元素字号挂钩；ex-与元素字体的“x高度”挂钩；rem-与根元素字号挂钩；px-与CSS像素挂钩；%-另一属性值的百分比

css中可以取百分比的属性

• 定位：top,right,bottom,left;
• 盒模型：width,height,margin,padding;
• 背景：backgroud-position,background-size;
• 文本：text-indent;
• 字体：font-size;
• 转化：translate;

百分比是如何计算的
百分比的计算是相对一个基数的，这个基数与当前元素的包含块有关。具体如下：

• 基于包含块的宽度来计算的属性：margin，padding，width，max-width，min-width，left，right，text-indent
• 基于包含块的高度来计算的属性：top，bottom，height，max-height，min-height
• 基于包含块的字体大小来计算的属性：font-size
• 基于当前字体大小来计算的属性：line-height
• 基于line-height来计算的属性：vertical-align
• 基于元素本身的宽高：background-position：背景图像的位置，分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom;translateX(基元素本身的宽度)；;translateY(基元素本身的高度)；
• 基于元素本身的宽度：background-size但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算;translateX(基元素宽度)；

元素不定宽度：

• 将子元素转为转换成行内块级/行内元素，这时需要设置子元素为display: inline-block; 或 display:
  inline;再给父元素设置 text-align: center;
• 将子元素转为转换成行table元素; 设置:margin：0 auto。
• 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，再设置margin-left:-width/2 ;或者 transform:translateX(-50%);

块元素在不定宽的情况下将填充满父元素的宽度,获得块元素真实宽度转换方法如下

• 转为行内元素：display:inline
• 转为行内块元素：display:inline-block
• 转为table元素：display:table
• 利用绝对定位和固定定位:positon:absolute或fixed
• 利用浮动：float

• 使用flexbox布局实现水平居中（宽度定不定都可以）:
  使用flexbox布局，只需要给待处理的块状元素的父元素添加属性
  display: flex; justify-content: center;

垂直居中

行内元素（元素为行内元素）

单行的行内元素:

只需要设置单行行内元素或者父元素的**(line-height)行高等于盒子的高**即可；

多行的行内元素:

给父元素设置display:table-cell;和vertical-align: middle;属即可；

vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

• 对块级元素不会起作用
• 当**行内元素（inline）**使用该属性：元素相对于当前行居中
• 当表格单元格（table-cell）元素使用该属性：元素中的所有行相对于元素高度居中

块级元素

使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

• 定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
• 不定高度：利用css3新增属性transform: translateY(-50%);

使用flexbox布局实现

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中

已知高度和宽度的元素

• 设置父元素为相对定位，给子元素设置绝对定位：
  top: 0; right: 0; bottom: 0; left: 0; margin:auto;
• 设置父元素为相对定位，给子元素设置绝对定位：
  left: 50%; top: 50%; margin-left: --子元素宽度的一半px; margin-top: --子元素高度的一半px;

未知高度和宽度的元素

• 使用定位属性
  设置父元素为相对定位，给子元素设置绝对定位：
  left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

使用flex布局实现（不管元素是否设有宽高）

设置父元素为flex定位
再设置父元素：justify-content: center; align-items: center;
或者子元素：margin:auto

常用N列布局

多列布局均可用fiex或者grid布局；每种情况不在重复

两列布局

两列自适应：

• 父元素display:table;子元素dispaly:table:cell

一列自适应：
（默认左子列固定）

• 利用margin-left:左子元素设置float;右子元素设置margin-left
• 利用BFC特性：左子元素设置float;右子元素设置over-flow（或者其他可以触发BFC特性的属性）
• 利用display:table特性：父元素display:table;左右子元素设置display:table-cell

三列布局

三列不固定布局：

• 父元素display:table;子元素dispaly:table:cell

一列固定二列自适应：

• 父元素display:table;子元素dispaly:table:cell

两列固定一列自适应：
–两列固定相互不挨着(表现为HTML中子元素结构)

左右定宽，中间自适应，因为这样不利于自适应子元素优先加载和SEO；所以一般都用两列国定在后的布局

• 父元素display:table;子元素dispaly:table:cell
• 三个子元素floate，形成浮动流，再利用relative定位具体元素位置；

代码如下：(此方法同样也适用于两列国定在后的布局)

    <style>
        .parent {
            background-color: thistle;
            /* 父元素预留给左右元素位置 margin和padding 均可*/
            margin: 0 100px;
        }
        
        .l,
        .c,
        .r {
            /* 所有子元素浮动 */
            /* 所有子元素浮动会有形成一个浮动流（和普通流相对应）,所有浮动元素都占据空间，当浮动流空间小于包含元素
             * 当浮动流空间小于包含元素,浮动元素都在一行排列，否则换行排列；
             */
            float: left;
            height: 100px;
        }
        
        .l,
        .r {
            width: 100px;
        }
        
        .l {
            position: relative;
            /* 利用ralative 修正浮动流中元素的定位
             * ralative定位不会修改原浮动流宽度（因为该定位不会脱离文档流），只会改变该浮动元素的定位
            */
            left: -100px;
            background-color: chocolate;
        }
        
        .c {
            /* 自适应子元素自动获取父元素宽度 */
            width: 100%;
            /* 修正浮动流元素之间的距离： 
             * 左元素，中元素，右元素同为浮动；因为父元素宽度无法同时包含所有浮动流元素的宽度，
             * 中元素被挤到下层，右元素又被挤到一层
             * 所以对中元素和右元素做修正
             * 中元素和左元素，能同一层显示的前提：左元素宽度+中元素宽度 <= 父元素宽度
             * 及 此刻浮动流（中元素+左元素）宽度 <= 父元素宽度
            */
            margin-left: -100px;
            background-color: rgb(255, 9, 144);
            height: 200px;
        }
        
        .r {
            /* 修正浮动流元素之间的距离： 
             * 中元素，左元素，右元素能同一层显示的前提：左元素宽度+中元素宽度+友元素宽度 <= 父元素宽度
             * 及 浮动流（中元素+左元素+右元素）宽度 <= 父元素宽度
            */
            margin-left: -100px;
            position: relative;
            /* 利用ralative 修正浮动流中元素的定位
             * ralative定位不会修改原浮动流宽度（因为该定位不会脱离文档流），只会改变该浮动元素的定位
            */
            right: -100px;
            background-color: rgb(51, 6, 110);
            height: 300px;
        }
    </style>
        <div class="parent">
        <div class="l">
            left
        </div>
        <div class="c">
            center
        </div>
        <div class="r">
            right
        </div>
    </div>

• 三个子元素absolute，利用left定位
  代码如下：(此方法同样也适用于两列国定在后的布局)

   /* HTML代码同上 */
   .parent {
            background-color: thistle;
            position: relative;
            margin: 0 100px;
        }
        
        .l,
        .c,
        .r {
            height: 100px;
            position: absolute;
        }
        
        .l,
        .r {
            width: 100px;
        }
        
        .l {
            left: -100px;
            background-color: chocolate;
        }
        
        .c {
            width: 100%;
            background-color: rgb(255, 9, 144);
            height: 200px;
        }
        
        .r {
            left: 100%;
            background-color: rgb(51, 6, 110);
            height: 300px;
        }

–两列固定相互挨着(表现为HTML中子元素结构)

—两列固定在前

• 前两列float或者absolute，最后一列margin-left或者BFC
• 父元素display:table;子元素dispaly:table:cell

—两列固定在后

• 父元素display:table;子元素dispaly:table:cell
• 参考两列固定相互不挨着

圣杯布局：
两侧宽度固定，中间宽度自适应的三列布局（中间元素不需要嵌套子元素）

• 参考两列固定相互不挨着

双飞翼布局：
两侧宽度固定，中间宽度自适应的三列布局（中间元素内部增加子元素用于放置内容）

• 参考两列固定相互不挨着

多列等分布局

• 浮动 + 百分数平分
• 使用display: table布局
  父容器指定display: table，设置布局行为table-layout: fixed，指定每个表格等宽。
• 使用column布局

多列等高布局

所谓多列等高布局，就是多类内容可能不一样，但是保证每一列的高度是相同的，这个高度应该由内容最多的那一列决定。

• 使用display: table布局
  父元素设置display: table，子元素设置display: table-cell，这样布局就是按照表格行为布局，表格单元格默认等高。

6.BFC的布局规则，实现原理，可以解决的问题

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC触发规则
只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC布局规则：

• 内部的Box（块级元素）会在垂直方向上一个接一个的放置。（这条特性不必纠结，即便不在BFC里块级盒子也会垂直排列）
• 同一个BFC下外边距会发生重叠，间距以较大的为准
• BFC 可以阻止元素被浮动元素覆盖
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算（浮动元素导致父元素高度塌陷，BFC会防止塌陷）

BFC的作用及原理：

1. 自适应两栏布局或者三栏布局
2. 清除内部浮动
3. 防止垂直 margin 重叠
   BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

7.CSS函数有哪些？

根据w3cplus中可以划分为以下几类：

属性函数：attr()；

背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；

颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

图形函数：circle()、ellipse()、inset()、polygon()、path()

滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

数学函数：calc()、min()、max()、mixmax()、repeat()；

缓动函数：cubic-bezier()、steps()；

其他函数：counter()、counters()、toggle()、var()、 symbols()。

8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种

● 编译环境不一样，Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中；

● 变量符号不一样，Less是@，而Scss是$；

● 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded；

● 处理条件语句，Sass支持条件语句，可以使用if{}else{},for{}循环等等。LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”；

● 引用外部文件，文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件，ess引用外部文件和css中的@import没什么差异；

● 工具库的不同，Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

● PostCSS介绍：

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

● PostCSS使用

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。现在经常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官网的插件库进行查询。

9.CSS模块化方案有哪些？

css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案。

oocss

面对对象的规则，主要的原则是两种：分离结构和外观，分离容器和内容。

smacss

sma和oocss有很多类似之处，但区分的地方有很多，主要是对样式的分类。分别是：基础、布局、模块、状态、主题

bem

bem就是块、元素、修饰符的思维去写样式。它不涉及具体的css结构，只是建议你如何命名css.

style-components

彻底抛弃 CSS，用 JavaScript 写 CSS 规则,

CSS Modules

使用JS编译原生的CSS文件，使其具备模块化的能力

这些模块化方案都是各有优缺点，如命名约定：命名复杂、缺乏扩展、 CSS Modules当然也有一些缺点(你得先学会它再去谈优劣)。在众多解决方案中，没有绝对的优劣。还是要结合自己的场景来决定。

10.CSS如何配置按需加载

• 使用require.js按需加载CSS

//模块test.js
define(['css!../css/test.css'], function() { //先加载依赖样式
    var test = {};
    return test;
});

//配置
require.config({
    map: { //map告诉RequireJS在任何模块之前，都先载入这个模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    }
});

//调用
require(['test'])

• webpack配置CSS的按需加载

这里以ant desgin css 为例：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    plugins: [
      ["import",{libraryName: "antd", style: 'css'}],   //只需加一行，手动划重点antd按需加载 
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
            },
          },
        },
      ],
    ], 
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction,
  },
}

11. 如何防止CSS阻塞渲染

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，并利用媒体类型和查询来解除对渲染的阻塞。

我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例：

<link href="style.css" rel="stylesheet"> 
<link href="print.css" rel="stylesheet" media="print"> 
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。

例如，上面的第一个样式表声明未提供任何媒体类型或查询，因此它适用于所有情况，也就是说，它始终会阻塞渲染。第二个样式表则不然，它只在打印内容时适用—或许您想重新安排布局、更改字体等等，因此在网页首次加载时，该样式表不需要阻塞渲染。最后，最后一个样式表声明提供由浏览器执行的“媒体查询”：符合条件时，浏览器将阻塞渲染，直至样式表下载并处理完毕。

12.熟练使用CSS(3)实现常见动画，如渐变、移动、旋转、缩放等等

我把一些常用的CSS动画效果代码上传到github了，有需要的同学可以点击下载，CSS常用动画；

另外还有一些CSS动画库，比如：animate.css、magic.css、Hover.css、

13.CSS浏览器兼容性写法

浏览器CSS样式初始化

由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。

*{ 
 margin: 0; 
 padding: 0; 
}

关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这里给大家推荐一个库，Normalize.css，github star数量接近3.4万，选取展示其中几个样式设置，如下：

html { 
 line-height: 1.15; /* Correct the line height in all browsers */ 
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */ 
} 
 
body { 
 margin: 0; 
} 
 
a { 
 background-color: transparent; /* Remove the gray background on active links in IE 10. */ 
} 
 
img { 
 border-style: none; /* Remove the border on images inside links in IE 10. */ 
}

通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。

浏览器私有属性

我们经常会在某个CSS的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。

为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织W3C动作是很慢的。

通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但W3C制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。

但是为避免日后W3C公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。常用的前缀有：

• moz代表firefox浏览器私有属性

• ms代表IE浏览器私有属性

• webkit代表chrome、safari私有属性

• o代表opera私有属性

对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*为Firefox*/ 
 -ms-transform:rotate(-3deg); /*为IE*/ 
 -o-transform:rotate(-3deg); /*为Opera*/ 
 transform:rotate(-3deg);

每个CSS属性写这么一堆兼容性代码，无疑是对生命最大的浪费，可以通过自动化插件(如:Autoprefixer)来处理这块。

CSS hack

有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。

各游览器常用兼容标记一览表:

标记	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5及以下)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√

• +html .bb {} | X| √| X| X| X| X|
  游览器内核 | Trident| Trident| Trident| Gecko| Presto| WebKit|

（以上 .bb 可更换为其它样式名）

4.自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。

14.掌握一套完整的响应式布局方案

比较常用的布局方式有float,position,display,table,flex,grid等。

全屏布局相关方案的兼容性、性能和自适应一览表：

方案	兼容性	性能	是否自适应
Position	好	好	部分自适应
Flex	较差	差	可自适应
Grid	差	较好	可自适应

实际项目使用中一般是根据具体场景去选择相应的布局方式。

附两张CSS知识图谱: