常见面试题(html+css篇)
1、什么是盒子模型？
解答：css模型（又称：框模型），CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
包含元素内容（content），内边距（padding），边框（border），外边距（margin）几个要素。
2、如果页面不写doctype页面还会解析页面吗？
解答：会， <!DOCTYPE html>表示文档类型的声明，它的目的是告诉解析器应该使用什么样的文档类型来解析文档。
★ 如果没有使用<!DOCTYPE html>，浏览器会按照自己的方式解析页面， 在不同的浏览器就会显示不同的样式。（怪异模式）
★ 如果页面添加了<!DOCTYPE html>， 那么浏览器就会使用W3C的标准来解析渲染页面。（标准模式）
3、定位有几种方式？每种方式定位的基准是什么吗？那种方式会脱标？他们之间会有层级关系吗，谁的层级会高些？
解答：
① 绝对定位（absolute）、相对定位（relative）、固定定位（flex）、静态定位（static）
② 绝对定位：相对于其最接近的一个具有定位属性的父元素进行定位。
相对定位：相对于自身的位置进行定位。
固定定位：相对于浏览器进行定位。
静态定位：默认值，没有定位。
③ 绝对定位和固定定位会脱标。相对定位不会脱标：老家留坑 形影分离
④ 定位元素层级相同，下会盖住上。 为其定位元素设置 z-index：1，依次递增。 父元素层级再高，也不会盖住子元素。
4、浮动会带来哪些影响？哪些方式可以清除浮动？
① 浮动会使当前元素脱离标准流，产生上浮，同时还会影响周边元素（前后标签），以及父元素的位置和width，height。
② 1. 为父元素添加高度，2. 额外标签法，3. 为父元素添加伪类 :after，4. 为父元素设置overflow：hidden。
5、如何让一个不定宽高的div垂直水平居中？
第一种方法：
<style>
html,body {
height: 100%;
}
.container {
height: 100%;
position: relative;
}
.in {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="container">
<div class="in">
我是大盒子里面的小盒子
</div>
</div>
第二种方法
<style>
html,body {
margin:0; padding:0; height:100%;
}
table {
margin:0 auto; height:100%;
}
</style>
<table>
<tr>
<td>
<div class="in">
我就是那个最里面小盒子
</div>
</td>
</tr>
</table>
6、H5/C3增加了哪些新属性，分别列举一下？
7、H5/C3新属性如何做兼容处理？（重要）
8、Css如何画一个三角形？
<style>
div {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid red;
}
</style>
9、H5的本地存储和传统的存储区别是什么？
10、页面之间的参数传递有哪些方式？
11、浏览器缓存和离线缓存的区别是什么吗？
12、为什么会有缓存？如果不想缓存如何避免掉？
解答：
缓存，数据交换的缓冲区（称作Cache），当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找，这样做可以减少系统开销，提高系统效率。
如果不想要缓存在引用js、css文件的url后边加上版本号、发布时间。例：<script type="text/javascript" src="/js/common.js?t=20180428" ></script>
实际开发中可以使用时间戳， 或者随机数
