关于前端:前端那些事二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