CSS學(xué)習(xí)感言：
CSS明顯比HTML復(fù)雜一些凭豪，用的時(shí)間也多嫂伞，而且也還有許多迷惑的地方帖努，特別是關(guān)于定位和浮動(dòng)拼余，理解子絕父相匙监，就用了好長(zhǎng)時(shí)間亭姥，最后把視頻看了第二遍才理解顾稀【哺眩可能內(nèi)容比較多巡李，有時(shí)候不知道用什么屬性击儡，在看完網(wǎng)易項(xiàng)目的時(shí)候阳谍，整體的對(duì)CSS有了大概的了解矫夯。這部分內(nèi)容训貌。主要是對(duì)HTML的修飾冒窍。讓界面更美觀。要掌握的重點(diǎn)知識(shí)是div和span综液，塊級(jí)元素和行內(nèi)元素，行內(nèi)塊級(jí)元素的互換檩奠。盒子模型附帽，外邊距蕉扮。內(nèi)邊距慢显。居中對(duì)齊，浮動(dòng)和定位屋灌，特別提示的還有清除浮動(dòng)共郭，學(xué)習(xí)的時(shí)候沒太用心除嘹，后來做項(xiàng)目的時(shí)候用到過尉咕。又重新回頭看的，各位同學(xué)看到的話悔捶。要特別的留心哈蜕该。下面炒的李南江視頻的筆記堂淡，供大家學(xué)習(xí)绢淀，表感謝我...
什么是CSS瘾腰？
層疊樣式表(Cascading Style Sheets)是一種用來表現(xiàn)HTML或XM等文件樣式的計(jì)算機(jī)語言
CSS有什么作用居灯？
主要的作用就是美化網(wǎng)頁
CSS 有什么優(yōu)點(diǎn)怪嫌？
不需要單獨(dú)記憶標(biāo)簽岩灭，快速修改樣式噪径，滿足需求變更
CSS的格式
<style type="text/css"> 標(biāo)簽名稱{ 屬性名稱: 屬性對(duì)應(yīng)的值; ... }</style>
CSS屬性
font-style：normal 普通字體 italic 傾斜 快捷鍵 fs
font-weight：bold 加粗 bolder 更粗 lighter 細(xì)線 快捷鍵 fw
font-size：px 設(shè)置大小必須加單位像素
font-family：字體 必須是電腦已經(jīng)安裝的字體
縮寫例子 - font: style weight size family; sytle 和 weight可以省略 size family 不能省略 切不可互換位置
文本裝飾屬性
text-decoration ： underline 下劃線
text-decoration ： line-through 刪除線
text-decoration ：none 無 常用
text-align
text-align: left; 左對(duì)齊
text-align: right;右對(duì)齊
text-align: center;居中對(duì)齊
文本縮進(jìn)
text-indent: 2em 縮進(jìn)兩個(gè)單位
color屬性
color: rgb(0,0,0); 黑色
選擇器：標(biāo)簽選擇器
格式:標(biāo)簽名稱{ 屬性:值;} 找爱、選中的是當(dāng)前界面中所有的此種類型的標(biāo)簽,
id選擇器
根據(jù)指定的id名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性 #id名稱{ 屬性:值;} 每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做id,并且在同一個(gè)界面中id的名稱是不可以重復(fù)的车摄，在編寫id選擇器時(shí)一定要在id名稱前面加上#吮播，通常id標(biāo)簽留給js使用意狠，并不做樣式修改時(shí)使用
類選擇器
根據(jù)指定的類名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性 格式: .類名{ 屬性:值;} 每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做class ，在同一個(gè)界面中class的名稱是可以重復(fù)的闷板，明明遵循變量命名規(guī)則蛔垢，在企業(yè)開發(fā)中鹏漆，經(jīng)常用來設(shè)置CSS
后代選擇器
根據(jù)指定標(biāo)簽的所有特定的后代標(biāo)簽, 設(shè)置屬性 格式:標(biāo)簽名稱1 標(biāo)簽名稱2{ 屬性:值;} 找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后再在這個(gè)標(biāo)簽下面去查找所有名稱叫做"標(biāo)簽名稱2"的標(biāo)簽, 然后在設(shè)置屬性艺玲，后代選擇器必須用空格隔開
子元素選擇器
根據(jù)指定標(biāo)簽中所有特定的直接子元素, 然后設(shè)置屬性標(biāo)簽名稱1>標(biāo)簽名稱2{ 屬性:值;}子元素選擇器只會(huì)查找兒子, 不會(huì)查找其他被嵌套的標(biāo)簽饭聚，標(biāo)簽>不能省略秒梳，且會(huì)一直往里找下去
交集選擇器
給所有選擇器選中的標(biāo)簽中, 相交的那部分標(biāo)簽設(shè)置屬性 選擇器1選擇器2{ 屬性: 值;} 選擇器和選擇器之間沒有任何的連接符號(hào) 這個(gè)選擇器使用頻率小
相鄰兄弟選擇器
根據(jù)選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性 選擇器1+選擇器2{ 屬性:值;} 使用+號(hào)鏈接標(biāo)簽選擇器酪碘，并且必須是用+號(hào)
通用兄弟選擇器
通用兄弟選擇器必須用~連接盐茎，通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽, 無論有沒有被隔開都可以選中
CSS3中新增的選擇器
序選擇器
同級(jí)別的第幾個(gè):
first-child 選中同級(jí)別中的第一個(gè)標(biāo)簽:
last-child 選中同級(jí)別中的最后一個(gè)標(biāo)簽:
nth-child(n) 選中同級(jí)別中的第n個(gè)標(biāo)簽:
nth-last-child(n) 選中同級(jí)別中的倒數(shù)第n個(gè)標(biāo)簽:
only-child 選中父元素中唯一的標(biāo)簽
同類型的第幾個(gè):
first-of-type 選中同級(jí)別中同類型的第一個(gè)標(biāo)簽
last-of-type 選中同級(jí)別中同類型的最后一個(gè)標(biāo)簽
nth-of-type(n) 選中同級(jí)別中同類型的第n個(gè)標(biāo)簽
nth-last-of-type(n) 選中同級(jí)別中同類型的倒數(shù)第n個(gè)標(biāo)簽
only-of-type 選中父元素中唯一類型的某個(gè)標(biāo)簽
屬性選擇器
根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
格式:[attribute]作用:根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性探越，找到有指定屬性, 并且屬性的取值等于value的標(biāo)簽, 然后設(shè)置屬性
通配符選擇器
給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性
格式:*{ 屬性:值;}
由于通配符選擇器性能差钦幔，開發(fā)中很少使用
CSS的三大特性 - 繼承性
給父元素設(shè)置一些屬性, 子元素也可以使用, 這個(gè)我們就稱之為繼承性
擁有繼承性的標(biāo)簽 主要有以color/font-/text-/line-開頭的屬性节槐，CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承，a標(biāo)簽的文字顏色和下劃線是不能繼承的铜异，h標(biāo)簽的文字大小是不能繼承的揍庄，通常用于設(shè)置網(wǎng)頁上的一些共性信息
CSS的三大特性 - 層疊性
多個(gè)選擇器選擇同一標(biāo)簽蚂子，設(shè)置了"相同的屬性", 才會(huì)發(fā)生層疊性
CSS的三大特性 - 優(yōu)先級(jí)
當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽, 并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí), 如何層疊就由優(yōu)先級(jí)來確定
important
提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)的, 可以將被指定的屬性的優(yōu)先級(jí)提升為最高
優(yōu)先級(jí)的權(quán)重
當(dāng)多個(gè)選擇器混合在一起使用時(shí), 我們可以通過計(jì)算權(quán)重來判斷誰的優(yōu)先級(jí)最高
1.首先先計(jì)算選擇器中有多少個(gè)id, id多的選擇器優(yōu)先級(jí)最高
2.如果id的個(gè)數(shù)一樣, 那么再看類名的個(gè)數(shù), 類名個(gè)數(shù)多的優(yōu)先級(jí)最高
3.如果類名的個(gè)數(shù)一樣, 那么再看標(biāo)簽名稱的個(gè)數(shù), 標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級(jí)最高
4.如果id個(gè)數(shù)一樣, 類名個(gè)數(shù)也一樣, 標(biāo)簽名稱個(gè)數(shù)也一樣, 那么就不會(huì)繼續(xù)往下計(jì)算了, 那么此時(shí)誰寫在后面聽誰的也就是說優(yōu)先級(jí)如果一樣, 那么誰寫在后面聽誰的
div 和 span
都是容器蒂破，用于配合css完成網(wǎng)頁的基本布局别渔，不同點(diǎn)是div會(huì)單獨(dú)的占領(lǐng)一行,而span不會(huì)單獨(dú)占領(lǐng)一行哎媚。div是一個(gè)容器級(jí)的標(biāo)簽, 而span是一個(gè)文本級(jí)的標(biāo)簽
塊級(jí)元素 行內(nèi)元素 和 行內(nèi)塊級(jí)元素
塊級(jí)元素會(huì)獨(dú)占一行拨与，行內(nèi)元素不會(huì)獨(dú)占一行 塊級(jí)元素p div h ul ol dl li dt dd 行內(nèi)元素span buis strong em ins del
塊級(jí)元素和行內(nèi)元素的區(qū)別：
塊級(jí)元素獨(dú)占一行如果沒有設(shè)置寬度, 那么默認(rèn)和父元素一樣寬如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示
行內(nèi)元素不會(huì)獨(dú)占一行如果沒有設(shè)置寬度, 那么默認(rèn)和內(nèi)容一樣寬行內(nèi)元素是不可以設(shè)置寬度和高度的
行內(nèi)塊級(jí)元素為了能夠讓元素既能夠不獨(dú)占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級(jí)元素
轉(zhuǎn)換CSS元素的顯示模式
設(shè)置元素的display屬性 block 塊級(jí)inline 行內(nèi)inline-block 行內(nèi)塊級(jí)
邊框?qū)傩?/h3>
連寫 ：border: 寬度 樣式 顏色;
分開寫：border-top: 寬度 樣式 顏色
縮寫：border-width: 上 右 下 左;
內(nèi)邊距
邊框和內(nèi)容之間的距離就是內(nèi)邊距买喧，給標(biāo)簽設(shè)置內(nèi)邊距之后, 標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化淤毛，給標(biāo)簽設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會(huì)有背景顏色
外邊距
標(biāo)簽和標(biāo)簽之間的距離就是外邊距，外邊距的那一部分是沒有背景顏色的，連寫 - margin: 上 右 下 左; 外邊距在默認(rèn)布局的垂直方向查牌，有外邊距合并現(xiàn)象
CSS盒子模型
CSS盒子模型僅僅是一個(gè)形象的比喻, HTML中所有的標(biāo)簽都是盒子纸颜。
寬度/高度 == 指定可以存放內(nèi)容的區(qū)域
內(nèi)邊距 == 填充物
邊框 == 手機(jī)盒子自己
外邊距 == 盒子和盒子之間的間隙
盒子模型的高度和寬度
1.內(nèi)容的寬度和高度就是通過width/height屬性設(shè)置的寬度和高度
2.元素的寬度和高度寬度 = 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框高度 同理可證
3.元素空間的寬度和高度寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框 + 右外邊距高度 同理可證
box-sizing
1.CSS3中新增了一個(gè)box-sizing屬性, 這個(gè)屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變
2.box-sizing屬性是如何保證增加padding和border之后, 盒子元素的寬度和高度不變和我們前面學(xué)習(xí)的原理一樣, 增加padding和border之后要想保證盒子元素的寬高不變, 那么就必須減去一部分內(nèi)容的寬度和高度
3.box-sizing取值
content-box元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
border-box元素的寬高 = width/height的寬高
盒子居中 和 內(nèi)容居中
text-align: center;作用設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中
margin:0 auto;作用讓盒子自己水平居中
行高和字號(hào)
在CSS中所有的行都有自己的行高胁孙，行高和盒子高不是同一個(gè)概念，行高指的是每行內(nèi)稠鼻，容的高度候齿，盒子高指的是元素的高度闺属，文字在行高中默認(rèn)是垂直居中的掂器，在企業(yè)開發(fā)中我們經(jīng)常將盒子的高度和行高設(shè)置為一樣, 那么這樣就可以保證一行文字在盒子的高度中是垂直居中的，在企業(yè)開發(fā)中如果一個(gè)盒子中有多行文字, 那么我們就不能使用設(shè)置行高等于盒子高來實(shí)現(xiàn)讓文字垂直居中, 只能通過設(shè)置padding來讓文字居中
網(wǎng)頁布局
網(wǎng)頁的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的
有三種排版方式：
1.標(biāo)準(zhǔn)流
其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版
2.浮動(dòng)流
浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式
浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊
浮動(dòng)流的特點(diǎn)
1.在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的無論是級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
2.在浮動(dòng)流中無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
3.綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像
浮動(dòng)元素的脫標(biāo)
當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是浮動(dòng)元素的脫標(biāo)，如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素
浮動(dòng)元素排序規(guī)則
相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面
不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)
浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來確定
浮動(dòng)元素貼靠現(xiàn)象?
如果父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示
如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元開始往前貼靠
如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊或者右邊
浮動(dòng)元素字圍現(xiàn)象?
浮動(dòng)元素不會(huì)擋住沒有浮動(dòng)元素中的文字, 沒有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置,這個(gè)就是浮動(dòng)元素字圍現(xiàn)象
浮動(dòng)元素高度問題
在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
在浮動(dòng)流中浮動(dòng)的元素是不可以撐起父元素的高度的
清除浮動(dòng)的五種方式
1.給前面一個(gè)父元素設(shè)置高度（不常用）
2.給后面的盒子添加clear屬性（不常用）
3.外墻法和 內(nèi)墻法（不常用）
4.偽元素選擇器清除浮動(dòng)（不常用）- 本質(zhì)上就是內(nèi)墻法, 只不過是直接通過CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
5.overflow標(biāo)簽（常用）
clear屬性取值:
none: 默認(rèn)取值, 按照浮動(dòng)元素的排序規(guī)則來排序(左浮動(dòng)找左浮動(dòng), 右浮動(dòng)找右浮動(dòng))left: 不要找前面的左浮動(dòng)元素
right: 不要找前面的右浮動(dòng)元素
both: 不要找前面的左浮動(dòng)元素和右浮動(dòng)元素
外墻法
在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素
給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both屬性
內(nèi)墻法
在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度
偽元素選擇器
偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素
overflow
作用：可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉，清除浮動(dòng) 璃饱，可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來
定位流
1相對(duì)定位 2絕對(duì)定位 3固定定位 4靜態(tài)定位
相對(duì)定位
相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng) 作用：用于對(duì)元素進(jìn)行微調(diào)4 配合后面學(xué)習(xí)的絕對(duì)定位來使用
絕對(duì)定位
絕對(duì)定位就是相對(duì)于body來定位 注意點(diǎn):絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的,絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素,默認(rèn)情況下所有的絕對(duì)定位的元素, 無論有沒有祖先元素, 都會(huì)以body作為參考點(diǎn)
子絕父相（重點(diǎn)）
相對(duì)定位弊端:相對(duì)定位不會(huì)脫離標(biāo)準(zhǔn)流, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間, 所以不利于布局界面
絕對(duì)定位弊端:默認(rèn)情況下絕對(duì)定位的元素會(huì)以body作為參考點(diǎn), 所以會(huì)隨著瀏覽器的寬度高度的變化而變化
子絕父相子元素用絕對(duì)定位, 父元素用相對(duì)定位
絕對(duì)定位的元素水平居中
只需要設(shè)置絕對(duì)定位元素的left:50%;然后再設(shè)置絕對(duì)定位元素的 margin-left: -元素寬度的一半px
