学习，是循序渐进的，重点在“序”，即先学什么。
请完成阅读再回来——https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
以下只关乎布局。
标签属性组合起来太多，根本无法全部记住（过目不忘者请绕行）。
学习使用时可以分为几类：
1、最基本的，包括：div、p、span、img、a；position、float、height/width、color、src、background、margin、padding、font-size、border、href、z-index、line-height。这些，请牢记。
2、基础的，主要包括：input、select、table、tr、td、ul、ol、hr、display、text-align、vertical-align、max-height/min-height、white-space、overflow、transform等。
3、所有的。
其中，最基本的必须完全理解，基础的部分有一定的印象即可，需要使用时再温习一下。
接下来，理解运用几个关键的组合布局。
一、居中。
1、水平居中
<div style="text-align: center; background: #0e0;">
使用text-align属性文字水平居中
</div>
<div style="margin: 0 auto; background: #00e;width=200px>
margin＋auto水平居中，需要宽度为定值
</div>
（通过占用大小具体计算位置，可用于固定宽度的文字和图片）
<div style="background: #ffbe00; " align="center">
我要水平居中
</div>（不推荐）
2、垂直居中
<div style="height: 200px;line-height: 200px;background: #f00;">
常用文字垂直居中
</div>
<div style="height: 200px;background: #0f0; vertical-align: middle; display: table-cell">
table-cell垂直居中
</div>
<div style="height: 500px;background: #f00;">
<div style="height:200px;top:150px;background: #00f;</div>
</div>（通过占用大小具体计算位置，可用于固定高度的文字和图片）
<div style="background: #00f; height: 300px;width: 600px;">
<div style=" height: 20px; width: 40px;position: absolute; margin: auto; background: #0f0;top: 0;bottom: 0;left: 0;right: 0"></div>
</div>（很犀利的方法）
<div style="display: flex;align-items: center;">我要垂直居中</div>
备注：
1、以上是居中的基础方法，在具体场景中需要结合图片文字、高度宽度等具体的情况使用。
2、除了line-height的方式不适用图片外，其他的方式都可以经过适当的调整应用到文字图片以及组合布局上。
二、水平布局
在实际应用中，水平布局的需求是很普遍的，实现的方式也比较多：
1、float方式
<div style="float: left;">水平单元1</div>
<div style="float: left;">水平单元2</div>
<div style="float: right;">水平单元3</div>
备注：
所有单元的宽度和不能超过总宽度，最后一个float可以不要，但是位置有些区别；
如果你使用float，必须要知道clear属性
2、dispay=inline/inline-block/table-cell
<div style="display: table-cell;">水平单元1</div>
<div style="display: table-cell;">水平单元2</div>
<div style="display: table-cell;">水平单元3</div>`
3、position=absolute方式
<div style="position: absolute">水平单元1</div>
<div style="position: absolute;left: 200px;">水平单元2</div>
<div style="position: absolute;left: 400px;">水平单元3</div>
备注：宽度必须已知
4、display=flex方式
<div style="height: 400px;background: #ff8144;display: flex">
<div style="flex: 3;">水平单元1</div>
<div style="flex: 2;">水平单元2</div>
<div style="flex: 4;">水平单元3</div>
</div>
5、transform:translate
<div style="height: 40px;width: 150px;">水平单元1</div>
<div style="height: 40px;width: 150px;transform: translate(150px, -40px)">水平单元2</div>
<div style="height: 40px;width: 150px;transform: translate(300px, -80px)">水平单元3</div>
备注：
1、这种方式需要处理其parent的底部空白；
2、虽然这种方式在实际的水平布局中用的不多，但是这种移动的方式却是处理很多细节不错的思路
三、奇思怪想CSS绘图
1、椭圆
<div style="height: 60px;width: 100px; background: red;border-radius: 50%;">
</div>
tuoyuan.png
2、三角
<div style="height: 0;width: 0;border-left: transparent 30px solid;border-right: transparent 30px solid; border-bottom: red 30px solid;">
</div>
sanjiao.png
三角形的实现主要依赖边框的组合，看看下面的四色风车就很好理解了。
<div style="height: 0;width: 0;border-left: yellow 30px solid;
border-right: blue 30px solid; border-top: green 30px solid;
border-bottom: red 30px solid;"></div>
duocai.png
3、平行四边形
<div style="height: 60px;width: 100px; background: red;transform: skew(-40deg, 0deg)">
</div>
pingxing.png
4、五角星
.star-five {
margin: 50px 0;
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-bottom: 40px solid red;
border-left: 60px solid transparent;
transform: rotate(34deg);
}
.star-five:before, .star-five:after {
position: absolute;
top: 0px;
left: -60px;
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
content: '';
}
.star-five:after {
transform: rotate(-70deg);
border-bottom: 40px solid red;
}
.star-five:before {
transform: rotate(-145deg);
border-bottom: 40px solid red;
top: 3px;
}
<div class="star-five"></div>
fivestar.png
五角星的绘制已经比较复杂，最重要的还是分解，之后主要运用了边框、旋转、绝对定位的组合。用不同的颜色表示各个部分就更清晰了：
duocai_fivestar.png
备注：
1、五角星被分解成三个108deg的三角形；也可以分解为两个108deg三角形和一个顶部的三角形；
2、伪类的运用并不是必须的，也可以用div组合；
3、多彩的五角星看上去又些瑕疵，那是因为角度和长度计算的舍入造成的。
5、红桃
.heart:before,.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
<div class="heart"></div>
heart.png
6、霸气侧漏
.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
position: relative;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 50%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:50%;
width: 12px;
height: 12px;
}
<div class="yi-yang"></div>
yinyang.png
7、基础形状
所有的图形绘制都基于基础形状的组合，主要的思路包括：
I、基础形状：三角，方形，梯形，圆形；
II、CSS基础：圆角、边框、伪类、移动、旋转、倾斜；
III、整体图形按照基本图形分解组合；
8、练习题
尽量使用一个元素完成，熟练掌握伪类：
I、梯形、菱形；
II、正五边形、正六边形、正八边形；
III、微信聊天气泡；
