学习，是循序渐进的，重点在“序”，即先学什么。
请完成阅读再回来——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>

![](http://upload-images.jianshu.io/upload_images/2069836-56cc42f4c4d8d168.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
（通过占用大小具体计算位置，可用于固定宽度的文字和图片）

<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、微信聊天气泡；

HTML/CSS开门见山