对于静态页面我们首先要分析整体页面的布局，需要用怎么样的布局方式，从上而下进行页面的分析和样式的编写，对于公共的页面可以写在一个组件里，需要时直接调用。
html简述
| 名称 | 特点 | 是否可以改变宽高等 | 常用元素 |
|---|---|---|---|
| 块级元素 | 独占一行 | 可以 | div，p，h1-h6，ul，ol，li |
| 行内块元素 | 一行可以显示多个 | 可以 | input，img，textarea，select，option |
| 行内元素 | 一行可以显示多个 | 不可以，由本身内容大小决定 | span，a，strong，em，del，ins |
css简述
1.设置居中
1.1水平居中
1.1.1块级元素的水平居中，需设置块级元素的宽度，来实现整体的水平居中
width:100px;
margin:0 auto
1.1.2.行内元素，行内块元素的水平居中，给其父元素添加
text-align：center
1.2.垂直居中
1.2.1.line-height与height值相同实现垂直居中。
height:100px;
line-height:100px
1.2.2.通过vertical-align:middle配合设为行内块实现垂直居中
display:inline-block;
vertical-align:middle
2.浮动（float）
一个大盒子（ul）里装了多个小盒子（li）的常用写法
ul {
/*若父元素没有高度，要清除浮动*/
overflow：hidden
}
li {
float: left;
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
margin-right: 20px;
}
3.定位（position）
固定定位常用于弹框
弹框弹起时遮罩层样式,千万不要忘记写left:0,否则会出现左边有块是白色
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
子绝父相（子元素会相对于它最近的父元素进行移动）
子：position: absolute
父：position: relative
用于展示一些在某种事件下才显示出来的元素
.select{
position: absolute;
top: 40%;
left: 10px;
z-index: 999;
}
content必须要有，一个伪元素三角形
.select::before{
position: absolute;
content: '';
left:50%;
top:18px;
transform: translateX(-50%);
border-bottom: 9px solid #fff;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
结合动画使用（animation）
li {
position: relative;
.rotate {
position: absolute;
}
&:hover .turntable {
animation: spin 2s linear 2;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}