上一篇博客web 前端入門介紹了基本的 html 內(nèi)容，但是網(wǎng)頁如果只有內(nèi)容的堆積，是沒有人愿意去看的。這篇博客將介紹 css 的基本知識(shí)，讓你的網(wǎng)頁更加好看。
CSS - 層疊樣式表 (Cascading Style Sheets)
CSS 是用來控制網(wǎng)頁的布局和外觀，比如 間距，顏色，行高，字體，邊框，圓角，甚至動(dòng)畫。。。
語法：
selector {
property1: value1;
property2: value2;
}
舉例：
div {
font-size: 14px;
color: #ccc;
padding: 10px;
}
如何使用
如何使用樣式對文檔進(jìn)行格式化，通常有以下幾種方法：
嵌入式
<div style="font-size:14px;color:#ccc;padding:10px;">Just do it</div>
內(nèi)聯(lián)式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
font-size: 14px;
color: #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div> Just do it </div>
</body>
</html>
外聯(lián)式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div> Just do it </div>
</body>
</html>
style.css
div {
font-size: 14px;
color: #ccc;
padding: 10px;
text-align: center;
}
層疊次序
- 瀏覽器缺省設(shè)置
- 外聯(lián)式 （推薦使用）
- 內(nèi)聯(lián)式（位于
<head>標(biāo)簽內(nèi)部） - 嵌入式（在 HTML 元素內(nèi)部） （優(yōu)先級最高）
繼承
如下代碼：
<body>
hello
<p> world </p>
</body>
body {
color: red;
}
p 標(biāo)簽中的內(nèi)容也會(huì)是紅色，p 標(biāo)簽的 color 屬性繼承自 body
如果想要擺脫繼承，可以寫如下 css
p {
color: yellow;
}
則 p 標(biāo)簽中的內(nèi)容就會(huì)變?yōu)辄S色，而不是紅色。
選擇器
先看這段 HTML
<body>
<div class="section">
<div class="nav content-header">
<h1 class="nav-item title">This is a title</h1>
<p> Hello </p>
</div>
<p id="text"> World </p>
</div>
<div class="section"> <p> Let it go </p> </div>
</body>
標(biāo)簽選擇器 h1 選擇標(biāo)簽名為 h1 的節(jié)點(diǎn)
ID 選擇器 #text 選擇 id 屬性為 text 的節(jié)點(diǎn)
class 選擇器 .section 選擇 class 屬性有 section 的節(jié)點(diǎn)
選擇的組合：
div.section 是 div 標(biāo)簽，同時(shí) class 屬性有 section
div .section 是 div 標(biāo)簽的后代，且 class 屬性有 section
div > .section 是 div 標(biāo)簽的子節(jié)點(diǎn)，且 class 屬性有 section
盒模型
一切可見的 html 元素，在瀏覽器的布局里都可以理解為一個(gè)框。這個(gè) html 元素會(huì)占用多大的視覺空間功，會(huì)通過盒模型來計(jì)算。如圖：
內(nèi)邊距總是跟元素的背景色一樣。
外邊距總是透明的。
如何用 css 控制：
div {
margin: 10px;
padding: 12px;
border: 1px solid #ccc
}
內(nèi)邊距的設(shè)置
示例如下：
div {padding: 10px 0.25em 2px 20%;}
div {padding: 10px 6px 8px;}
div {padding: 10px 8px;}
div {padding: 10px;}
div {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
單位不同，其中百分?jǐn)?shù)值是相對于其父元素的 width 計(jì)算的。
設(shè)置邊距順序，是上、右、下、左的順序（順時(shí)針），如果某個(gè)方向的邊距沒有，會(huì)使用相對的方向的邊距。如果只有一個(gè)值 div {padding: 10px;},自然是四個(gè)方向邊距都為這個(gè)值。
可以通過 padding-top, padding-right, padding-bottom, padding-left 單獨(dú)設(shè)置。
外邊距的設(shè)置
示例如下：
div {margin: 10px 0.25em 2px 20%;}
div {margin: 10px 6px 8px;}
div {margin: 10px 8px;}
div {margin: 10px;}
div {
margin-top: 10px;
margin-right: 0.25em;
margin-bottom: 2ex;
margin-left: 20%;
}
外邊距的設(shè)置規(guī)則與內(nèi)邊距類似，此外，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距，發(fā)生外邊距合并。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。但是注意只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距疊加。行內(nèi)框、 浮動(dòng)框或絕對定位框之間的外邊距不會(huì)疊加。
邊框的設(shè)置
示例如下：
div {border: 1px solid #ccc;}
div {border-top: 4px solid #7c7;}
div {border-style: solid dotted dashed double;}
div {border-top-width: 15px;}
border 設(shè)置的屬性有寬度、樣式，以及顏色
可通過 border-width, border-style, border-color 單獨(dú)設(shè)置某一種屬性
也有四個(gè)方向（上，右，下，左）border-witdh: 1px 2px; 規(guī)則類似外邊距和內(nèi)邊距，或者單獨(dú)指定方向，如 border-top: 1px solid #abc; 或者既指定方向又指定屬性， 如 border-top-witdh: 1px
css3 新屬性： border-radius?？梢允惯吙蜃?yōu)閳A角形狀，甚至是一個(gè)圓形，橢圓形，如 border-radius: 20px; ， border-radius: 50%; 使用百分?jǐn)?shù)定義圓形半徑或橢圓的半長軸，半短軸。水平半軸相對于盒模型的寬度；垂直半軸相對于盒模型的高度。效果如下：
定位和布局
display 屬性
div、h1 或 p 元素的 display 屬性默認(rèn)為 block， 常常被稱為“塊級元素”， span 和 strong 等元素的 display 屬性默認(rèn)為 inline，稱為“行內(nèi)元素”。
常見的 display 屬性值有如下幾種：
block： 寬高可以自行設(shè)置，默認(rèn)寬度由父容器決定，默認(rèn)高度由內(nèi)容決定。自己獨(dú)占一行。
inline：寬度和高度都有內(nèi)容決定，與其他元素共占一行。
inline-block： 寬高可以自行設(shè)置，類似block，但是與其他元素共占一行，類似inline。
none： 常用于隱藏 DOM 節(jié)點(diǎn)
position 屬性
元素在頁面中的布局遵守一套文檔流的方式，默認(rèn)的定位屬性值為static。它其實(shí)是未被設(shè)置定位的。
元素如果被定位了，那么它的top left bottom right 等屬性就會(huì)生效，能設(shè)置定位的屬性是 relative, absolute和fixed。
需要注意的另一點(diǎn)是被定位的元素層次( z-index)會(huì)得到提高。
relative（相對定位）
設(shè)置方法： position: relative
然后通過設(shè)置 top left bottom right 中任意一個(gè)屬性，元素就會(huì)在自身文檔流所在位置上被移動(dòng)，移動(dòng)的距離是相對于該元素開始的起點(diǎn)（未使用相對定位之前）。
看下 w3school 上的例子，代碼：
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
效果如下：
可以看到，其他元素不會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。
absolute（絕對定位）
設(shè)置方法： position: absolute
設(shè)置了絕對定位之后，元素會(huì)脫離文檔流，其他的元素會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。
偏移距離也是通過設(shè)置 top left bottom right 中的屬性，不同的是偏移的參考位置和之前元素的位置沒有關(guān)系，而是它最近的設(shè)置了定位屬性（position值不為static）的祖先元素。
如果元素為塊級元素（display 屬性值為 block)，那么它的寬度也會(huì)由內(nèi)容撐開。（在默認(rèn)文檔流中塊級元素如果沒有設(shè)置寬度屬性，會(huì)自動(dòng)填滿整行）
看下 w3school 上的例子，代碼：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
效果如下：
fixed (固定定位)
設(shè)置方法： position: fixed
固定定位有些類似絕對定位，設(shè)置后也會(huì)脫離文檔流。不同的地方在于固定定位的參考點(diǎn)是可視窗口，
即使頁面滾動(dòng)，元素仍然會(huì)在固定位置。
float 屬性
設(shè)置 float 屬性，可以使元素變?yōu)楦?dòng)定位，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br>
語法： float: left 或 float: right
看下 w3school 上的例子：
以上兩個(gè)例子可以看出，浮動(dòng)框會(huì)脫離文檔流。第一個(gè)例子浮動(dòng)框碰到容器的右邊緣停止了移動(dòng)，第二個(gè)例子浮動(dòng)框碰到容器的左邊緣或者另一個(gè)浮動(dòng)框邊緣停止了移動(dòng)。
第一個(gè)例子行框被縮短。第二個(gè)例子展示了浮動(dòng)元素不占空間，可以通過創(chuàng)建一個(gè)空的 div，然后設(shè)置 clear 屬性，如
clear: both，清除浮動(dòng)。
