CSS
引入CSS的三種方式
- 外鏈?zhǔn)剑喉?xiàng)目推薦
- 嵌入式：學(xué)習(xí)推薦
- 內(nèi)聯(lián)式：
CSS基本語(yǔ)法
- 選擇器{屬性：值； 屬性：值齐遵； 屬性：值}
CSS選擇器
1.標(biāo)簽選擇器
- 就是div
2.id選擇器
- id不可重名寂玲，具有唯一性 格式：#+id名
3.類選擇器（推薦）
4.層級(jí)選擇器
- 它可以和別的選擇器混合使用
- 無(wú)需重命名就能通過(guò)父類設(shè)置子集
5.組選擇器
- 用法： .box1 , .box2 , .box3{}
- 就是對(duì)一堆的類進(jìn)行批量操作，修改
6.偽類及偽元素選擇器
- 屬性：hover before after
7.顏色表示方式
- 十六進(jìn)制：如#00 00 00 -------------- 解釋：一共有6位梗摇，rgb 取值范圍0-9 A-F拓哟，可以簡(jiǎn)寫(xiě)如#000 ------- #fff
- rgb模式：如rgb(0,0,0) 每一位取值范圍是0-255
- 帶有透明度的 rgba(0,0,0,0) 最后一位是透明度 取值范圍是:0-1之間小數(shù) 0完全透明 1完全不透明
8.字體文本設(shè)置
屬性
1.color
2.font-size: 默認(rèn)12px，小于12依舊是12
3.font-family:字體
4.font-style:normal & italic; 設(shè)置斜體
5.font-weight:bold; 設(shè)置粗體
6.line-height 設(shè)置文字的行高
7.text-decotation 設(shè)置文字的下劃線
8.text-indent 設(shè)置文字首行縮進(jìn)
9.text-align 設(shè)置文字水平對(duì)齊方式
9.邊框設(shè)置
屬性
1.border : dotted(點(diǎn)) dashed（虛線） solid（實(shí)線）(屬性沒(méi)有順序的區(qū)別)
2.border-radius:圓角邊框設(shè)置伶授，可單獨(dú)設(shè)置如断序， 10px 10px 10px 10px
3.box-shadow: 屬性有：水平 垂直 模糊程度 擴(kuò)散范圍 陰影顏色 內(nèi)/外陰影
4.一般和box-hover聯(lián)用
CSS間距
內(nèi)間距：
- padding屬性：
1.設(shè)置四邊 padding:10px 10px 10px 10px
2.設(shè)置對(duì)邊 padding:10px 10px
3.設(shè)置四邊另一種：padding:10px
4.設(shè)置單邊.padding-top/bottom/left/right
外間距
- margin屬性：
1.設(shè)置四個(gè)值：上 右 下 左
2.設(shè)置兩個(gè)值：第一個(gè)代表上下 第二個(gè)代表左右
3.設(shè)置一個(gè)值：代表四個(gè)方向都是這個(gè)間距
4.設(shè)置負(fù)值實(shí)現(xiàn)位移，自動(dòng)水平居中：margin:0 auto
盒子模型
- 尺寸=邊框+padding+中間框體 （和外邊距無(wú)關(guān)因?yàn)樗麤](méi)法撐開(kāi)盒子）
- 改變?cè)貎?nèi)容間距 有不想改變盒子大忻优搿： box-sizing:border-box;（一般和padding聯(lián)合使用）
塊元素违诗，內(nèi)聯(lián)元素，內(nèi)聯(lián)塊元素
1.塊元素
- 支持全部樣式
- 盒子獨(dú)占一行疮蹦，即使設(shè)置了寬度
2.內(nèi)聯(lián)元素：<span>
- 不獨(dú)占一行
- 只支持部分樣式
- 不支持寬度和高度屬性诸迟，寬高由內(nèi)容撐開(kāi)
- 只支持左右margin值，支持padding
- 代碼換行挚币，盒子中間會(huì)產(chǎn)生間距
3.內(nèi)聯(lián)塊元素
- 支持所有的樣式
- 不獨(dú)占一行合資并在一行亮蒋，代碼換行會(huì)產(chǎn)生間距
- 寬高由內(nèi)容撐開(kāi)
- 只支持左右margin值
浮動(dòng)
文檔流
浮動(dòng)的特性
- 浮動(dòng)元素只有左浮動(dòng)和右浮動(dòng)
- 浮動(dòng)會(huì)讓元素脫離文檔流，后面不浮動(dòng)的元素會(huì)占據(jù)原來(lái)的位置
- 停止浮動(dòng)
1.碰到父級(jí)元素的邊界會(huì)停止
2.碰到前面有浮動(dòng)的元素
3.當(dāng)碰到?jīng)]有浮動(dòng)的元素 - 浮動(dòng)會(huì)把元素轉(zhuǎn)為行內(nèi)塊元素
- 當(dāng)父元素沒(méi)有設(shè)置固定高度時(shí)妆毕，子元素都浮動(dòng)慎玖，父級(jí)元素的高度就無(wú)法被撐開(kāi)，解決辦法：給父級(jí)元素添加overflow：hidden笛粘；
- 當(dāng)父級(jí)元素空間不夠時(shí)趁怔，浮動(dòng)元素會(huì)換行
定位
- 相對(duì)定位不會(huì)脫離文檔流湿硝，但是絕對(duì)定位會(huì)脫離文檔流
- 絕對(duì)定位就是向上一級(jí)元素位置為參考點(diǎn)進(jìn)行偏移，最后實(shí)在找不到就以body為參考點(diǎn)進(jìn)行偏移润努。
- 綁定定位 position:fixed;
- 相對(duì)定位 position:relative;
- 絕對(duì)定位 position:absolute;
技巧
- 清除body默認(rèn)內(nèi)外邊距：*{margin:0 ; padding:0}
