HTML部分
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
DOCTYPE声明以何种模式渲染文档
严格模式 以浏览器支持的最高标准运行。
混杂模式向后兼容老的浏览器。
如果DOCTYPE不存在则浏览器使用混杂模式。
html标签分类及特性
- 块级元素
- 指本身的属性为display:block的元素
- 默认占满一行
- 可以设置宽高
- 不设宽度默认和父级同宽
- 不设高度默认为本身高度
常见块级：div p table h ul li
- 行内元素
- 本身属性为display:inline的元素
- 本身不能设置宽高以及盒模型相关css属性，可以设置 内外边距水平方向值 ，其宽高由内容决定。
- 不要在内联元素中嵌套块级元素
常见行内元素：a span img select input
- h5标签
section
header
footer
video
audio
canvas - 可替换元素、不可替换元素
浏览器根据行内元素标签和属性，决定显示的内容。可用height width设置宽高
不可替换元素其内容直接表现给用户，用line-height设置宽高
页面导入样式时，link和@import有什么区别
都是外部引用css。
- link可以加载其他事物, @import只能加载css
- link引入css时，页面同时加载，@import要页面完全加载完之后加载。
- link无版本兼容问题，@import低版本不支持
- link方式的样式的权重高于@import的权重
- import在html使用时候需要<style type="text/css">标签
HTML5的离线储存怎么使用，工作原理？
h5离线存储 manifest
无网也能正常访问。更快的加载速度。
希望被缓存的页面会包含manifest属性，都会被加入application cache
<html manifest="demo.appcache">
manifest文件
同时配置manifest文件，告知浏览器被缓存的内容，
CACHE MANIFEST首次下载后进行缓存
NETWORK 与服务器连接，且不会被缓存
FALLBACK 当前页无法访问时回退页面
CACHE MANIFEST
# 2012-02-21 V 1.0.0
/theme.css
/log.gif
/main.js
NETWORK:
login.app
FALLBACK:
/html5/ /404.html
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
更新机制
有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改
3、由程序来更新
CSS部分
1.css盒子模型
box-sizing：content-box是标准模型
box-sizing：border-box是ie模型
2.BFC
CSS中，常用的定位方案有以下几种：
- 文档流
元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。 - 浮动
元素先按普通流位置出现，根据浮动方向偏移 - 绝对定位
元素脱离文档流，元素位置由绝对定位坐标决定。
BFC是block formatting context即块级格式化上下文。有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有BFC的元素可以看做是隔离了的独立容器，容器里的元素不会再布局上影响外面的元素。
触发BFC
- body根元素
- 浮动元素
- 绝对定位 absolute fixed
- display inline-block flex table-ceils
- overflow hidden auto scroll
BFC原理：
- 内部的box会在垂直方向，一个接一个的放置。
- 同一个BFC下外边距会折叠,两个div处于同一个BFC(body下)，所以第一个div的下边距和第二个div的上边距重叠。
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
- 每个元素的margin的左边， 与包含块border的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC区域不会与浮动元素重叠
- 计算BFC高度，浮动元素也参与计算
自适应两栏布局
两个div，设定父元素的宽度不设定高度，第一个div浮动，宽度百分比，高度，第二个元素设定高度，overflow：hidden。
<style>
body{
width:300px;
position:relative
}
.aside{
width:20%;
height:150px;
background:red;
float:left;
}
.main{
height:200px;
background:skyblue;
overflow:hidden
}
</style>
<div class='aside'>
<div class='main'>
根据BFC布局规则
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
BFC的区域不会与float box重叠。
通过通过触发main生成BFC， 来实现自适应两栏布局。
清除内部浮动
将内部有浮动元素的父级元素box，加overflow：hidden
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow:hidden
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
计算BFC高度，浮动元素也参与计算
3.清除浮动
当子元素都是浮动、父元素没有设置高度时，父元素会高度坍塌，可能会影响父级元素的兄弟元素排版。
伪类after
如果子元素都浮动，那么父元素的样式
<style>
.clearfloat:after{
display:block;
clear:both;
content:'';
}
.clearfloat{
zoom:1
}
</style>
在结尾处添加空div标签clear:both
添加空div，clear:both清除浮动，让父级div能自动获取到高度
给父元素定义height
给父元素定义height可以直接撑起来父元素
父元素定义overflow:hidden或者overflow:auto或者浮动或者display
利用BFC
4.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
-
知道宽度的父元素设置
margin:auto，子元素水平居中 - inline-block实现水平居中，父容器加
text-align:center - line-height设置父容器高，使文字垂直居中
- 绝对定位实现水平居中
position:absolute;
left:50%;
right:50%;
margin-left:-50px;
margin-top:-50px;
或者
position:absolute;
left:0;
right:0;
top:0;
bottom:0
margin:auto
+浮动配合相对定位水平居中
原理：浮动元素相对定位到父元素宽度50%的地方，此时并不居中，比居中位置向右多出自身一半的宽度，里面的子元素再一个相对定位，向左一半宽度
<style>
.parent{width:300px;height:200px;}
.wrapper{
float:left;
position:relative;
left:50%;
clear:both;
}
.child{
position:relative;
left:-50%;
}
</style>
对于position:relative的元素而言，百分比的计算是相对于其包含块的“内容”盒（框）的宽高的，
position:absolute按离其最近的有定位属性的祖先元素的（内容高+padding）值来计算的，不算border。
padding 和 margin 是根据包含块的宽度计算的
参见包含块
- flex
5.css3新增的伪元素
- first-of-type
- last-of-type
- nth-child
- only-of-type
6. display有哪些值
- block
- none
- inline-block
- list-item
- table
- inherit
6.圣杯布局
参见 圣杯布局
两边定宽，中间宽度自适应
网友评论