什么是盒子模型
所有HTML元素可以看作盒子，这个盒子包含：内容（content）、内边距（padding）、边框（border）、外边距（margin）。
盒子的宽度
width属性默认等于content的宽度，通过属性设置box-sizing:border-box将宽度定位content+padding+border
如何实现竖直水平居中
- 对于inline或inline-block元素，可设置父元素的
text-align: center;实现水平居中，设置lineheight=height实现竖直居中
.container {
text-align: center;
height: 150px;
ine-height: 150px; /*与height等值*/
}
- 对于block元素，可使用
绝对定位+margin,前提是知道子元素宽高
.container{
position: relative;
}
.item{
width: 100px;
height: 100px
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
- 如果不知道子元素宽度，可用
transform代替
.container{
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 另外，有一个原理：当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分，这个也无需关注子元素宽高
#container{
position: relative;
}
#item{
position: absolute;
margin: auto;
width: 100px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
竖直水平居中还可以用flex布局实现
选择器的权重和优先级
权重分为四级，分别是：
- 代表内联样式，如style="xxx"，权值为 1000
- 代表 ID 选择器，如#content，权值为 100
- 代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10
- 代表元素选择器和伪元素选择器，如div、p，权值为 1
需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
document ready和document load的区别
- 共同点：都代表的是页面文档加载时触发；
- 异同点：ready事件触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）onload事件触发，表示页面包含图片等文件在内的所有元素都加载完成。
px、em、rem的区别
- px是固定单位，指像素值
- 子元素字体大小的em是相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size
- rem是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
如何理解HTML语义化
所谓“语义”就是为了更易读懂，这要分两部分：
- 让人（写程序、读程序）更易读懂：良好风格的变量名
- 让机器（浏览器、搜索引擎）更易读懂：适当使用各类标签
