1.怎么让一个不定宽高的 DIV，垂直水平居中?
方法一：Flex
只需要在父盒子设置：display: flex; justify-content: center; center;
方法二：使用 transform
父盒子设置:
- position:relative
Div 设置:
- transform: translate(-50%，-50%);
- position: absolute;
- top: 50%;
- left: 50%;
2.position 几个属性的作用
position 的常见四个属性值:
relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。
relative:相对定位：
相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间（老家留坑）。
absolute:绝对定位：
设置为 absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
fixed:固定定位：
位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3.浮动与清除浮动
3.1 浮动相关知识
float属性的取值：
left：元素向左浮动。
right：元素向右浮动。
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
浮动的特性：
浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。
浮动元素的展示在不同情况下会有不同的规则。
浮动元素在浮动的时候，其margin不会超过包含块的padding。
如果两个元素一个向左浮动，一个向右浮动，左浮动元素的margin-right不会和右浮动元素的margin-left相邻。
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
浮动元素会尽可能地向顶端对齐、向左或向右对
重叠问题：
行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
clear属性：
clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。
取值：left、right、both
3.2 父元素高度塌陷问题
解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。
3.3 清除浮动的方法
方法一：给父级div定义 高度
原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。
优点：代码简洁
缺点：高度被固定死了，是适合内容固定不变的模块。
方法二：使用空元素，相当于隔了一堵墙。
原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了。
方法三：让父级div 也一并浮起来
这样可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。
方法四：父元素设置 overflow：hidden；
原理：这个方法形成了BFC。
优点：代码简洁，不存在结构和语义化问题
缺点：无法显示需要溢出的元素
方法五：父级div定义 伪类::after
.clearfix::after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
优点：结构和语义化完全正确,代码量也适中，可重复利用率
缺点：代码不是非常简洁
4.BFC相关知识
定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC布局规则:
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。
哪些元素会生成 BFC :
根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-caption， flex等
overflow 不为 visible
5.box-sizing是什么
box-sizing属性可以为三个值之一：
content-box，默认值，只计算内容的宽度，border和padding不计算入width之内
padding-box，padding计算入宽度内
border-box，border和padding计算入宽度之内
6.px，em，rem 的区别
px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和@import 的区别是?
四种引入方式：
内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)
link和@import的区别：
link是HTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
8.CSS隐藏元素的几种方式及区别
display:none
元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden
和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
opacity:0
将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
设置height，width等盒模型属性为0
简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。
其他方法
设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
设置元素的position与z-index，将z-index设置成尽量小的负数
9.简述一下src与href的区别
href：
是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src
是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
10.行内元素有哪些？块级元素有哪些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6 等
