一篇文章能夠看懂基礎代碼之CSS

web頁面主要分為三塊內容：
js：控制用戶行為和執行代碼行為
html元素：控制頁面顯示哪些控件（例如按鈕，輸入框，文本等）
css：控制如何顯示頁面上的空間，例如布局，顏色，大小，位置，形狀，背景等。這篇文章介紹的是css的基礎，看一遍就能懂得如何讀懂和編寫基礎的代碼。
-
概念：

1. 選擇器：控制這些效果作用在哪些控件上，主要的有id選擇器，類選擇器，元素選擇器，輔助的有屬性選擇器，派生選擇器（后代選擇器, 子代選擇器，兄弟選擇器等），選擇器可以進行組合。

2. 語法：書寫css代碼的規則
   選擇器 {
   propName: propValue;
   }
   //屬性名和屬性值是css規范里定義好的內容，不能自己隨意給,屬性名和值可以根據不同的瀏覽器有不同的效果。

3. 使用方式：分為內部樣式，內聯樣式，外部樣式，內部樣式可以在html中書寫
   <style>
   .myclass {}
   </style>
   外部樣式需要引入：
   <link rel="stylesheet" href="./mycss.css">
   內聯樣式直接寫在html元素里面，不需要大括號
   <p style="color:#000;">test</p>

4. 覆蓋：加入某個元素的某個樣式在內部樣式，外部樣式，內聯樣式甚至多個選擇器中都聲明了，那么就會產生效果覆蓋。這個覆蓋是根據權重來決定的，假如權重一樣則根據最后聲明的為準
   內聯樣式：權重 1000
   id選擇器：100
   類，偽類，屬性選擇器：10
   元素選擇器：1
   其他：0
   根據最后的組合權重來應用實際效果。

-
元素選擇器： * {}，或者任何一個html的element代碼都可以，例如選擇所有p元素： p {}
id選擇器：使用#作為前綴，一個頁面里id需要是唯一的，否則會出錯
#myIdName {}，在html的元素里面需要書寫 id="myIdName"，這樣才能作用到。
類選擇器：最常見的選擇器：使用點號.作為前綴，例如 .myClass {}，在html的元素中需要書寫 class="myClass"

后代選擇器：
a b {}：作用于在a元素下的b元素，只要b元素是包含在a元素里面的，多少層都能作用
子代選擇器：
a>b{}：作用于僅在a元素下的b元素，b元素如果不直接在a元素下則不會應用
兄弟選擇器：
a + b {} ：僅作用于和a元素相鄰的b元素

css基礎屬性：
位置類：position，top，bottom，left，right
文本類：font-size，text-align，font-color
顏色類：color，background-color
形狀類：height，width
邊框類：border
邊距類：margin，padding
顯示類：display:block,inline-block等

彈性盒模型flex：
display:flex
align-item:center;
等