CSS 最佳實踐 + 套路（一） -- 概述

CSS 最佳實踐 + 套路（一） -- 概述

資源

1. Google: 關鍵詞 MDN
2. CSS Tricks
3. Google: 阮一峯 css
4. 張鑫旭的 240 多篇 CSS 博客
5. Codrops 炫酷 CSS 效果
6. CSS揭祕
7. CSS 2.1 中文 spec
8. Magic of CSS 免費在線書

   引入CSS

9. 內聯樣式 ==> style屬性 ==> style= 'color: red; width: 200px; height:200px;'

10. 內嵌樣式 ==> style 標籤 ==>

    1 2 3 4 5 6

    <style> body{ background: gray; font-size: 12px; } </style>

11. 外聯樣式 ==> <link> 標籤 ==>

    1	<link rel= 'stylesheet' href= ''>

12. @import url(./b/css)

最佳實踐 & 套路

reset CSS

1
2

*{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; }

清除浮動

添加到浮動元素的父元素上。

1 2 3 4 5

.clearfix::after{ content: ''; display: block; clear: both; }

相關知識點

元素分類：

• 塊級元素：block ==> display: block;
• 內聯元素：inline ==> display: inline;
• 內聯塊級元素：inline-block ==> display: inline-block;
• 


© CZBBhkrx

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。