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

水深无声 2022-06-16 09:57 262阅读 0赞

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

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

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

--------------------

# **1.CSS用法篇** #

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

[http://blog.csdn.net/baidu\_37107022/article/details/71249345][http_blog.csdn.net_baidu_37107022_article_details_71249345]

--------------------

## [2.表框border—粗细，样式，颜色][2._border] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71250059][http_blog.csdn.net_baidu_37107022_article_details_71250059]

--------------------

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

[http://blog.csdn.net/baidu\_37107022/article/details/71250182][http_blog.csdn.net_baidu_37107022_article_details_71250182]

--------------------

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

[http://blog.csdn.net/baidu\_37107022/article/details/71271837][http_blog.csdn.net_baidu_37107022_article_details_71271837]

--------------------

## [5.盒模型box—content、padding、border、margin][5._box_content_padding_border_margin] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71272900][http_blog.csdn.net_baidu_37107022_article_details_71272900]

--------------------

## [6.文本text–颜色、缩进、单词间距][6._text] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71272560][http_blog.csdn.net_baidu_37107022_article_details_71272560]

--------------------

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

[http://blog.csdn.net/baidu\_37107022/article/details/71440686][http_blog.csdn.net_baidu_37107022_article_details_71440686]

--------------------

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

[http://blog.csdn.net/baidu\_37107022/article/details/71440766][http_blog.csdn.net_baidu_37107022_article_details_71440766]

--------------------

## [9.样式初始化—淘宝样式初始化][9.] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71440877][http_blog.csdn.net_baidu_37107022_article_details_71440877]

--------------------

## [10.浮动float–left、right、none][10._float_left_right_none] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71515984][http_blog.csdn.net_baidu_37107022_article_details_71515984]

--------------------

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

**清除浮动：[http://blog.csdn.net/baidu\_37107022/article/details/71557806][http_blog.csdn.net_baidu_37107022_article_details_71557806]**

**浮动（float）的副作用：[http://blog.csdn.net/baidu\_37107022/article/details/71554283][http_blog.csdn.net_baidu_37107022_article_details_71554283]**

**浮动（float）与inline-block的区别：[http://blog.csdn.net/baidu\_37107022/article/details/71516634][http_blog.csdn.net_baidu_37107022_article_details_71516634]**

--------------------

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

[http://blog.csdn.net/baidu\_37107022/article/details/71617407][http_blog.csdn.net_baidu_37107022_article_details_71617407]

--------------------

## [13.两种布局—BFC和Layout][13._BFC_Layout] ##

**BFC布局与普通文档流布局比较：**  
**[http://blog.csdn.net/baidu\_37107022/article/details/71634396][http_blog.csdn.net_baidu_37107022_article_details_71634396]**

**支持IE的Layout布局：[http://blog.csdn.net/baidu\_37107022/article/details/71640304][http_blog.csdn.net_baidu_37107022_article_details_71640304]**

--------------------

## [14.定位position—fixed，relative，absolute，static][14._position_fixed_relative_absolute_static] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71642147][http_blog.csdn.net_baidu_37107022_article_details_71642147]

--------------------

## [15.层级z-index][15._z-index] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71642885][http_blog.csdn.net_baidu_37107022_article_details_71642885]

--------------------

## [16.表格table—table、thead、tbody、tfoot、tr、th、td][16._table_table_thead_tbody_tfoot_tr_th_td] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71713281][http_blog.csdn.net_baidu_37107022_article_details_71713281]

--------------------

## [17.表单form—input、label、textarea][17._form_input_label_textarea] ##

[http://blog.csdn.net/baidu\_37107022/article/details/71713723][http_blog.csdn.net_baidu_37107022_article_details_71713723]

--------------------

# **2.浏览器兼容性** #

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

[http://blog.csdn.net/baidu\_37107022/article/details/71972223][http_blog.csdn.net_baidu_37107022_article_details_71972223]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71973570][http_blog.csdn.net_baidu_37107022_article_details_71973570]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71977053][http_blog.csdn.net_baidu_37107022_article_details_71977053]

--------------------

# **3.练习篇** #

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

[http://blog.csdn.net/baidu\_37107022/article/details/71330741][http_blog.csdn.net_baidu_37107022_article_details_71330741]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71330797][http_blog.csdn.net_baidu_37107022_article_details_71330797]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71713520][http_blog.csdn.net_baidu_37107022_article_details_71713520]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71747086][http_blog.csdn.net_baidu_37107022_article_details_71747086]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71747249][http_blog.csdn.net_baidu_37107022_article_details_71747249]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71747637][http_blog.csdn.net_baidu_37107022_article_details_71747637]

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

[http://blog.csdn.net/baidu\_37107022/article/details/71747682][http_blog.csdn.net_baidu_37107022_article_details_71747682]

--------------------

# **4.扩展：CSS Hack** #

**一天搞定CSS（扩展）：CSS Hack**  
[http://blog.csdn.net/baidu\_37107022/article/details/72128522][http_blog.csdn.net_baidu_37107022_article_details_72128522]

[1.CSS]: http://blog.csdn.net/baidu_37107022/article/details/71249345%20%E7%9F%A5%E8%AF%86%E7%82%B9%E9%93%BE%E6%8E%A5
[http_blog.csdn.net_baidu_37107022_article_details_71249345]: http://blog.csdn.net/baidu_37107022/article/details/71249345
[2._border]: http://blog.csdn.net/baidu_37107022/article/details/71250059%20border
[http_blog.csdn.net_baidu_37107022_article_details_71250059]: http://blog.csdn.net/baidu_37107022/article/details/71250059
[3._background]: http://blog.csdn.net/baidu_37107022/article/details/71250182%20%E8%83%8C%E6%99%AFbackgroundund
[http_blog.csdn.net_baidu_37107022_article_details_71250182]: http://blog.csdn.net/baidu_37107022/article/details/71250182
[4._font]: http://blog.csdn.net/baidu_37107022/article/details/71271837%20%E5%AD%97%E4%BD%93font
[http_blog.csdn.net_baidu_37107022_article_details_71271837]: http://blog.csdn.net/baidu_37107022/article/details/71271837
[5._box_content_padding_border_margin]: http://blog.csdn.net/baidu_37107022/article/details/71272900%20%E7%9B%92%E6%A8%A1%E5%9E%8Bbox
[http_blog.csdn.net_baidu_37107022_article_details_71272900]: http://blog.csdn.net/baidu_37107022/article/details/71272900
[6._text]: http://blog.csdn.net/baidu_37107022/article/details/71272560%20%E6%96%87%E6%9C%ACtext
[http_blog.csdn.net_baidu_37107022_article_details_71272560]: http://blog.csdn.net/baidu_37107022/article/details/71272560
[7.CSS_class_id]: http://blog.csdn.net/baidu_37107022/article/details/71440686%20css%E9%80%89%E6%8B%A9%E5%99%A8
[http_blog.csdn.net_baidu_37107022_article_details_71440686]: http://blog.csdn.net/baidu_37107022/article/details/71440686
[8.CSS_id_class]: http://blog.csdn.net/baidu_37107022/article/details/71440766%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7
[http_blog.csdn.net_baidu_37107022_article_details_71440766]: http://blog.csdn.net/baidu_37107022/article/details/71440766
[9.]: http://blog.csdn.net/baidu_37107022/article/details/71440877%20%E6%A0%B7%E5%BC%8F%E5%88%9D%E5%A7%8B%E5%8C%96
[http_blog.csdn.net_baidu_37107022_article_details_71440877]: http://blog.csdn.net/baidu_37107022/article/details/71440877
[10._float_left_right_none]: http://blog.csdn.net/baidu_37107022/article/details/71515984%20%E6%B5%AE%E5%8A%A8float
[http_blog.csdn.net_baidu_37107022_article_details_71515984]: http://blog.csdn.net/baidu_37107022/article/details/71515984
[11._float_inline-block]: http://blog.csdn.net/baidu_37107022/article/details/71557806%20%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8
[http_blog.csdn.net_baidu_37107022_article_details_71557806]: http://blog.csdn.net/baidu_37107022/article/details/71557806
[http_blog.csdn.net_baidu_37107022_article_details_71554283]: http://blog.csdn.net/baidu_37107022/article/details/71554283
[http_blog.csdn.net_baidu_37107022_article_details_71516634]: http://blog.csdn.net/baidu_37107022/article/details/71516634
[12.overflow_auto_hidden_visible_scroll]: http://blog.csdn.net/baidu_37107022/article/details/71617407%20overflow%E5%B1%9E%E6%80%A7
[http_blog.csdn.net_baidu_37107022_article_details_71617407]: http://blog.csdn.net/baidu_37107022/article/details/71617407
[13._BFC_Layout]: http://blog.csdn.net/baidu_37107022/article/details/71634396%20BFC
[http_blog.csdn.net_baidu_37107022_article_details_71634396]: http://blog.csdn.net/baidu_37107022/article/details/71634396
[http_blog.csdn.net_baidu_37107022_article_details_71640304]: http://blog.csdn.net/baidu_37107022/article/details/71640304
[14._position_fixed_relative_absolute_static]: http://blog.csdn.net/baidu_37107022/article/details/71642147%20%E5%AE%9A%E4%BD%8Dposition
[http_blog.csdn.net_baidu_37107022_article_details_71642147]: http://blog.csdn.net/baidu_37107022/article/details/71642147
[15._z-index]: http://blog.csdn.net/baidu_37107022/article/details/71642885%20%E5%B1%82%E7%BA%A7z-index
[http_blog.csdn.net_baidu_37107022_article_details_71642885]: 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%20%E8%A1%A8%E6%A0%BCtable
[http_blog.csdn.net_baidu_37107022_article_details_71713281]: http://blog.csdn.net/baidu_37107022/article/details/71713281
[17._form_input_label_textarea]: http://blog.csdn.net/baidu_37107022/article/details/71713723%20%E8%A1%A8%E5%8D%95form
[http_blog.csdn.net_baidu_37107022_article_details_71713723]: http://blog.csdn.net/baidu_37107022/article/details/71713723
[http_blog.csdn.net_baidu_37107022_article_details_71972223]: http://blog.csdn.net/baidu_37107022/article/details/71972223
[http_blog.csdn.net_baidu_37107022_article_details_71973570]: http://blog.csdn.net/baidu_37107022/article/details/71973570
[http_blog.csdn.net_baidu_37107022_article_details_71977053]: http://blog.csdn.net/baidu_37107022/article/details/71977053
[http_blog.csdn.net_baidu_37107022_article_details_71330741]: http://blog.csdn.net/baidu_37107022/article/details/71330741
[http_blog.csdn.net_baidu_37107022_article_details_71330797]: http://blog.csdn.net/baidu_37107022/article/details/71330797
[http_blog.csdn.net_baidu_37107022_article_details_71713520]: http://blog.csdn.net/baidu_37107022/article/details/71713520
[http_blog.csdn.net_baidu_37107022_article_details_71747086]: http://blog.csdn.net/baidu_37107022/article/details/71747086
[http_blog.csdn.net_baidu_37107022_article_details_71747249]: http://blog.csdn.net/baidu_37107022/article/details/71747249
[http_blog.csdn.net_baidu_37107022_article_details_71747637]: http://blog.csdn.net/baidu_37107022/article/details/71747637
[http_blog.csdn.net_baidu_37107022_article_details_71747682]: http://blog.csdn.net/baidu_37107022/article/details/71747682
[http_blog.csdn.net_baidu_37107022_article_details_72128522]: http://blog.csdn.net/baidu_37107022/article/details/72128522