css学习总结
CSS 基础选择器 
CSS 复合选择器 
CSS 基础选择器
CSS 字体属性
CSS 文本属性
CSS 引入方式
CSS 块级，行内，行内块元素
CSS 背景
CSS 盒子模型
行内元素，行内块元素的水品居中。
在其父元素上加text-align：center即可
外边距合并：
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
圆角边框
盒子阴影
文字阴影
接下来就是非常重要的浮动和定位
浮动
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性.
- 浮动的盒子不再保留原先的位置
清除浮动
- 是在所有元素最后加一个块级元素，然后这个块级元素中加clear：both例如 《div style=”clear:both”></div》，
- 父级元素加overflow： hidden、 auto 或 scroll 都可以
-
为什么需要清除浮动？
① 父级没高度。
② 子盒子浮动了。
③ 影响下面布局了，我们就应该清除浮动了。
定位
为什么需要定位 ？
5. 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
6. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
固定定位的特点：（务必记住）
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置。
绝对定位的特点：（务必记住）
7. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
8. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
9. 绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的。
相对定位的特点：（务必记住）
10. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
11. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
只有定位的盒子才有z-index属性
display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏
![在这里插入图片描述](https://img-blog.****img.cn/20200805201105735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgwOTQzOQ==,size_16,color_FFFFFF,t_70
一些技巧
- 精灵图，一次请求就可以把所有用到的图片请求过来，避免了多次请求
- 一些小图标可以去iconfont网站中去找
- 三角形
vertical-align 属性应用
这里说了行内块元素是这样，块级元素不会有这个属性。
对于图片最底下有白色的缝隙，可以把这个元素改成块级元素，就不会有缝隙。
行内块元素的话就不要把vertical-align设置成bottom就行。
文字溢出
把浮动和定位多看看，对于网页的布局是很重要的。
还有就是要区分，块级，行内，行内块元素，理解他们的特点。
浮动之后的特点，有行内块元素的特性
定位的特点