1、盒模型
标准盒模型：box-sizing:content-box; 总宽度：内容 ( content ) + border + padding 注意这里不算margin 计算页面的总宽度 加margin
IE盒模型(怪异盒模型)： box-sizing:border-box; 宽度 = 内容宽度 ( content + border + padding )
2、弹性盒模型
flex-direction:row //(默认)主轴为水平方向,起点在左端。 flex-direction:row-reverse //主轴为水平方向,起点在右端 flex-direction:column //使用后会使主轴变为y轴 flex-firection:column-reverse //主轴为垂直方向,起点在下沿。 flex-wrap:nowrap //(默认)不换行 flex-wrap:wrap //换行,第一行在上方 flex-wrap:wrap-reverse //换行,第一行在下方 flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。 flex-flow:值1(主轴方向) 值2(是否换行) flex-flow:row nowrap //(默认) justify-content:flex-start //(默认)左对齐 justify-content:flex-end //右对齐 justify-content:center //居中(子元素紧凑居中) justify-content:space-between; //两端对齐,项目之间的间隔都相等 justify-content:space-around; //每个项目两侧的间隔相等 align-items:flex-start //与交叉轴的起点对其 align-items:flex-end //与交叉轴的终点即末尾对其 align-items:center //与交叉轴的中点对其 align-items:baseline //项⽬的第⼀⾏⽂字的基线对齐 align-items:stretch //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度 align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性 align-content:flex-start //与交叉轴的起点对齐 align-content:flex-end //与交叉轴的终点对其 align-content:center //与交叉轴的中点对齐 align-content:space-between //与交叉轴两端对齐，轴线之间的间隔平均分布 align-content:space-around //每根轴线两侧的间隔都相等 align-self:center //允许单个元素与其他元素有不一样的对齐方式 //在弹性子元素上使用。覆盖容器的 align-items 属性。 order属性: (自定义子元素的显示顺序) //用整数值来定义排列顺序，数值小的排在前面。可以为负值。 //注: 默认值为0。父元素必须设置为弹性盒模型 align-self:flex-start //默认 align-self:flex-end //终点
flex-grow属性:(定义弹性盒子元素的扩展比率) //表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例 //比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3 //那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占 //全部空间的 1/6、1/3 和 1/2
flex-shrink属性:(定义弹性盒子元素的收缩比率) //该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例。 //例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1，2 和 3。 //每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时, //比如变成了 540px 之后则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。 //3 个条目分别要缩小 10px、20px 和 30px, //主轴尺寸分别变为 190px、180px 和 170px
3、CSS单位
⑴px：绝对单位。页面按精确像素展示。
⑵em：相对单位，基准点为父节点字体的大小，如果自定义了font-size按自身的来算，整个页面内1em不是一个固定的值。
⑶rem：相对单位，相对于根节点html的font-size的大小来计算。
⑷vw：视窗宽度，1vw等于视窗宽度的1%。
⑸vh：视窗高度：1vh等于视窗高度的1%。
⑹vmin：以宽和高之间最短的一端为基准，如果宽>高，那么1vmin相当于宽的1%；
⑺vmax：以宽和高之间最长的一端为基准，如果宽>高，那么1vmax相当于宽的1%；
⑻%：百分比。
⑼pt：point，大约1/72寸，一寸=3.3333···厘米。
⑽pc：pica，大约6pt，1/6寸。
⑾ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算，IE11以下不支持。
⑿ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。
4、CSS选择器
5、BFC
6、清除浮动的方法
清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示
浮动带来的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动的方法
①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
③给需要清除浮动的元素设置clear：both；
④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：.clearfix：after{content：""；clear：both；display：block；}
.clearfix{zoom：1}
<div class="container clearfix">
<div class="box"></div>
</div>
<div class="main "></div>
.box{
width:100px;
height:100px;
background:yellow;
float: left;
}
.main{
width:150px;
height: 150px;
background:red;
}
.clearfix:after{
content: "";
clear: both;
display: block;
}
.clearfix{
zoom:1;
}
7、层叠上下文
X轴，
Y轴以及表示层叠的
Z轴。一般情况下，元素在页面上沿
X轴Y轴平铺，我们察觉不到它们在
Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
通元素设置position属性 为非static值 并设置z-index属性为具体数值，产生层叠上下文。
8、常见页面布局
⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。
⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
9、CSS预处理，后处理
CSS预处理器：用一种编程语言，为CSS增加了一些编程的特性，最终编译出css文件。比如sass、less、stylus。
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
实现原理：
①取到 DSL 源代码 的 分析树②将含有 动态生成 相关节点的 分析树 转换为 静态分析树
③将 静态分析树 转换为 CSS 的 静态分析树
④将 CSS 的 静态分析树 转换为 CSS 代码
CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题
优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限
实现原理：
①将 源代码 做为 CSS 解析，获得 分析树②对 CSS 的 分析树 进行 后处理
③将 CSS 的 分析树 转换为 CSS 代码
10、CSS3的新特性
新增一：rgba（简单不做解释）；
新增二：弹性布局flex（上面第二题）；
新增三：媒体查询；
新增四：渐变色；
新增五：动画animation，使用@keyframes定义，使用的元素animation：名字 时间；
@keyframes changeWidth{
0%{width:100px}
100%{width:800px}
}
div{
width:100px;
height:100px;
background:red;
animation:changeWidth 10s forwards;
}
11、display有哪些值
display：none 此元素不被显示。display：block 此元素显示为块级元素，支持宽高，独占一行。
display：inline 此元素为内联元素，不支持宽高，不独占一行。
display：table 此元素作为块级表格来显示。
display：flex 此元素为弹性盒模型
display：list-item此元素会作为列表显示
12、相邻的两个inline-block节点为什么会出现间隔，该如何解决？
元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。(不懂没关系，看下面解决方法就明白了)。
方法一：父级font-size：0；子级设置字体大小；
方法二：改变书写方式
//原来 <span>1</span> <span>2</span> <span>3</span> //改变 <span>1</span><span>2</span><span>3</span>
方法三：margin负值
方法四：设置父元素display：table；word-spacing：0(两个记得都要加上)；
13、meta viewport移动端适配
<metaname="viewport" content="width=device-width,initial-scale=1.0">
14、CSS实现宽度自适应100%，宽高16：9的比例的矩形
*{
margin:0;
padding:0;
}
.wrap{
width:20%;
}
.box{
kground:pink;
}
.box p{
width:100%;
height:100%;
position: absolute;
color:#666;
}
<div class="wrap"> <div class="box"> <p>13</p> </div></div>
15、画三角形
div{
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
}
注：上述三角形为正三角形，如果想要倒三角形，那么将border-top的值设为50px solid red，其余的属性值相同。
16、1像素边框问题
物理像素：移动设备出厂时，不同设备自带的不同像素，也称硬件像素。逻辑像素：即css中记录的像素。
为什么会有1像素边框问题：在开发中，在移动端css里面写了1px，实际看起来比1px粗。这就关系到物理像素和逻辑像素的问题了，开发中UI设计师要求的1px是指设备的物理像素1px，而css里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用window.devicePixelRadio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，比例的多少与设备相关。iphone的devicePixelRatio == 2，而我们设置的border：1px 描述的是设备的独立像素，所以被放大到物理像素2px显示，在iphone上就显的比较粗。
解决方案：
⑴媒体查询利用设备像素比缩放，设置小数像素。
优点：简单，好理解。缺点：兼容性差目前IOS8+才支持，IOS7以下、安卓系统都显示0px。
.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
.box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
.border{border:0.333333px solid #333}
}
⑵设置border-image方案
缺点：需要制作图片，圆角可能会出现模糊。
.border-image-1px{
border-width:1px 0px;
-webkit-border-image:url("border.png")2 0 strech;
border-image:url("border.png")2 0 stretch;
}
border-image：距离图片上方2px裁剪图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示。
总结：在边框图片中，裁剪图片上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。
⑶box-shadow方案
优点是没有圆角问题。缺点是颜色不好控制。
.box{
-webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}
参数：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影。
⑷transform：scale(0.5)方案（推荐）：
以上的方案，思想其实都是将1px缩小为0.5px来展示，然而0.5px并不是所有的设备或浏览器都支持。其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，才是我们真正需求的。transform就可以实现。
①设置height：1px，根据媒体查询结合transform缩放为相应的尺寸
.box{
height:1px;
background:#333;
-webkit-transform:scaleY(0.5);
-webkit-transform-origin:0 0;
overflow:hidden;
}
②用: :after和: :before，设置border-bottom：1px solid #000；，然后缩放-webkit-transform：scaleY(0.5)；可以实现两根边线的需求；
.box::after{
content:"";
width:100%;
border-bottom:1px solid #000;
transform:scaleY(0.5);
}
③用: :after设置border：1px solid #000；width：200%；height：200%；然后缩放scaleY(0.5)；优点可以实现圆角京东就是这么实现的，缺点是按钮添加active比较麻烦。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
17.如何实现一个最大的正方形
用 padding-bottom 撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
18.一行水平居中，多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
19.水平垂直居中
大佬的文章： https://juejin.im/post/684490347487900468020.如何实现左右等高布局
table布局兼容性最好，当然flex布局的align-items: stretch;也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
21.link @import导入css
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
- link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
- link支持使用Javascript控制DOM去改变样式；而@import不支持
22. position的值releave和absolute定位远点是？
- absolute 生成绝对定位元素，相对与值部位static的第一个父元素进行定位
- fixed 生成绝对的元素，相对于浏览器窗口进行定位
- relative 生成相对定位的元素，相对于其正常位置进行定位
- static 默认值。没有定位，元素出现在正常出现的流中
- inherit 规定从父元素继承position属性的值
23.经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么
- png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0}来统一
- IE6双边距bug；矿属性变迁float后，又有横向的margin情况下，在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。
- 设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度
- chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决
移动端1px边框问题。解决方案采用伪元素模拟的方式
-
.scale{ position: relative; border:none; } .scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } - 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题
- 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
- ios滚动卡顿。解决方案：在滚动的容器上加上
webkit-over-flow-scrolling:touch; - ios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper
-
.wrapper{ position:relative; overflow:hidden; }
24. margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；
- 需要在border外侧添加空白
- 空白处不需要背景色
- 上下相连的两个盒子之间的空白，需要相互抵消时。
padding是用来隔开元素与内容的间隔。
- 需要在border内侧添加空白
- 空白处需要背景颜色
- 上下相连的两个盒子的空白，希望为两者之和。
margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。
25.什么是伪类，什么是伪元素，他们的区别？
- 伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
- 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
- 伪类使用的一个冒号，伪元素使用两个冒号
- 伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等
26. 什么是外边距合并
外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者
27.为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
28.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
- chrome中，使用collapse值和使用hidden没有区别。
- firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
29.display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
30.position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
31.设置元素浮动后，该元素的display值是多少？
自动变成display:block
32.CSS优化、提高性能的方法有哪些？
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
32.在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。