面试知识点总结
html+css
行内标签和块级标签
行内标签：span u img input select i b...（独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度 ）
块级标签：div p h ul li...（占满一行）多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
可以通过以下方式转换
{
display: inline; //具有行内标签特性
display: inline-block; //使其按行内元素排列,却可以定义宽高
display: block; //具有块级标签特性
}垂直居中的实现
方法一：text-align 和 line-height
//必须是行内元素
.block{
text-align: center;
width: 100%;
height: 800px;
background-color: aquamarine;
}
.nav{
line-height: 300px;
width: 300px;
height: 300px;
background-color: pink;
}
方法二：position+负margin
//固定宽高
.block{
position: relative;
width: 100%;
height: 800px;
background-color: aquamarine;
}
.nav{
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
width: 300px;
height: 300px;
background-color: pink;
}
方法三：position+margin auto
//固定宽高
.block{
position: relative;
width: 100%;
height: 800px;
background-color: aquamarine;
}
.nav{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
width: 300px;
height: 300px;
background-color: pink;
}
方法四：position+transform
//无宽高
.block{
position: relative;
width: 100%;
height: 800px;
background-color: aquamarine;
}
.nav{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: pink;
}
方法五：flex
//无宽高
.block{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 800px;
background-color: aquamarine;
}
.nav{
background-color: pink;
}清除浮动
原因：css在设置浮动的时候，会脱离文档流，使父元素div宽度高度不能撑开。
解决方式：①父元素使用overflow：hidden
② 在浮动元素的最后面添加一个新元素，应用clear:both
③给父元素定义一个固定高度
html语义化
语义化是html结构更清晰，便于浏览器解析，利于SEO搜素，使代码更好理解，便于维护。（header、footer、nav...）
文档流
行内元素从左至右排列，块级元素从上至下的排列,即为文档流
HTML5 的新特性和css3新特性
标签： nav、header、footer、article 、section等。ideo、audio、canvas、localStorage、sessionStorage
颜色rgba、border-radius、box-shadow、transform等
盒模型: 标准模型与IE模型
盒模型都包含4个部分：content、padding、border、margin。标准盒模型与IE盒模型的区别在于设置width/height的范围不同。标准盒模型的width = content ; 而IE盒模型的width = content + padding + border
权重问题
!important > 内联样式 > id选择器 > class选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 通配符
link与@import区别
①link 是基于XHML标签的，无兼容性；@import是css提供的， 只用IE5以上才兼容
②link 标签引入的css是同步加载的； @import 引入的css只有等页面加载完毕后，才开始加载
③link 标签不仅可以加载css文件，还可以定义RSS、rel连接属性。
④可以使用js操作DOM，插入link标签；而无法使用操作DOM的方式插入@import。
BFC、触发条件、可解决的问题
BFC：块级格式上下文，是css的一个布局的概念，是一块独立于外界的一个区域。触发条件： 根元素(html)、float不为none、position设置为absolute或者fixed、overflow值不为visible、display值为inline-block/table-cell/tabel-caption。可解决的问题：清除浮动、margin塌陷问题、可做两栏布局自适应。
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。px、em、rem的区别
px 是绝对长度单位。em 是相对长度单位，相对于父元素。rem 是相对长度单位，相对于根元素。vw：视窗宽度，1vw等于视窗宽度的1%。
![]()
标签的alt和title区别
①alt：加载失败时显示 ②title：鼠标进入到图片时会显示
cookie，sessionStorage 和 localStorage的区别
①cookie 一般用来存储验证客户端身份的数据。存储大小不超过4k， 并且在第一次请求之后，浏览器都会在请求头上添加cookie字段带上cookie，发到服务端。过期之前一直有效
②localStorage 是永久存储，大小为5M，只有手动清除数据才会失效。
③sessionStorage 是会话存储，大小为5M，当浏览器窗口关闭时数据失效。
圣杯布局和双飞翼布局
都是三栏布局，即两边宽度固定，中间宽度自适应。
- 圣杯布局：中间元素的大小就是屏幕总宽减去left和right宽度值
- 双飞翼：中间元素的宽度依然是全屏宽的100%，只不过将显示内容用一个小div包起来，再用margin值将左右顶开
两者出来的页面效果是一样的
Doctype是什么
声明位于文档中最前面的位置，在标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（注：在 HTML 中某些元素可以彼此不正确地嵌套，在 XHTML 中，所有的元素必须正确地嵌套。在XHTML中元素必须被嵌套于 根元素中。在HTML中允许一些不规范的写copy法，但是在XHTML则式不可以的。）
关于伪类和伪元素
伪类：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息（:hover、:first-child）
伪元素：伪元素可以创建一些文档语言无法创建的虚拟元素（::before、::aftter）
display:none;opacity:0;visibilty:hidden区别
①display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击；
②visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击；
③opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击；