1.Div盒子模型
网页就如同砌房子一样，它由一块一块砖组成，而这些砖就是div
2.Div的主要内容
注意：盒子与盒子之间的距离才是外边距
3.具体内容
利用CSS对div进行修饰
- 边框颜色：border-color;
宽度：border-width;
样式：border-style;（决定边框是用实线还是粗线）
可以简写为：border : 1px solid red；
- 内边距 padding即内容到边框的距离
内边距padding使用时可控制内容的位置
padding: 20px; 说明上下左右边框距离内容20px；
同时可指定一边来控制距离eg：padding-left: 20px; 说明内容只和左边距相差20px
3）外边距margin 指div块之间的距离
也可指定一边来确定块与块之间的距离，eg：margin-top; margin-bottom;
4)盒子模型圆角边框
border-radius: 20px 10px 50px 30px;
即实现右下角圆点效果
轮播图翻页功能（即又上图右下角圆形的设计）
List-style: none; 用于去除左边的黑点；
列边框
加宽高
将矩形变成一个圆形
将文字水平居中
将文字垂直居中（即行高等于框高）
将列变成行
块与块之间的间距很紧，设置外边距margin
对于border-radius: 1 2 3 4; 指的是分别对盒子中的1234四个角进行修改
Eg：
将一个矩形盒子变成半圆
5）盒子阴影（box-shadow）
作用：将二维的图形转化为3D的效果
体现效果：白键和黑键之间的阴影
4、浮动（）
实现块元素和行元素之间来回的调换
display: inline; (使上下排版变成左右排版)
Span是指内联元素排版，即左右排版
Display: block; (实现将左右排版变成上下排版)
如何将aaabbb加宽
将行元素整成块元素，只有在块元素中才能实现调整宽度
Display: inline-block; 其中div既是inline（行元素）又是block(块元素)；
5.浮动
所谓的标准流元素就是没有加float修饰的块元素
假若A元素是标准流元素，而上一个是含有float：left修饰的元素（即非标准文档流）话，则A元素会被含有float：left修饰的元素覆盖，即标准流会被非标准流覆盖，就好比如:
6.解决浮动带来父级框塌陷的问题
a.利用clear
减少父级宽度，内容不加float浮动话，父级框将会被内容所撑起
假若减少父级高度，两个div同时都加上浮动话，父级将会塌方
将黄色换上clear：both；后
黄色div本身就在浮动，只是把影响它的浮动清除掉；
b.不好用（省略）
c.利用父级overflow：hidden; 解决父级边框塌陷问题
d．父级添加伪类after（较难但经常使用）
Content：‘’；在父级后面添加一个内容，内容为空；
Display: block; 把添加的内容转化为块元素；
Clear：both；清除元素两边的浮动；
7.CSS定位
1）相对定位（position: relative;）
相对定位的盒子仍在标准文档流中的意思是盒子移动前的位置仍将保留，不能被替代；
Eg：left: -100px;
Top:+100px; 指的是左移100px，下移100px
3）绝对定位 position: absolute; （它的位置得看已经定位的父标签）
相对定位和绝对定位的区别在于绝对定位元素移走后，它的位置不会保留，位置会被下一个元素覆盖，而相对定位则是哪怕我这个位置空着，也不给你占。相对定位用得多一点。
4）固定定位position: fixed; （它会随着滚动条一起移动）
5)粘性定位 position: sticky;
很明显，目前top不是0px；
当滚动条下拉，超过一定范围后，此时的top是0px；
6）控制层级z-index: 数字；
哪个的层级越高，就显示哪个色
7.CSS形变 transform
Translate又分为X轴Y轴进行，这种区别与绝对定位话，这种更适合较小距离间的移动
Eg：
明显鼠标移上去，页面有移动的效果，外加阴影
Tramsform: translate(100px，100px) 指的是x轴y轴向右向下平移100px
Scale(0.5)对元素缩放一倍；
Rotate(30deg)顺时针旋转30度
倾斜变成菱形
实战：利用transform实现照片墙效果
实现照片墙关键：鼠标经过照片时照片放大，且将照片摆正
使用伪类hover实现，鼠标经过所实现效果
9.CSS过渡（transition）
过渡是一个描述过程的，是一个从一种状态到另一种状态的过程，就好比如上面所说的照片，当鼠标经过时，照片由静到动。
使用过渡元素目的：即当鼠标经过时，图片缓慢地转动，给读者带来视觉的冲击；
写过渡的步骤（先定义后触发）
Transition: all(指的是对触发中所有元素进行过渡)，这是固定的，记住!
利用hover来触发过渡；
一般触发机制都用hover;
作业：
