一疯趟、如何飲用CSS屬性到HTML中厨诸？
- 用
<style>標(biāo)簽 - style屬性
-
<link>標(biāo)簽引入到css文件當(dāng)中 - 在css文件中引入css文件
二聊倔、display屬性
可以強(qiáng)制切換塊級(jí)元素/內(nèi)聯(lián)元素蜗帜。
display: inline; (內(nèi)聯(lián)元素，寬高由自己決定暇赤，不獨(dú)占一行)
display: block; (塊級(jí)元素，寬度可以設(shè)置重抖，高度由元素大小決定棒妨，獨(dú)占一行)
display: none; (display:none; 通常會(huì)搭配 JavaScript 一起使用)
display: inline-block; (使用 display: inline-block 的元素就像 display: inline 的元素一樣踪古，但你可以設(shè)定 width 與 height 屬性)
學(xué)習(xí)資源：學(xué)習(xí)css版面配置（不翻墻的話可能打不開）
三、float屬性
在設(shè)置float屬性后券腔，可能會(huì)出現(xiàn)無(wú)法意料的bug伏穆，這時(shí)候需要在設(shè)置了folat元素的父元素上設(shè)置clearfix秘技。秘技如下：
.clearfix::after {
content: " ";
display: block;
clear: both;
}
再?gòu)?fù)述三遍：
- 把
clearfix寫到所有浮動(dòng)元素的父級(jí)元素上纷纫。 - 把
clearfix寫到所有浮動(dòng)元素的父級(jí)元素上枕扫。 - 把
clearfix寫到所有浮動(dòng)元素的父級(jí)元素上。
四辱魁、position(相對(duì)定位/絕對(duì)定位)
position: static;是預(yù)設(shè)值烟瞧。任何套用 position: static; 的元素「不會(huì)被特別定位」在頁(yè)面上特定位置，而是照著瀏覽器預(yù)設(shè)的配置自動(dòng)排版在頁(yè)面上染簇，所有其他的屬性值都代表該元素會(huì)被定位在頁(yè)面上参滴。position: relative;寫在父元素上
position: absolute;寫在子元素上
在一個(gè)設(shè)定為 position: relative 的元素內(nèi)設(shè)定 top 、 right 锻弓、 bottom 和 left 屬性砾赔，會(huì)使其元素「相對(duì)地」調(diào)整其原本該出現(xiàn)的所在位置，而不管這些「相對(duì)定位」過的元素如何在頁(yè)面上移動(dòng)位置或增加了多少空間青灼，都不會(huì)影響到原本其他元素所在的位置暴心。
如果套用 position: absolute 的元素，其上層容器並沒有「可以被定位」的元素的話杂拨，那麼這個(gè)元素的定位就是相對(duì)於該網(wǎng)頁(yè)所有內(nèi)容（也就是 <body> 元素）最左上角的絕對(duì)位置专普，看起來就是這張網(wǎng)頁(yè)的絕對(duì)位置一樣，所以當(dāng)你的畫面在捲動(dòng)時(shí)扳躬，該元素還是會(huì)隨著頁(yè)面卷動(dòng)脆诉。
position: fixed;
- 固定定位（position: fixed）的元素會(huì)相對(duì)於瀏覽器視窗來定位甚亭，這意味著即便頁(yè)面捲動(dòng)，它還是會(huì)固定在相同的位置击胜。和 relative 一樣亏狰，我們會(huì)使用 top 、 right 偶摔、 bottom 和 left 屬性來定位暇唾。
參考資料：學(xué)習(xí)css版面配置（不翻墻的話可能還是打不開）*
這些都非常都基礎(chǔ)，css中還有偽類辰斋、盒模型策州、動(dòng)畫模塊、彈性布局等～這一個(gè)星期專攻css９獭９还摇！codingＥ悍颉Ｄ跆恰！
加油毅贮！
