CSS面试篇
面试是一个漫长的过程。但是也是一个让你快速提升的过程。去面试前首先我们必须有牢固的基础知识，足够丰富的项目经历。然后就是表述能力，你要能把你的答案给面试官描述清楚，注意专业词汇，这将大大提高面试官对你的印象分！
1、盒子模型
css中的盒子模型包括IE盒子模型和标准的W3C盒子模型。其盒子模型还是要归宗于box-sizing的属性,盒子模型对应的分被为border-box,content-box。所谓的标准盒子模型(border-box):width = 左右border+左右padding+contentwidth，而我们的IE盒子模型(border-box): width = content+padding+border 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
2、前端一像素问题（画一条0.5px的线）
方法一：transform:scaleY（0.5）使用伪元素设置1px的边框，然后对边框进行缩放(scaleY)
实现思路：
- 1、设定目标元素的参考位置
- 2、给目标元素添加一个伪元素before或者after，并设置绝对定位
- 3、给伪元素添加1px的边框
- 4、用box-sizing: border-box 属性把边框都包进宽和高里面
- 5、宽和高设置为 200%
- 6、整个盒子模型缩小为0.5
- 7、调整盒子模型的位置，以左上角为基准 transform-origin: 0
方法二： border-image 设置图片的边框
3、transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
4、不定高的DIV居中
1.使用flex
在父盒子设置display: flex; justify-content: center;align-items: center
2.使用css的transform
父盒子设置:display:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
3.display：table-cell
父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
5、浮动
- 特性：浮动元素影响的不仅是自己，他会影响周围元素对其进行环绕
- 为什么要清除浮动？（解决父元素高度坍陷问题）
一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流也就是说，父及元素中没有内容可以撑开其高度，这样父级元素height就会被忽略。这就是所谓的高度坍塌
-
如何清除浮动
1.给父级元素定义高度
2.让父级元素也浮动
3.父级定义display:table
4.父元素设置overflow:hidden
5.clearfix:使用内容生成的方式清除浮动
.clearfix:after { // :after选择器向选定的元素之后插入内容
content:""; // 生成内容为空
display: block; // 块级元素显示
clear:both; // 清除前面元素
}
不破坏文档流，没有副作用
6、css选择器分类
基本的：
1.id选择器（id="name"）
2.类选择器（class="head"）
3.标签选择器（body, div, ul, li）
4.全局选择器（*）
复杂的：
1.组合选择器（.head .head_logo）
2.后代选择器 （#head .nav ul li 从父集到子孙集）
3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示)
4.继承选择器
5.伪类选择器（链接样式，a元素的伪类）
6.子选择器（div>p, 带大于号>）
7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）
优先级：
不同级别：总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
- 2.作为style属性写在元素内的样式
- 3.id选择器
- 4.类选择器
- 5.标签选择器
- 6.通配符选择器（*）
- 7.浏览器自定义或继承
同一级别：后写的会覆盖先写的
css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素
7、行内元素和块元素
块元素 行内元素
块元素会独占一行，默认情况下，其宽度自动填满父元素宽度 行元素不会占据一行，会一直排在一行，直到一行排不下 行元素没有宽度和高度属性，块级元素即使设置了宽度，还是会独占一行
块级元素： div p forn ul li h1-h6 行内元素：span img input a i
注意：对于行内元素，font-size指定 他们的content area的高度，由于inline box = 上下的helf-leading，如果leading为0，在这种情况下，font-size指定了inline box的高度font-size指的是字体的高度，但是不能指定每个字形给定字体高度下的实际高度，导致了span的高度大于line-height
8、如何画一个三角形
设置宽高，然后用border去画
width: 0;
height: 0;
border-bottom: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
9、使元素消失的方法
visibility:hidden、display:none、z-index=-1、opacity：0
- 1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
- 2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- 3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
10、为什么css放在顶部而js写在后面
- 1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
- 2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
- 3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验
但是随着JS技术的发展，JS也开始承担页面渲染的工作。比如我们的UI其实可以分被对待，把渲染页面的js放在前面，时间处理的js放在后面
