引入CSS

內(nèi)聯(lián)樣式

<h1 style="text-align: center; color: red"></h1>

style標(biāo)簽

<style>
    body {background-color: grey;}
</style>

外部樣式

a.css

body {background-color: grey;}

index.html

<link rel="stylesheet" href="./a.css">

CSS之間引入（不常用）

a.css

@import url(./b.css);
div {background-color: red;}

調(diào)整樣式的技巧

取色留荔、量尺寸涣旨、預(yù)覽字體

• 使用截圖怜奖、取色工具：QQ妖胀、ColorPix峦剔；
• 字體可能有多種顏色档礁，此時(shí)需要查看網(wǎng)頁(yè)源代碼：Chrome開(kāi)發(fā)者工具下選擇Elements的Computed屬性（計(jì)算出來(lái)的屬性值）；
• 設(shè)置屬性值：直接在開(kāi)發(fā)者工具上測(cè)試修改吝沫，或查看MDN呻澜；
• 測(cè)量某些條件下的尺寸時(shí)（如hover）啟用截圖工具可能使效果消失，此時(shí)可以在開(kāi)發(fā)者工具中找到該元素惨险、把觸發(fā)條件固定再測(cè)量羹幸；

添加border

添加樣式無(wú)明顯效果時(shí)，可以給添加樣式的元素添加帶顏色和寬度的邊框觀察變化辫愉。

知識(shí)點(diǎn)

偽元素

• 只能展示（默認(rèn)以span的形式展示栅受，display: block則為div），不能被選中（不是真實(shí)的元素）；
• 必須添加content才可見(jiàn)（content可以為''）屏镊；
• 可以代替一層div（before/after后面不能再繼續(xù)加）依疼。

div::before{
    content: '['
}
div::after{
    content: ']'
}

屬性繼承

• 把父元素下的子元素的公共屬性樣式提取出來(lái)，寫(xiě)為父元素的樣式屬性闸衫；
• 部分屬性可修改值為inhert涛贯，表示繼承祖先元素屬性。

默認(rèn)邊距

很多標(biāo)簽都存在默認(rèn)邊距（如body標(biāo)簽?zāi)J(rèn)外邊距8px）蔚出，應(yīng)該修改為0弟翘，再根據(jù)實(shí)際情況調(diào)整。

* {
    margin: 0;
    padding: 0;
}

偽類(lèi)

如包含尺寸相關(guān)的樣式（如border）骄酗，偽類(lèi)屬性（如鼠標(biāo)經(jīng)過(guò)）引起改變時(shí)可能會(huì)造成“抖動(dòng)”稀余，此時(shí)應(yīng)設(shè)置樣式默認(rèn)存在、顏色為透明趋翻，如設(shè)置邊框：

a {
    border-bottom: 1px solid transparent;
}
a:hover {
    border-bottom: 1px solid red;
}

其他常用的偽類(lèi)還有：nth-child(2)睛琳、first-child、:lang等踏烙。

a標(biāo)簽

• a標(biāo)簽作為子標(biāo)簽時(shí)师骗，父標(biāo)簽可能不能完全包住a標(biāo)簽（a是內(nèi)聯(lián)元素），此時(shí)修改a標(biāo)簽的display屬性為block即可讨惩；
• 設(shè)置a標(biāo)簽的邊界與文字之間的邊距（內(nèi)邊距）辟癌，可以使用padding屬性；
• a標(biāo)簽?zāi)J(rèn)為藍(lán)色荐捻、有下劃線(xiàn)黍少，應(yīng)該修改全局a標(biāo)簽屬性color: inherit繼承祖先元素的顏色、text-decoration: none去除下劃線(xiàn)处面。

span標(biāo)簽

span與span之間無(wú)論相隔多少空的內(nèi)容（空格厂置、換行等），都會(huì)被認(rèn)為是一個(gè)空格魂角，而在某些span之間不需要空或空格寬度不合要求的的場(chǎng)合應(yīng)該把span同行靠在一起昵济，再通過(guò)margin調(diào)整間距。

元素的高度

文檔流

文檔流即文檔內(nèi)元素的流動(dòng)方向：

• 內(nèi)聯(lián)元素從左往右野揪，受到阻擋時(shí)換行繼續(xù)向右流動(dòng)访忿，其中：
  • span元素會(huì)被截?cái)喑蓛刹糠殖霈F(xiàn)在兩行；
  • 一連串的英文字符會(huì)被認(rèn)為是一個(gè)單詞囱挑，因此不會(huì)換行（由word-break屬性控制）醉顽；
• 塊級(jí)元素（獨(dú)占一行）從上往下流動(dòng)沼溜。

塊級(jí)元素（div）的高度：文檔流

• 塊級(jí)元素的高度由其內(nèi)部文檔流元素的高度總和決定（不是相加）平挑；
• 可以使用display屬性修改其文檔流展示特性（不建議）；
• 可以使用height屬性固定高度（不建議）。

內(nèi)聯(lián)元素（span）的高度

• 同行元素依基線(xiàn)（單詞本的第三線(xiàn)）對(duì)齊通熄；
• 換行元素相隔“建議行高”：如span中包含文字唆涝，則建議行高約為字體像素大小的1.4倍高（可以由height、line-height屬性控制唇辨，因字體而異廊酣，前端無(wú)法準(zhǔn)確決定）；
• 字體的像素大猩兔丁：把所有文字排成一行亡驰，最頂端到最低端的距離；
• 多個(gè)元素同行排放：取行高最大值饿幅；
• 注意內(nèi)聯(lián)元素只有左右padding有效果凡辱，上下padding沒(méi)有。

內(nèi)聯(lián)元素?zé)o法準(zhǔn)確確定高度栗恩，字體較小時(shí)可以通過(guò)line-height控制（當(dāng)line-height與height一致時(shí)會(huì)在外層元素中自動(dòng)居中）透乾，也可以通過(guò)padding調(diào)節(jié)。

背景圖

• 自適應(yīng)（寬高磕秤、位置）：

banner {
    background-image: url(xxx);
    background-position: center center;
    background-size: cover;
}

• 遮罩層：放在背景圖div的內(nèi)層乳乌，寬高與背景圖相等（注意自適應(yīng)時(shí)不需要指定），設(shè)置為黑色市咆、調(diào)整透明度即可（如background-color: rgba(0, 0, 0, 0.8)）

自適應(yīng)

• div動(dòng)態(tài)寬度：使用max-width屬性表示最寬不會(huì)超過(guò)該值汉操，而窗口較小時(shí)會(huì)隨窗口縮小床绪；
• div居中：margin: auto;;
• span居中：計(jì)算寬度客情、高度差，調(diào)整height = padding + line-height癞己、text-align控制膀斋；
• 同行元素對(duì)齊：調(diào)整同行不同元素的border、padding（修改padding時(shí)注意上下都要同時(shí)修改痹雅，否則不對(duì)稱(chēng)）仰担；
• 列表兩邊對(duì)齊：如要使dl > dt, dd占滿(mǎn)一行且占據(jù)在兩邊：

dl dt,
dl dd{
    float: left;
    width: 50%;
}

重疊

• 可以調(diào)整margin外邊距使元素與其他同級(jí)元素重疊，只需要設(shè)置margin為負(fù)數(shù)绩社；
• 另一個(gè)方法是使用相對(duì)定位（父）-絕對(duì)定位（子）摔蓝，不建議。

形狀

搜素：CSS Tricks Shape

三角形

• 首先讓邊框與寬度和高度相等
• 使寬度和高度等于0愉耙，即得到一個(gè)正方形贮尉；
• 取需要的指定方向的三角形、使其他三個(gè)邊框顏色為透明即可得到一個(gè)等腰直角三角形朴沿；
• 調(diào)節(jié)邊框?qū)挾炔卵瑁梢缘玫讲煌嵌劝苌啊⒉煌笮〉娜切巍?/li>

div {
    border: 10px solid red;
    width: 10px;
    height: 10px;
    border-top-color: black;
    border-top-color: blue;
    border-top-color: greed;
}

最后把透明的邊框?qū)傩詣h去，得到：

div {
    border: 100px solid transparent;
    width: 0px;
    border-left-color: #E6686A;
    border-top-width: 0px;
}

圓形

• div加上border-radius屬性可得到弧形的邊框魏铅，其中50%即為圓昌犹；
• 注意div必須指定width和height。

其他特殊效果

• 漸變（linear gradient generator）
• 動(dòng)畫(huà)（CSS Animation）
• 陰影（Shadow generator）
• 過(guò)渡：transition: xxx 1s;

圖標(biāo)

使用SVG：

svg {
    width: 100px;
    height: 100px;
    fill: 100%;
    vertical-align: top;
}

關(guān)于布局的總結(jié)

一些設(shè)計(jì)原則

• 不混用行布局和列布局（比如當(dāng)一行多個(gè)div览芳、且下一個(gè)div位于另一行時(shí)：在同行的div們外層套一個(gè)div斜姥，再與下一行的div組成列布局）；
• 使用max-width能根據(jù)窗口大小自動(dòng)調(diào)節(jié)div寬度沧竟，比width更靈活铸敏；
• 使用display屬性可以改變標(biāo)簽的展示方式，而不是為了方便再內(nèi)容外面先套上一個(gè)div悟泵；
• 上一行的div與當(dāng)前行div沒(méi)有關(guān)系搞坝，如無(wú)必要不應(yīng)該用一個(gè)div把兩者包在一起，而是根據(jù)內(nèi)容劃分層次魁袜。

多列

單列桩撮、多行排放的元素可通過(guò)float修改為橫向、多列布局：

.child {
    float: left
}

在其父元素清除浮動(dòng)帶來(lái)的副作用：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

另外也可以使用絕對(duì)定位-相對(duì)定位做多列布局峰弹，不建議店量。

雙列布局

標(biāo)簽定義如下：

<div class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

兩列自適應(yīng)：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 50%;
    float: left
}
.right {
    background-color: blue;
    width: 50%;
    float: left
}
</style>

固定一列，另一列自適應(yīng)：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 300px;
    float: left;
}
.right {
    background-color: blue;
    margin-left: 300px;
}
</style>

三列布局

標(biāo)簽定義如下：

<div class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</div>

固定兩邊鞠呈，中間自適應(yīng)（注意要把頁(yè)面上需要自適應(yīng)的元素代碼寫(xiě)在最后融师，因此固定中間和左/右、另一邊自適應(yīng)同理）：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 300px;
    float: left;
}
.middle {
    background-color: yellow;
    margin-left: 300px;
    margin-right: 100px;
}
.right {
    background-color: blue;
    width: 100px;
    float: right;
}
</style>

三列自適應(yīng)與兩列自適應(yīng)類(lèi)似蚁吝，不作贅述旱爆。

居中

水平居中

垂直居中

定位

固定定位

使用position屬性可以脫離文檔流（“浮”在上層）窘茁，如position: fixed屬性定位的元素：

• 不再受其父元素控制怀伦，其位置是相對(duì)于屏幕而言的；
• 其寬不會(huì)向兩邊擴(kuò)展（而是向一邊縮）山林，可通過(guò)width: 100%控制（不建議房待，可能會(huì)越出其父元素）；
• 在fixed定位的元素中套一層div驼抹，通過(guò)修改該div的padding屬性達(dá)到控制邊距的效果桑孩。

相對(duì)定位、絕對(duì)定位

絕對(duì)定位必為block框冀，使用絕對(duì)定位不會(huì)影響父元素流椒、可以避免頁(yè)面元素改變時(shí)影響布局（比如div擠壓）。

使用浮動(dòng)元素/絕對(duì)定位時(shí)沒(méi)有指定寬度會(huì)默認(rèn)自動(dòng)換行明也，需要同行展示可以設(shè)置white-space: nowrap宣虾。

• 父元素：position: relative;
• 子元素：position: absolute;（相對(duì)于祖先中的第一個(gè)relative素定位）
• 子元素中通過(guò)top极谊、bottom、left安岂、right屬性調(diào)節(jié)定位（表示到該邊的距離）。

更多高級(jí)的布局方法見(jiàn)：CSS布局十八般武藝都在這里了

周邊工具

• LESS CSS：一種簡(jiǎn)化帆吻、功能更多的CSS語(yǔ)言域那；
• SASS：一種簡(jiǎn)化、功能更多的CSS 語(yǔ)言（請(qǐng)自行搜索中英文官網(wǎng)）猜煮；
• PostCSS：一種 CSS 處理程序次员。

學(xué)習(xí)資源

• MDN
• CSS Tricks
• 阮一峰CSS
• 張?chǎng)涡竦腃SS博客
• Codrops炫酷CSS效果
• CSS揭秘
• CSS 2.1中文spec
• Magic of CSS
• codepen
• CDN源：cdnjs
• 圖片資源：wallhaven
• 圖標(biāo)資源：iconfont