1、区分块级元素、行内元素、行内块元素
块级元素：
h1~h6,p,div,ol,ul,dl,li,table,form;
特点：块级元素可以设置宽高,自动换行,并且默认宽度为100%
行内元素：
span,a,strong(b),em(i),del(s),ins(u),sub,sup……;
特点：行内元素不可以设置宽高，margin值只有水平方向有效，在一行显示，宽高由内容决定
行内块元素：
input,img;
特点：在一行显示，可以设置宽高，默认内容高度，把两者综合了;
2、区别line-height与height
1）定义不一样，前者是行高，后者是元素的高度
2）对象不一样，前者一般适用于文字，而后者一般用于图片或者某个框架
3）当line-height等于height时，文字会居中
4）行高会继承
5）line-height:1.5;表示行高就是字体大小的1.5倍；
6）font:24px/1.5 "微软雅黑";这里的字体大小是24px,行高是：24px * 1.5
3、盒子水平居中：
1)不脱离文档流（正常的带宽的块级元素）：margin:0 auto;
2)脱离文档流（定位或者浮动）：
position:relative;
top:50%;
margin-top:-盒子自身高度;或者是transform:translateX(-50%);
4、盒子垂直居中：
1）position：relative;
top:50px;
margin-top:-盒子自身高度;
2)transform:translateY(-50%)替换margin-top;
3)给父元素加上
display:flex;
align-items:center;垂直居中
justify-content:center;水平居中
5、盒子模型
margin（垂直方向外边距塌陷,垂直方向上一个盒子的bottom和下一个盒子的top中只采用最大的那个值，默认透明色）、border、padding（会撑大带宽的盒子，默认是透明色）、content(显示内容以及图片背景，同时背景也会占据padding，因此padding会有颜色);
box-sizing:content-box 标准盒子模型：盒子实际宽度=width+padding+border+margin;
border-box ie盒子模型:width=border+padding+content
6、浮动（float）
1)float:left/right/none;
2)目的：浮动就是为了让块级元素能在一行内显示，方便布局；
浮动会影响后面的盒子，但是前面的不影响，如果前面的盒子没有浮动，这个盒子浮动了，也不会覆盖前面的，如果后面的盒子不浮动就会占据这个盒子，如果后面的盒子也浮动了，那么会覆盖这个盒子。
3)浮动的特点：
1、如果子盒子有一个有浮动，那么其他的子盒子也要浮动
2、浮动会默认把元素转换成行内块模式，高度默认自适应
3、浮动的元素是不会占据父元素的padding值的
4)清除浮动
目的：为了解决父元素因子元素浮动而引起高度为0的问题。（也就是说如果父元素不给高度，而子元素有浮动，那么父元素的高度是无法由子元素撑高决定的，只能清除浮动后才可以由子元素撑高）
方法：
1、额外标签法：在最后的一个浮动子元素后面添加一个div空标签，然后设置样式为clear：both;
2、给父元素添加overflow:hidden;（通过触发BFC）
3、使用伪元素after清除浮动：（推荐）正常浏览器都是这个
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;//ie6清除浮动
}
最后给父级元素添加clearfix类
<div class="outer clearfix">
<div class="inner"></div>
</div>
4、使用双伪元素清除浮动（小米官网）
.clearfix:before,.clearfx:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
最后也要把clearfix类添加到要清除浮动的父元素上去
7、什么是BFC
BFC就是块级格式化上下文，是一个独立的块级渲染区域，该区域有一套规则约束块级盒子的布局，并且与区域以外的内容无关。
创建BFC的只要满足以下(任意一点)即是：
1)浮动了，
2)绝对定位了，
3）display是inline-block或者是flex
4)overflow的值不是visible
8、定位（position）
1）定位模式与偏移量（top,bottom,left,right)
position：static 主要是清除定位;
relative:相对定位,占位置，并且以自己左上角为准;
absolute：绝对定位，不占位置，完全脱离文档流，如果无父亲并且父亲无定位那么以屏幕为准，如果父亲有定位则以父亲为准;
fixed:固定定位，完全脱离文档流，不占位置，以屏幕为准;
2）绝对定位与固定定位都会使元素转换为行内块元素（float也会使元素转换为行内块元素）
3）只要有定位就可以使用叠放次序z-index，值是无单位的；
4)
注意：position:relative;会默认z-index：0;有提高级别的作用，如果前面使用过position:relative后，则可以使用z-index:1来提高级别
9、元素的显示与隐藏中display与visibility的区别
display:none;隐藏元素，不保留位置
display:block;显示元素
visibility:hidden;隐藏元素，但是保留位置
visibility:visible;显示元素
10、overflow的值有哪些
overflow:hidden;溢出隐藏
overflow:auto;溢出显示滚动条，不溢出没有
overflow:scroll;都显示滚动条
11、鼠标的样式cursor的值
pointer：小手
text:i;
move:+
默认箭头
12、去除图片底下空的方法有哪些
1）display:block; 缺点在于把元素转换为了块级元素
2)vertical-align:bottom|top|middle; 缺点在于会使同行的文字的位置发生变化
vertical-align是文字与图片的垂直对齐，默认是基线（因此不齐），要用top,bottom
13、某些样式
outline:none;去除表单的蓝边框
resize:none;防止拖拽
white-space:nowrap;强制一行显示，默认是自动换行的
text-overflow:ellipsis;溢出文字用省略号显示
14、精灵图/雪碧图（sprite）
定义：是网页处理背景图像的一种方式，把网页中的多个小背景图放在一张大图上。
目的：减少对服务器的请求以及服务器的接受次数，从而提高页面的加载速度。
主要利用：background-image:url(),background-repeat,background-position(都是负数)；
15、图标
<link rel="shortcut ico" href="favicon.ico">
把图片转换为图标可以去bitbug.net(比特虫)
16、字体图标（icomoon.io）
1、使用步骤：
1）先声明字体@font-face{}
2）给相应的标签使用字体span{font-family:"icomoon(可以更改要与上面对应)"}
3）把字体的index文件里面的图标复制在标签里面
2、追加图标：import ico -》json文件-》再重新下载
3、美工制作的图（svg）-》通过import ico 转换-》再重新下载后就是ico了