前端那些事二（CSS）

1. Flex布局（弹性布局，默认主轴，交叉轴，讲下flex: 1）

2. flex布局是一种弹性布局，将容器设置为flex布局后，float,clear,vertical-align将会失效，容器默认有两个轴（主轴，垂直交叉轴），默认沿主轴排列。

3. 说下flex有哪些属性

外层容器属性：

flex-direction：控制主副轴 【轴向】

flex-wrap：控制换行(默认不换行)

flex-flow：是上两个的结合，简写

justify-content：主轴对齐方式 【对齐】

align-items：交叉轴对齐方式

align-content：多个轴线对齐

flex： 【弹性】

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <flex-direction> <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子项目属性：

order：0 越小越靠前。

flex-grow：1 等分空间

flex-shrink：1 缩小比例

flex-basis: auto

flex 上面三个的缩写

align-self 对齐方式

1. 使用flex实现垂直居中

2. justify-content:center+align-items:center实现水平垂直居中排列

3. flex: 1

4. flex: 1是flex-grow、flex-shrink、flex-basis的缩写，等分大小

5. 使用flex实现九宫格

6. 响应式布局

7. 你知道哪几种响应式布局的方式

• 媒体查询
• 百分百
• rem
• UI框架

1. 块元素有哪些

2. 说下块元素和行内元素的区别和特点

• 块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度
• 行内元素不会独占一行，相邻的行内元素会排列在同一行里

1. 知道哪些空元素 (类似于img这样的单标签元素)

br、meta、hr、link、input、img

1. css中有哪些属性是可以继承的

• 不可继承的：display、baimargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
• 所有元素可继承：visibility和cursor。
• 内联元素可继承：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。
• 块状元素可继承：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
• 表格元素可继承：border-collapse。

1. 了解css的动画吗？说下transform

• 2D：translate(x,y)平移，scale(x[,y]?)缩放，rotate(angle)旋转
• 3D：translate3d(x,y,z)，scale3d(x,y,z)，rotate3d(x,y,z,angle)

1. CSS3新特性，伪类，伪元素，锚伪类

2. 增加很多选择器：（E:nth-child(n)，E:last-child:，E:disabled，E:checked）
3. CSS3动画相关：Transition过渡，Transform变换（3D旋转）和Animation动画
4. 边框，阴影，圆角，背景（background-size）
5. 文字效果（word-wrap，多行显示省略号）
6. 渐变（linear-gradient，radial-gradient）
7. 盒模型

常见伪类：:focus、:hover、:link、visited、:first-child等；单冒号；伪类的概念

常见伪元素：::after、::before等（单冒号为了兼容IE，是CSS2的语法）。双冒号；用于创建不存在的DOM树元素。

锚伪类：用来表示链接的状态，顺序：a:link - a:visited - a:hover - a:actived。

1. css垂直居中的n种方法

• 宽高不定，水平垂直居中：

  • 绝对定位+transform：

position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);

• flex布局：（主轴居中，交叉轴居中）

display: flex;justify-content:center;align-items:center;

• 父元素设置display: table-cell+vertical-align: middle实现

• 宽高固定：

  • 绝对定位+margin:auto

position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;

• 绝对定位+margin负间距水平垂直居中

position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-right: -50px;

• line-height：针对单行文本

1. 盒模型哪两种模式？什么区别？如何设置

• 标准模式: box-sizing: content-box; 宽高不包括内边距和边框
• 怪异模式: box-sizing: border-box（IE）

1. 请谈谈对px、em、rem、vh、wh等单位的理解。你还用过哪些单位

• px，如果显示器屏幕分辨率相同则可看做是绝对单位，如果显示器屏幕分辨率不同则相对于显示器屏幕分辨率。
• em，相对于该元素font-size属性值，由于font-size是可继承属性，因此如果该元素未被显式设置font-size属性值，则会继承该元素的父元素的font-size值，如果该元素的父元素也未显式设置font-size属性值… …最终继承自根元素（HTML元素），如果根元素也没有被显示设置font-size属性值，则使用用户代理默认的font-size属性值。
• rem，root em, 是CSS3新增的一个相对单位，与em的区别在于：使用rem为元素设置font-size属性值时，仅相对于根元素（HTML元素）。
• vh，viewpoint height，视窗高度，1vh等于视窗高度的1%。
• vw，viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
• in，pt

1. 说下rem,em,px的区别

• rem相对于根元素（html）
• em相对于最近一个设置字体大小的父元素
• px绝对单位，相对于显示器分辨率

1. 说下rem的实现

• rem相对于根元素（html），移动端设置html的font-size: calc(100vw / 7.5);

1. 如何解决不同浏览器的样式兼容性问题？

• 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
• 使用已经处理好此类问题的库，比如 Bootstrap。
• 使用 autoprefixer 自动生成 CSS 属性前缀。
• 使用 Reset CSS 或 Normalize.css。

1. display: none与 visibility：hidden的区别：

2. display: none与 visibility：hidden虽然都是隐藏元素。但前者是使元素从dom结构中消失，后者是dom中依然存在只是不在界面显示。因此前者为回流（需要改变dom结构），后者为重绘。

3. CSS优先级

• !improtant的优先级最高
• 行内样式
• id>class
• 优先级相同时，选择写在后面的样式
• 总结：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

improtant影响哪些，权重值

• 元素选择符： 1 div{ }
• class选择符： 10 .class{ }
• id选择符：100 #id{ }
• 内联样式：1000 style="..."
• !important声明的样式优先级最高，该样式声明会覆盖CSS中任何其他的声明，使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。要优化考虑使用样式规则的优先级来解决问题而不是 !important。

1. base64图，优缺点

base64编码可以将图片添加到css中，实现css请求下载图片。

优点：减少图片请求，（雪碧图也可以减少请求）

缺点：图片的加载会影响css文件大小比源文件大1/3，且IE8以下不兼容。

1. 性能优化：骨架屏

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。

骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。

1. 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。

IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法：只要在<head>之间加入一个<link>或者<script>元素就可以了。

1. 什么是bfc，如何创建bfc？那些可以创建BFC?

BFC(Block formatting context)直译为"块级格式化上下文"。

1. 创建BFC来避免垂直外边距叠加，边界崩塌
2. 创建BFC来清除浮动
3. 创建BFC来实现自适应布局

absolute fixed inline-block table overflow

1. 回流和重绘（为什么要尽量减少），页面渲染

• 回流：影响页面布局时会发生回流
• 重绘：不影响页面布局，
• 回流：DOM结构的增删改
• 重绘: 颜色,背景, 字体等视觉上页面的改变

为什么要减少：

回流一定会触发重绘，重绘不一定触发回流，当页面很大的时候，回流时会重新加载页面。

---

css3新特性：https://juejin.im/entry/6844903486618861575