老样子，先贴练习网址：
菜鸟教程CSS实例：http://www.runoob.com/css/css-examples.html
W3SCHOOL HTML参考手册：http://www.w3school.com.cn/tags/tag_a.asp
一、今天来学习一下盒模型（Box Model）相关的内容吧，新手直觉这里很重要！
练习题：
# 指定元素的总宽度为250像素：width+padding左右+border左右+margi左右=250px
# 其他练习题就不写在这里了，是关于简单设置元素边框、填充、边距等内容的练习。
知识点：
* 边框（border）：
border：5px solid red；
border-width、border-style、border-color可设置所有边框，或分别设置4个边框；
上下左右边框可单独设置width、style、color，如border-top-color。
* 轮廓（outline）：
位于border之外：color、style、width
* 边距（margin）：没有颜色，透明
* 填充（padding）：没有颜色，透明
* 关于一次设置4个方向的上右下左顺序问题：
4个值：上右下左
3个值：上、左右、下
2个值：上下、左右
1个值：4个方向一样
二、Display与Visibility
隐藏：
display:none; 隐藏的元素不占用空间
visibility:hidden; 隐藏的元素仍然占用空间，不显示出来
visibility:collaspe; 隐藏表格中的一行/列
改变块元素、内联元素
块元素block：占用了全部宽度，在前后都是换行符，如<div> <p> <h1> display:block; 改变为块元素
内联元素inline：只需要必要的宽度，不强制换行，如<span> <a> display:inline; 改变为块元素
三、定位
练习题：
# 元素相对浏览器窗口的位置：position:fixed;
# 元素的相对定位 position:relative;
# 元素的绝对定位 position:absolute;
# 重叠的元素 z-index=-1;
# 设置元素的形状 clip:rect(top,right,bottom,left);
# 如何使用滚动条来显示元素内溢出的内容 overflow:scroll;
# 如何设置浏览器自动溢出处理 overflow:auto;
# 使用像素值设置图像的顶部
# 使用像素值设置图像的底部
# 使用像素值设置图像的左边
# 使用像素值设置图像的右边
# 更改光标 cursor:pointer;
知识点：
* position 属性指定了元素的定位类型。属性值如下：
static：默认，正常位置
fixed：：固定，相对于浏览器窗口固定，窗口滚动时不会动
relative：相对定位，相对正常元素位置的移动
absolute：绝对定位，
sticky：粘性定位，结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，表现为在跨越特定阈值前为相对定位，之后为固定定位。适用于一些特殊场景（如导航栏固定）。
这个特定阈值指的是 top, right, bottom 或 left 之一，so，需指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
（一开始没示例看懂，原来是CSS3浏览器兼容性的问题，根本没看到效果！效果看下面例子吧）
解释参考：https://www.cnblogs.com/coco1s/p/6402723.html
四、浮动
练习题：
# 简单的使用float属性
# 为图像添加边框和边距并浮动到段落的左侧
# 标题和图片向右侧浮动
# 让段落的第一个字母浮动到左侧
# 使用float属性创建一个图片廊
# 开启float - clear属性
# 创建一个水平菜单
知识点：
* float：none（默认无浮动）、left、right
* clear：none（默认允许浮动）、left、right、both 指定不允许元素周围有浮动元素。
# 创建一个没有表格的网页
目标图：
练后感：emmm....一言难尽，做成了下图的狗shi样子。一眼看上去感觉很容易，结果很多地方都不知道该怎么搞。
知识点：
* box-sizing：假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
* 如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法：
#middle::after {
content: "";
clear: both;
display: table;
}加了以后footer立刻就下去了！↓↓↓
清除浮动内层div浮动的3种方式 https://www.cnblogs.com/wdlhao/p/5037678.html
* display
display：block ↓
display：inline-block ↘
display的值很多，目前先了解这三个。
CSS display 属性 http://www.w3school.com.cn/cssref/pr_class_display.asp
五、对齐
知识点：
* 元素居中（水平居中）
margin:auto; 如div
text-align:center; 文本* 元素居中（垂直居中）
padding、line-height、position+transform
* position绝对定位（左右对齐）
position:absolute;
right:0;注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
* float对齐（左右对齐）
float:right;又学了一部分，继续努力！