CSS學習感言：
CSS明顯比HTML復雜一些，用的時間也多，而且也還有許多迷惑的地方，特別是關于定位和浮動，理解子絕父相，就用了好長時間，最后把視頻看了第二遍才理解。可能內容比較多，有時候不知道用什么屬性，在看完網易項目的時候，整體的對CSS有了大概的了解。這部分內容。主要是對HTML的修飾。讓界面更美觀。要掌握的重點知識是div和span，塊級元素和行內元素，行內塊級元素的互換。盒子模型，外邊距。內邊距。居中對齊，浮動和定位，特別提示的還有清除浮動，學習的時候沒太用心，后來做項目的時候用到過。又重新回頭看的，各位同學看到的話。要特別的留心哈。下面炒的李南江視頻的筆記，供大家學習，表感謝我...
什么是CSS？
層疊樣式表(Cascading Style Sheets)是一種用來表現HTML或XM等文件樣式的計算機語言
CSS有什么作用？
主要的作用就是美化網頁
CSS 有什么優點？
不需要單獨記憶標簽，快速修改樣式，滿足需求變更
CSS的格式
<style type="text/css"> 標簽名稱{ 屬性名稱: 屬性對應的值; ... }</style>
CSS屬性
font-style：normal 普通字體 italic 傾斜 快捷鍵 fs
font-weight：bold 加粗 bolder 更粗 lighter 細線 快捷鍵 fw
font-size：px 設置大小必須加單位像素
font-family：字體 必須是電腦已經安裝的字體
縮寫例子 - font: style weight size family; sytle 和 weight可以省略 size family 不能省略 切不可互換位置
文本裝飾屬性
text-decoration ： underline 下劃線
text-decoration ： line-through 刪除線
text-decoration ：none 無 常用
text-align
text-align: left; 左對齊
text-align: right;右對齊
text-align: center;居中對齊
文本縮進
text-indent: 2em 縮進兩個單位
color屬性
color: rgb(0,0,0); 黑色
選擇器：標簽選擇器
格式:標簽名稱{ 屬性:值;} 、選中的是當前界面中所有的此種類型的標簽,
id選擇器
根據指定的id名稱找到對應的標簽, 然后設置屬性 #id名稱{ 屬性:值;} 每個HTML標簽都有一個屬性叫做id,并且在同一個界面中id的名稱是不可以重復的，在編寫id選擇器時一定要在id名稱前面加上#，通常id標簽留給js使用，并不做樣式修改時使用
類選擇器
根據指定的類名稱找到對應的標簽, 然后設置屬性 格式: .類名{ 屬性:值;} 每個HTML標簽都有一個屬性叫做class ，在同一個界面中class的名稱是可以重復的，明明遵循變量命名規則，在企業開發中，經常用來設置CSS
后代選擇器
根據指定標簽的所有特定的后代標簽, 設置屬性 格式:標簽名稱1 標簽名稱2{ 屬性:值;} 找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后在設置屬性，后代選擇器必須用空格隔開
子元素選擇器
根據指定標簽中所有特定的直接子元素, 然后設置屬性標簽名稱1>標簽名稱2{ 屬性:值;}子元素選擇器只會查找兒子, 不會查找其他被嵌套的標簽，標簽>不能省略，且會一直往里找下去
交集選擇器
給所有選擇器選中的標簽中, 相交的那部分標簽設置屬性 選擇器1選擇器2{ 屬性: 值;} 選擇器和選擇器之間沒有任何的連接符號 這個選擇器使用頻率小
相鄰兄弟選擇器
根據選擇器后面緊跟的那個選擇器選中的標簽設置屬性 選擇器1+選擇器2{ 屬性:值;} 使用+號鏈接標簽選擇器，并且必須是用+號
通用兄弟選擇器
通用兄弟選擇器必須用~連接，通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
CSS3中新增的選擇器
序選擇器
同級別的第幾個:
first-child 選中同級別中的第一個標簽:
last-child 選中同級別中的最后一個標簽:
nth-child(n) 選中同級別中的第n個標簽:
nth-last-child(n) 選中同級別中的倒數第n個標簽:
only-child 選中父元素中唯一的標簽
同類型的第幾個:
first-of-type 選中同級別中同類型的第一個標簽
last-of-type 選中同級別中同類型的最后一個標簽
nth-of-type(n) 選中同級別中同類型的第n個標簽
nth-last-of-type(n) 選中同級別中同類型的倒數第n個標簽
only-of-type 選中父元素中唯一類型的某個標簽
屬性選擇器
根據指定的屬性名稱找到對應的標簽, 然后設置屬性
格式:[attribute]作用:根據指定的屬性名稱找到對應的標簽, 然后設置屬性，找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設置屬性
通配符選擇器
給當前界面上所有的標簽設置屬性
格式:*{ 屬性:值;}
由于通配符選擇器性能差，開發中很少使用
CSS的三大特性 - 繼承性
給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
擁有繼承性的標簽 主要有以color/font-/text-/line-開頭的屬性，CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承，a標簽的文字顏色和下劃線是不能繼承的，h標簽的文字大小是不能繼承的，通常用于設置網頁上的一些共性信息
CSS的三大特性 - 層疊性
多個選擇器選擇同一標簽，設置了"相同的屬性", 才會發生層疊性
CSS的三大特性 - 優先級
當多個選擇器選中同一個標簽, 并且給同一個標簽設置相同的屬性時, 如何層疊就由優先級來確定
important
提升某個直接選中標簽的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升為最高
優先級的權重
當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高
1.首先先計算選擇器中有多少個id, id多的選擇器優先級最高
2.如果id的個數一樣, 那么再看類名的個數, 類名個數多的優先級最高
3.如果類名的個數一樣, 那么再看標簽名稱的個數, 標簽名稱個數多的優先級最高
4.如果id個數一樣, 類名個數也一樣, 標簽名稱個數也一樣, 那么就不會繼續往下計算了, 那么此時誰寫在后面聽誰的也就是說優先級如果一樣, 那么誰寫在后面聽誰的
div 和 span
都是容器，用于配合css完成網頁的基本布局，不同點是div會單獨的占領一行,而span不會單獨占領一行。div是一個容器級的標簽, 而span是一個文本級的標簽
塊級元素 行內元素 和 行內塊級元素
塊級元素會獨占一行，行內元素不會獨占一行 塊級元素p div h ul ol dl li dt dd 行內元素span buis strong em ins del
塊級元素和行內元素的區別：
塊級元素獨占一行如果沒有設置寬度, 那么默認和父元素一樣寬如果設置了寬高, 那么就按照設置的來顯示
行內元素不會獨占一行如果沒有設置寬度, 那么默認和內容一樣寬行內元素是不可以設置寬度和高度的
行內塊級元素為了能夠讓元素既能夠不獨占一行, 又可以設置寬度和高度, 那么就出現了行內塊級元素
轉換CSS元素的顯示模式
設置元素的display屬性 block 塊級inline 行內inline-block 行內塊級
邊框屬性
連寫 ：border: 寬度 樣式 顏色;
分開寫：border-top: 寬度 樣式 顏色
縮寫：border-width: 上 右 下 左;
內邊距
邊框和內容之間的距離就是內邊距，給標簽設置內邊距之后, 標簽占有的寬度和高度會發生變化，給標簽設置內邊距之后, 內邊距也會有背景顏色
外邊距
標簽和標簽之間的距離就是外邊距，外邊距的那一部分是沒有背景顏色的，連寫 - margin: 上 右 下 左; 外邊距在默認布局的垂直方向，有外邊距合并現象
CSS盒子模型
CSS盒子模型僅僅是一個形象的比喻, HTML中所有的標簽都是盒子。
寬度/高度 == 指定可以存放內容的區域
內邊距 == 填充物
邊框 == 手機盒子自己
外邊距 == 盒子和盒子之間的間隙
盒子模型的高度和寬度
1.內容的寬度和高度就是通過width/height屬性設置的寬度和高度
2.元素的寬度和高度寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框高度 同理可證
3.元素空間的寬度和高度寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距高度 同理可證
box-sizing
1.CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變
2.box-sizing屬性是如何保證增加padding和border之后, 盒子元素的寬度和高度不變和我們前面學習的原理一樣, 增加padding和border之后要想保證盒子元素的寬高不變, 那么就必須減去一部分內容的寬度和高度
3.box-sizing取值
content-box元素的寬高 = 邊框 + 內邊距 + 內容寬高
border-box元素的寬高 = width/height的寬高
盒子居中 和 內容居中
text-align: center;作用設置盒子中存儲的文字/圖片水平居中
margin:0 auto;作用讓盒子自己水平居中
行高和字號
在CSS中所有的行都有自己的行高，行高和盒子高不是同一個概念，行高指的是每行內，容的高度，盒子高指的是元素的高度，文字在行高中默認是垂直居中的，在企業開發中我們經常將盒子的高度和行高設置為一樣, 那么這樣就可以保證一行文字在盒子的高度中是垂直居中的，在企業開發中如果一個盒子中有多行文字, 那么我們就不能使用設置行高等于盒子高來實現讓文字垂直居中, 只能通過設置padding來讓文字居中
網頁布局
網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的
有三種排版方式：
1.標準流
其實瀏覽器默認的排版方式就是標準流的排版方式
在CSS中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素
在標準流中有兩種排版方式, 一種是垂直排版, 一種是水平排版垂直排版, 如果元素是塊級元素, 那么就會垂直排版水平排版, 如果元素是行內元素/行內塊級元素, 那么就會水平排版
2.浮動流
浮動流是一種"半脫離標準流"的排版方式
浮動流只有一種排版方式, 就是水平排版. 它只能設置某個元素左對齊或者右對齊
浮動流的特點
1.在浮動流中是不區分塊級元素/行內元素/行內塊級元素的無論是級元素/行內元素/行內塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設置寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
浮動元素的脫標
當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標，如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素
浮動元素排序規則
相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
浮動元素浮動之后的位置, 由浮動元素浮動之前在標準流中的位置來確定
浮動元素貼靠現象?
如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元開始往前貼靠
如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊
浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
浮動元素高度問題
在標準流中內容的高度可以撐起父元素的高度
在浮動流中浮動的元素是不可以撐起父元素的高度的
清除浮動的五種方式
1.給前面一個父元素設置高度（不常用）
2.給后面的盒子添加clear屬性（不常用）
3.外墻法和 內墻法（不常用）
4.偽元素選擇器清除浮動（不常用）- 本質上就是內墻法, 只不過是直接通過CSS代碼添加了內墻, 其它特性和內墻法都一樣
5.overflow標簽（常用）
clear屬性取值:
none: 默認取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
外墻法
在兩個盒子中間添加一個額外的塊級元素
給這個額外添加的塊級元素設置clear: both屬性
內墻法
在第一個盒子中所有子元素最后添加一個額外的塊級元素
給這個額外添加的塊級元素設置clear: both;屬性
外墻法不能撐起第一個盒子的高度, 而內墻法可以撐起第一個盒子的高度
偽元素選擇器
偽元素選擇器作用就是給指定標簽的內容前面添加一個子元素或者給指定標簽的內容后面添加一個子元素
overflow
作用：可以將超出標簽范圍的內容裁剪掉，清除浮動 ，可以通過overflow: hidden;讓里面的盒子設置margin-top之后, 外面的盒子不被頂下來
定位流
1相對定位 2絕對定位 3固定定位 4靜態定位
相對定位
相對定位就是相對于自己以前在標準流中的位置來移動 作用：用于對元素進行微調4 配合后面學習的絕對定位來使用
絕對定位
絕對定位就是相對于body來定位 注意點:絕對定位的元素是脫離標準流的,絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素,默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點
子絕父相（重點）
相對定位弊端:相對定位不會脫離標準流, 會繼續在標準流中占用一份空間, 所以不利于布局界面
絕對定位弊端:默認情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化
子絕父相子元素用絕對定位, 父元素用相對定位
絕對定位的元素水平居中
只需要設置絕對定位元素的left:50%;然后再設置絕對定位元素的 margin-left: -元素寬度的一半px
