HTML部分
一、HTML元素：
（1）行级元素：这些元素可以多个存在于一行，水平分布，无法设置他们的高度和宽度。
（2）块级元素：这些元素默认一个占一行，垂直分布，可以设置高度和宽度。
（3）特殊元素：img、button 既不是行级元素，也不是块级元素。
二、HTML语义化：
语义化：html中带了标签，这些标签有特定的含义，就叫语义化。
语义化的好处：
（1）别人阅读你的标签时候，能够看出你的用意，有利于程序员阅读。
（2）浏览器读取方便。
（3）有利于搜索引擎的优化。
（4）有一些标签默认有样式，如果浏览器禁止了css 这些样式也能突出出来是干什么的。
CSS部分（选择器，优先级，定位，浮动，盒模型，外边距合并，BFC）
一、CSS选择器：
（1）id选择器（'#'）
（2）class选择器（'.'）
（3）标签选择器（'div'）
（4）后代选择器（' '）
（5）子代选择器（'>'）
（6）相邻的一个兄弟选择器（'+'）
（7）后面所有的兄弟选择器（'~'）
（7）伪类选择器（':'）
（8）伪元素选择器（'::'）
二、优先级
对于样式，内联的优先级最高（1000），其次是id选择器（100），再然后是class选择器（10），最后是标签选择器（1）。
三、定位
position 里常用共有五种，分别为：
（1）relative 相对定位：定位后空间不释放，位置是相对于自己的初始位置。
（2）absolute 绝对定位：定位后空间释放，位置是相对于自己祖先元素的位置。
（3）fixed 固定定位：定位后空间释放，位置是相对于浏览器的可视窗口。
（4）static 默认定位：元素默认的位置，如果没有定义position,则当前定位的值为static。
（5）stickty 粘性定位：当设置top为0时候，sticky与fixed相似，而当top大于0时，
sticky的生效规则： 1、必须指定top、right、bottom、left四个阈值的其中之一（比如sticky使用了top），才可使粘性定位生效。
2、到达设定的阈值。
比如sticky的阈值为top：0px；
top：0px；时sticky体现fixed的属性。
top>0px 时 sticky还要加成relative的属性。
sticky和fixed的区别是：
sticky可以有fixed的滚动的效果，而fixed没有sticky的粘性的效果，也就是可以不随滚动而消失在视口。
四、浮动
float 有两个值left,right 浮动的元素会脱离文档流，空间会被释放，其中就会出现一个问题，子元素浮动会导致父元素塌陷。
解决父元素塌陷：
（1）给父元素添加一个height。
（2）加上overflow属性 eg:overflow:hidden 。（因为添加后会触发BFC、这个BFC在文章后面会说明）
（3）写一个clearfix样式eg: clearfix{ content:'',display:block,clear:both }当你想清除父元素塌陷的问题时候就加上clearfix。
五、盒模型
盒模型的组成：一个完整的盒模型 = content + padding + border + margin。
分类：标准盒模型、怪异盒模型。
标准盒模型：设置width和height时候只指content的长度和宽度。
怪异盒模型：设置width和height时候指content + padding + border的长度和宽度。（一般在IE6及IE6以下版本）
标准盒模型和怪异盒模型相互转换：box-sizing: content-box (设置为标准盒模型)、border-box(设置为怪异盒模型)
六、外边距合并
外边距合并问题总数出现在两个相邻的元素之间，相邻的部分的margin的值总是取最大的那个。
解决：
（1）父元素添加overflow属性。
overflow:hidden;
（2）父元素加一个边框（最小值是1px）
border:1px solid ;
（3）对父元素或者子元素进行浮动或者是定位即可解决。
（4）只将外边距设在一个元素身上。
七、BFC
BFC 块级格式上下文（全拼Box,Formatting,Content）。
BFC是页面一个隔离的独立容器，容器里的子元素不会影响外面的元素，也就是说，当一个元素触发了BFC 那么这个元素就处于在这个容器里面，不会影响外面。
触发他的条件：
（1）html
（2）这个元素浮动了，即float。
（3）定位里的absoluted或者fixed。
（4）display为inline-block table-cell table-captain flex-inline。
（5）overflow不为visible。
