CSS面试总结（大致）

1. 盒模型

标准盒模型：总宽度：内容 ( content ) + border + padding + marginIE
盒模型(怪异盒模型)：宽度 = 内容宽度 ( content + border + padding ) + margin

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. 写出transition过渡动画的四个属性？

transition:
transition-property: 过渡属性名
transition-duration: 过渡效果花费的时间  默认是0
transition-timing-function：过渡效果的时间曲线
transition-delay：过渡效果何时开始。默认是 0。

4. 写出弹性盒模型中所有的属性，并解释什么意思?

display:flex;  /*设置弹性盒子*/
flex-direction:column | row /*设置弹性盒子方向*/;
flex-wrap:wrap /*设置是否换行*/；
justify-content:space-around， /*设置水平对齐方式右对齐*/；
align-items:center /*设置垂直对齐方式*/；

5. 弹性盒的属性中有哪些属性可以用在父元素上？

display:flex;
flex-direction
justify-content
align-items
flex-wrap

6. CSS如何实现垂直水平居中？

第一种方式已知宽高：

div{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%; margin-left: -100px;margin-right: -100px;background: #f00;
}

7. flex弹性盒布局与传统盒模型布局的区别和优点？

区别：

普通盒模型中的子元素分配其父元素的空间，而弹性盒模型中的子元素分配其父元素的可用空间
普通盒模型主要针对块级元素和行级元素的布局，而弹性盒是建立在弹性流上，也就是元素可以随着可视区域的变化而呈现流式布局

弹性盒的优点：

能为盒模型提供最大的灵活性，即使是不定宽高的元素依然好用，可以简便、完整、响应式地实现各种页面布局

8. 简述一下你对HTML语义化的理解？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

9. CSS单位

⑴px：绝对单位。页面按精确像素展示。
⑵em：相对单位，基准点为父节点字体的大小，如果自定义了font-size按自身的来算，整个页面内1em不是一个固定的值。
⑶em：相对单位，相对于根节点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以上支持。

10. px、em、rem分别是什么？有什么区别？

px表示“绝对尺寸”
em表示相对尺寸
rem也表示相对尺寸

11. CSS选择器

!important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符选择器
可继承的属性： font-size、font-family、color

不可继承的属性： border、padding、margin、width、height

权重值：

!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1
后代选择器的权重为包含的选择符权重值之和。

CSS3新增的伪类：

p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
：enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；

12. 清除浮动的方法

①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置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>
<style>
.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;
}
</style>

13. 层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。
在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴,Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

14. 常见页面布局

⑴静态布局：
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

⑵流式布局：
流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

⑶弹性布局：
弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；

优点：简单、方便、快速

缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

⑷响应式布局：
采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。

15. 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 代码

16. BFC

BFC是块级格式化上下文。是（Block Formatting Context，BFC）的缩写
是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，
它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流

特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；

下列方式会创建块格式化上下文：

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell）
表格标题（元素的 display 为 table-caption）
匿名表格单元格元素（元素的 display 为 table、inline-table）
display 值为 flow-root 的元素（兼容性不好）
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
元素（display 为 grid 或 inline-grid 元素的直接子元素）
overflow 值不为 visible 的块元素

上述创建BFC的CSS列为以下几类：

`html` 根元素
`float`（不为 none 即可）1. `left`2. `right`
position1. `absolute`2. `fixed`
display1. `inline-block`2. `flex`3. `inline-flex grid`4. `inline-grid table`5. `table-cell`6. `table-caption`7. `flow-root`

用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局

总结：

浮动定位和清除浮动时只会应用于同一个 BFC 内的元素，浮动不会影响其它 BFC 中元素的布局；
而清除浮动只能清除同一 BFC 中在它前面的元素的浮动；
外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；

17. 移动端和PC端有什么区别？

界面布局
使用习惯
网络速度
技术层面

18. 什么是响应式设计？响应式设计的基本原理是什么？

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局

19. 简述一下box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

20. 如何使用纯CSS创建一个三角形？

<style>
div {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;
}
</style>