CSS自学教程--一天搞定CSS（终篇总结）

虽然说是一天搞定CSS，实际上也没有那么简单。只能说让你快速了解常见的CSS知识，解决基本的页面样式布局和设置。

每个独立的CSS知识点都比较简单，但是它们的应用非常灵活，特别是在综合应用中。

粗略说，大概也就十几个知识点：

---

1.CSS用法篇

1.CSS基本概念，以及分类

http://blog.csdn.net/baidu_37107022/article/details/71249345

---

2.表框border—粗细，样式，颜色

http://blog.csdn.net/baidu_37107022/article/details/71250059

---

3.背景background—背景颜色、背景图片以及定位、滚动、重复

http://blog.csdn.net/baidu_37107022/article/details/71250182

---

4.字体font—颜色、大小、字体类别、行高、粗细

http://blog.csdn.net/baidu_37107022/article/details/71271837

---

5.盒模型box—content、padding、border、margin

http://blog.csdn.net/baidu_37107022/article/details/71272900

---

6.文本text–颜色、缩进、单词间距

http://blog.csdn.net/baidu_37107022/article/details/71272560

---

7.CSS选择器—class、id、标签、群组、包含、通配符

http://blog.csdn.net/baidu_37107022/article/details/71440686

---

8.CSS选择器优先级–行间>id>class>标签>通配符

http://blog.csdn.net/baidu_37107022/article/details/71440766

---

9.样式初始化—淘宝样式初始化

http://blog.csdn.net/baidu_37107022/article/details/71440877

---

10.浮动float–left、right、none

http://blog.csdn.net/baidu_37107022/article/details/71515984

---

11.清除浮动float—浮动的缺点、浮动与inline-block区别

清除浮动：http://blog.csdn.net/baidu_37107022/article/details/71557806

浮动（float）的副作用：http://blog.csdn.net/baidu_37107022/article/details/71554283

浮动（float）与inline-block的区别：http://blog.csdn.net/baidu_37107022/article/details/71516634

---

12.overflow—子级溢出父级的问题处理，auto、hidden、visible、scroll

http://blog.csdn.net/baidu_37107022/article/details/71617407

---

13.两种布局—BFC和Layout

BFC布局与普通文档流布局比较：
http://blog.csdn.net/baidu_37107022/article/details/71634396

支持IE的Layout布局：http://blog.csdn.net/baidu_37107022/article/details/71640304

---

14.定位position—fixed，relative，absolute，static

http://blog.csdn.net/baidu_37107022/article/details/71642147

---

15.层级z-index

http://blog.csdn.net/baidu_37107022/article/details/71642885

---

16.表格table—table、thead、tbody、tfoot、tr、th、td

http://blog.csdn.net/baidu_37107022/article/details/71713281

---

17.表单form—input、label、textarea

http://blog.csdn.net/baidu_37107022/article/details/71713723

---

2.浏览器兼容性

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理–01

http://blog.csdn.net/baidu_37107022/article/details/71972223

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理–02

http://blog.csdn.net/baidu_37107022/article/details/71973570

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理–03

http://blog.csdn.net/baidu_37107022/article/details/71977053

---

3.练习篇

【小练习01】CSS–PS提示框制作

http://blog.csdn.net/baidu_37107022/article/details/71330741

【小练习02】CSS–网易产品

http://blog.csdn.net/baidu_37107022/article/details/71330797

【小练习03】CSS-表格（table）–天气预报

http://blog.csdn.net/baidu_37107022/article/details/71713520

【小练习04】HTML+CSS–医药健康小页面

http://blog.csdn.net/baidu_37107022/article/details/71747086

【小练习05】HTML+CSS–淘宝商铺小页面

http://blog.csdn.net/baidu_37107022/article/details/71747249

【小练习06】HTML+CSS–电影公告

http://blog.csdn.net/baidu_37107022/article/details/71747637

【小练习07】HTML+CSS–教学大讲堂

http://blog.csdn.net/baidu_37107022/article/details/71747682

---

4.扩展：CSS Hack

一天搞定CSS（扩展）：CSS Hack
http://blog.csdn.net/baidu_37107022/article/details/72128522