前言

题目来自ConardLi的blog
写的是自己的题解，水平有限，所以仅供参考
代码会整合在github，觉得有帮助就给个star吧~

正文

二、HTML和CSS

CSS

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

加了doctype声明就都是w3c标准盒模型了

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

#(id)
.(class)
*所有元素
element 选择该节点
div,p 选择所有div元素和所有p元素
div p 选择div元素内部所有p元素
div>p 选择父元素为div的所有p元素
div+p 选择
[class] 选择带有 class 属性所有元素
[class = blank] 选择 class="blank" 的所有元素
[class ~= blank] 选择 title 属性包含单词 "blank" 的所有元素
[class |= blank] 选择 lang 属性值以 "blank" 开头的所有元素
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:active 选择活动链接
a:hover 选择鼠标指针位于其上的链接
input:focus 选择获得焦点的 input 元素
p:first-letter 选择每个 元素的首字母
p:first-line 选择每个 元素的首行
p:first-child 选择属于父元素的第一个子元素的每个 元素
p:before 在每个 元素的内容之前插入内容
p:after 在每个 元素的内容之后插入内容
p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 元素
p~ul 选择前面有 元素的每个 <ul> 元素
a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素
a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
p:first-of-type 选择属于其父元素的首个 元素的每个 元素
p:last-of-type 选择属于其父元素的最后 元素的每个 元素
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素
p:nth-last-child(2) 同上，从最后一个子元素开始计数。
p:nth-of-type(2) 选择属于其父元素第二个 元素的每个 元素
p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数
p:last-child 选择属于其父元素最后一个子元素每个 元素
:root 选择文档的根元素
p:empty 选择没有子元素的每个 元素（包括文本节点）
#news:target 选择当前活动的 #news 元素
input:enabled 选择每个启用的 <input> 元素
input:disabled 选择每个禁用的 <input> 元素
input:checked 选择每个被选中的 <input> 元素
:not(p) 选择非 元素的每个元素
::selection 选择被用户选取的元素部分
.......
能写全的怕不是人肉MDN
CSS选择器参考手册

优先级：
!importance > style > id > class > tag > 通配符 > 继承 > 浏览器默认属性

继承：
font,font-family

如何运用at规则:

@media
media分两个部分一个是媒体类型一个是媒体功能
例如：
如果文档宽度小于 300 像素则修改背景颜色

@media screen and (max-width: 300px){
  body{
    background-color: #red
  }
}

@charset

@charset "utf-8"

@import

@import "mystyle.css"
@import url("mystyle.css")

@page
@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

@page {
    size: 8.5in 11in;
    margin: 10%;
    @top-left {
        content: "Hamlet";
    }
    @top-right {
        content: "Page " counter(page);
    }
}

@counter-style
@counter-style MDN
@key-frames
key-frames产生一种数据，用于定义动画关键帧。

@keyframes diagonal-side {
    from {
        left: 0;
        top: 0;
    }
    to {
        left: 100px;
        top: 100px;
    }
}

@fontface
fontface用于定义一种字体，iconfont技术就是利用这个特性来实现

@font-face {
    font-family: Gentium;
    src: url(http://xxxx);
}
p {
    font-family: Gentium, serif;
}

@support
support检查环境的特性，它与media比较类似
@namespace
用于跟xml命名空间配合的一个规则，表示内部的css选择器全都带上特定命名空间
@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替

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

CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

伪类的例子有：

:hover
:active
:first-child
:visited

伪元素的例子有：

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

伪元素的应用

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

HTML文档流的排版规则：
如果我们写html不写css，那么排版规则就是默认从上至下(块级元素)，从左到右(内联元素如span)

CSS几种定位的规则：
position:

relative
相对定位，于当前的标签初始的位置为参照进行定位，不会将对应的标签从父级脱离出来
absolute
(重点,频率最高)绝对定位;已定位父元素为参照进行定位,并且已定位父元素的属性值必须为relative absolute或者fixed,如果父级标签中都没有定位,最终标签会以document为参照进行定位, 元素设置absolute之后,会从父元素中脱离出来(脱离文档流)提升层级。
fixed
以浏览器窗口为参照物进行定位,也会让当前元素从文档流中脱离出来(脱离文档流)
sticky
static
静态定位,无参照物,不会进行定位

雪碧图原理：通过background的位置来展示不同的图片

5、水平垂直居中的方案、可以实现6种以上并对比它们的优缺点

16种方法实现水平居中垂直居中

6、BFC实现原理，可以解决的问题，如何创建BFC

7、可使用CSS函数复用代码，实现特殊效果

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

postcss

sass-loader

less-loader

9、CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染

css-module css-scoped
按需加载，防止CSS阻塞渲染

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

animation：

属性	描述
animation-name	指定@keyframes动画的名称
animation-duration	指定动画完成一个周期所需要的时间，单位秒(s)或者毫秒(ms)，默认是0
animation-timing-function	指定动画计时函数，即动画的速度曲线，默认是 "ease"。
animation-delay	指定动画延迟时间，即动画何时开始，默认是0
animation-iteration-count	指定动画播放的次数，默认是1
animation-direction	指定动画播放的方向，默认是normal
animation-fill-mode	动画填充模式，默认是none
animation-play-state	指定动画播放状态，正在运行或暂停。默认是running

11、CSS浏览器兼容性写法，了解不同API在不同浏览器下的兼容性情况

不了解告辞

12、掌握一套完整的响应式布局方案

媒体查询

13、flex

flex：1展开具体的三个属性是什么值
flex：0 1 auto
flex属性是flex-grow, flex-shrink 和 flex-basis的简写
主轴
flex-direction：row 主轴就会是横向的
flex-direction：column 主轴方向就会变为纵向的
交叉轴
个人理解是与主轴垂直

14、a标签周围为什么会有空格

a标签默认是行内元素，而行内元素之间的回车键、多个空格、多个制表符（tab）等均会按一个空格来处理，这样的话，如果相邻的两个a标签不在同一行（换句话说它们之间有回车换行符），则显示在页面的时候它们之间就会出现一个空格的间隙。

<body>
    <div class="space">
        <a href=" ">a</a>
        <a href="##">b</a>
        <a href="##">c</a>
    </div>
</body>

<body>
    <div class="space">
        <a href=" ">a</a><a href="##">b</a><a href="##">c</a>
    </div>
</body>

自检：前端知识清单——CSS

自检：前端知识清单——CSS

前言

正文

二、HTML和CSS

CSS

推荐阅读更多精彩内容