1.CSS盒模型，在不同浏览器的差异
W3C的标准盒模型:
box-sizing: content-box 是W3C盒子模型 //默认值
box-sizing: border-box 是IE盒子模型
加了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> 元素的首字母 p:first-line 选择每个 <p> 元素的首行 p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素 p:before 在每个 <p> 元素的内容之前插入内容 p:after 在每个 <p> 元素的内容之后插入内容 p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素 p~ul 选择前面有 <p> 元素的每个 <ul> 元素 a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素 a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素 p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素 p:nth-last-child(2) 同上，从最后一个子元素开始计数。 p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数 p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素 :root 选择文档的根元素 p:empty 选择没有子元素的每个 <p> 元素（包括文本节点） #news:target 选择当前活动的 #news 元素 input:enabled 选择每个启用的 <input> 元素 input:disabled 选择每个禁用的 <input> 元素 input:checked 选择每个被选中的 <input> 元素 :not(p) 选择非 <p> 元素的每个元素 ::selection 选择被用户选取的元素部分//等等
-
优先级：
!importance > style > id > class > tag > 通配符 > 继承 > 浏览器默认属性 -
继承：
font,font-family -
如何运用at规则:
1.@media:media分两个部分 一个是媒体类型 一个是媒体功能@media screen and (max-width: 300px){ body{ background-color: #red } }2.@charset
@charset "utf-8"
3.@import
@import "mystyle.css"
@import url("mystyle.css")
4.@key-frames:key-frames产生一种数据，用于定义动画关键帧。
@keyframes diagonal-side {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
5.@fontface:fontface用于定义一种字体，iconfont技术就是利用这个特性来实现
@font-face {
font-family: Gentium;
src: url(http://xxxx);
}
p {
font-family: Gentium, serif;
}
6.@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替
....
3.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
1.relative
相对定位，于当前的标签初始的位置为参照进行定位，不会将对应的标签从父级脱离出来
2.absolute
(重点,频率最高)绝对定位;已定位父元素为参照进行定位,并且已定位父元素的属性 值必须为relative absolute或者fixed,如果父级标签中都没有定位,最终标签会以document为参照进行定位, 元素设置absolute之后,会从父元素中脱离出来(脱离文档流)提升层级。
3.fixed
以浏览器窗口为参照物进行定位,也会让当前元素从文档流中脱离出来(脱离文档流)
4.sticky
5.static
静态定位,无参照物,不会进行定位 - 雪碧图原理：通过background的位置来展示不同的图片
5.水平垂直居中的方案、可以实现6种以上并对比它们的优缺点
- 水平居中
-
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
-
若是块级元素, 该元素设置 margin:0 auto即可.
-
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; //fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器. -
使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:
.son{ display: flex; justify-content: center; } -
使用flex 2009年版本, 父元素display: box;box-pack: center;如下设置:
.parent { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; display: box; box-orient: horizontal; box-pack: center; } -
使用CSS3中新增的transform属性, 子元素设置如下:
.son{ position:absolute; left:50%; transform:translate(-50%,0); } -
使用绝对定位方式, 以及负值的margin-left
.son{ position:absolute; width:固定; left:50%; margin-left:-0.5宽度; } -
使用绝对定位方式, 以及left:0;right:0;margin:0 auto;
.son{ position:absolute; width:固定; left:0; right:0; margin:0 auto; }
- 垂直居中
-
若元素是单行文本, 则可设置 line-height 等于父元素高度
-
若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.
.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; } //这是一种很流行的方法, 也适应IE7. -
可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
优点 元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断. 缺点 IE6~7, 甚至IE8 beta中无效. -
可用 Flex 2012版, 这是CSS布局未来的趋势. Flexbox是CSS3新增属性, 设计初衷是为了解决像垂直居中这样的常见布局问题
.parent { display: flex; align-items: center; } 优点 内容块的宽高任意, 优雅的溢出. 可用于更复杂高级的布局技术中. 缺点 IE8/IE9不支持 需要浏览器厂商前缀 渲染上可能会有一些问题 //使用flex 2009版. .parent { display: box; box-orient: vertical; box-pack: center; } 优点：实现简单, 扩展性强 缺点：兼容性差, 不支持IE -
可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; top:50%; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } 优点：代码量少 缺点：IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象. -
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; top:50%; height:固定; margin-top:-0.5高度; } 优点：适用于所有浏览器. 缺点：父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条. -
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; } 优点：简单 缺点：没有足够空间时, 子元素会被截断, 但不会有滚动条.
6.BFC实现原理，可以解决的问题，如何创建BFC
BFC：块级元素格式化上下文
IFC：内联元素格式化上下文（面试不常考）
-
BFC 原理：
在 BFC 的垂直方向上，边距会发生重叠 BFC 区域不会与 浮动区域重叠 BFC 在页面上是一个独立的容器，与其他元素互不影响 计算 BFC 高度时，浮动元素也会参与计算 -
如何创建 BFC
float 值不为 none，只要设置了浮动，当前元素就创建了一个 BFC position值不为static，只要设置了定位，当前元素就创建了一个 BFC display 值不为默认，只要设置了display，当前元素就创建了一个 BFC overflow 值不为 visible，只要设置了overflow，当前元素就创建了一个 BFC
7.可使用CSS函数复用代码，实现特殊效果
8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种
1.postcsswww.cnblogs.com/dll-ft/p/58…
2.sass-loader sass.bootcss.com/docs/sass-r…
3.less-loader lesscss.cn/
9.CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
默认情况下，CSS 被视为阻塞渲染的资源。
我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染。
浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞。
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
1.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)">
2.声明您的样式表资产时，请密切注意媒体类型和查询，因为它们将严重影响关键渲染路径的性能。
//第一个声明阻塞渲染，适用于所有情况。
<link href="style.css" rel="stylesheet">
// 声明同样阻塞渲染：“all”是默认类型，如果您不指定任何类型，则隐式设置为“all”。因此，
第一个声明和第二个声明实际上是等效的。
<link href="style.css" rel="stylesheet" media="all">
//第三个声明具有动态媒体查询，将在网页加载时计算。根据网页加载时设备的方向，portrait.css
可能阻塞渲染，也可能不阻塞渲染。
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
//最后一个声明只在打印网页时应用，因此网页首次在浏览器中加载时，它不会阻塞渲染。
<link href="print.css" rel="stylesheet" media="print">
10.熟练使用CSS实现常见动画，如渐变、移动、旋转、缩放等等
- animation
-
- 媒体查询:
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
移动端优先首先使用的是min-width，PC端优先使用的max-width。
- 媒体查询:
-
2.百分比布局
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素 的height；子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素 的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度； 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width， 而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比， 不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比， 则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的； -
3.rem布局
REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。 rem响应式的布局思想：一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值 高度值可以设置固定值，设计稿有多大，我们就严格有多大 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值， 布局的时候转化为rem值) js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前
function refreshRem() {
var docEl = doc.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
- 4.视口单位
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
例如，在桌面端浏览器视口尺寸为650px，
那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
那么vw或者vh很类似百分比单位。vw和%的区别为：
//iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}
无论是文本还是布局宽度、间距等都使用vw作为单位:
虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局
给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
-
5.图片响应式
一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。 5.1.使用max-width（图片自适应）:图片自适应意思就是图片能随着容器的大小进行缩放 img { display: inline-block; max-width: 100%; height: auto; }5.2.使用srcset
<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt=""> 如果屏幕的dpi = 1的话则加载1倍图，而dpi = 2则加载2倍图，手机和mac基本上dpi都达到了2以上， 这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。 如果浏览器不支持srcset，则默认加载src里面的图片。5.3.使用background-image
.banner{ background-image: url(/static/large.jpg); } @media screen and (max-width: 767px){ background-image: url(/static/small.jpg); }5.4.使用picture标签
<picture> <source srcset="banner_w1000.jpg" media="(min-width: 801px)"> <source srcset="banner_w800.jpg" media="(max-width: 800px)"> <img src="banner_w800.jpg" alt=""> </picture> <!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 --> <script type="text/javascript" src="js/vendor/picturefill.min.js"></script> picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的， picture和source是不会进行layout的，它们的宽和高都是0。
响应式布局的成型方案
利用上面的方法自己来实现，比如CSS3 Media Query,rem，vw等
Flex弹性布局，兼容性较差
Grid网格布局，兼容性较差
Columns栅格系统，往往需要依赖某个UI库，如Bootstrap
响应式布局的要点
设置viewport
媒体查询
字体的适配（字体单位）
百分比布局
图片的适配（图片的响应式）
结合flex，grid，BFC，栅格系统等已经成型的方案