上一篇博客web 前端入門介紹了基本的 html 內(nèi)容山橄，但是網(wǎng)頁如果只有內(nèi)容的堆積怀各，是沒有人愿意去看的频伤。這篇博客將介紹 css 的基本知識恳谎，讓你的網(wǎng)頁更加好看。
CSS - 層疊樣式表 (Cascading Style Sheets)
CSS 是用來控制網(wǎng)頁的布局和外觀憋肖，比如 間距因痛，顏色，行高岸更，字體鸵膏，邊框，圓角怎炊，甚至動畫谭企。廓译。。
語法：
selector {
property1: value1;
property2: value2;
}
舉例：
div {
font-size: 14px;
color: #ccc;
padding: 10px;
}
如何使用
如何使用樣式對文檔進行格式化债查，通常有以下幾種方法：
嵌入式
<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;
}
層疊次序
- 瀏覽器缺省設置
- 外聯(lián)式 （推薦使用）
- 內(nèi)聯(lián)式（位于
<head>標簽內(nèi)部） - 嵌入式（在 HTML 元素內(nèi)部） （優(yōu)先級最高）
繼承
如下代碼：
<body>
hello
<p> world </p>
</body>
body {
color: red;
}
p 標簽中的內(nèi)容也會是紅色非区，p 標簽的 color 屬性繼承自 body
如果想要擺脫繼承，可以寫如下 css
p {
color: yellow;
}
則 p 標簽中的內(nèi)容就會變?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>
標簽選擇器 h1 選擇標簽名為 h1 的節(jié)點
ID 選擇器 #text 選擇 id 屬性為 text 的節(jié)點
class 選擇器 .section 選擇 class 屬性有 section 的節(jié)點
選擇的組合：
div.section 是 div 標簽，同時 class 屬性有 section
div .section 是 div 標簽的后代速和，且 class 屬性有 section
div > .section 是 div 標簽的子節(jié)點歹垫，且 class 屬性有 section
盒模型
一切可見的 html 元素，在瀏覽器的布局里都可以理解為一個框颠放。這個 html 元素會占用多大的視覺空間功排惨，會通過盒模型來計算。如圖：
內(nèi)邊距總是跟元素的背景色一樣碰凶。
外邊距總是透明的暮芭。
如何用 css 控制：
div {
margin: 10px;
padding: 12px;
border: 1px solid #ccc
}
內(nèi)邊距的設置
示例如下：
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%;
}
單位不同，其中百分數(shù)值是相對于其父元素的 width 計算的欲低。
設置邊距順序辕宏，是上、右砾莱、下瑞筐、左的順序（順時針），如果某個方向的邊距沒有腊瑟，會使用相對的方向的邊距聚假。如果只有一個值 div {padding: 10px;},自然是四個方向邊距都為這個值。
可以通過 padding-top, padding-right, padding-bottom, padding-left 單獨設置闰非。
外邊距的設置
示例如下：
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%;
}
外邊距的設置規(guī)則與內(nèi)邊距類似膘格，此外桶癣，當兩個垂直外邊距相遇時尿贫，它們將形成一個外邊距母债，發(fā)生外邊距合并猫十。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。但是注意只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距疊加杠娱。行內(nèi)框廷区、 浮動框或絕對定位框之間的外邊距不會疊加嬉挡。
邊框的設置
示例如下：
div {border: 1px solid #ccc;}
div {border-top: 4px solid #7c7;}
div {border-style: solid dotted dashed double;}
div {border-top-width: 15px;}
border 設置的屬性有寬度胚迫、樣式，以及顏色
可通過 border-width, border-style, border-color 單獨設置某一種屬性
也有四個方向（上唾那，右访锻，下褪尝，左）border-witdh: 1px 2px; 規(guī)則類似外邊距和內(nèi)邊距，或者單獨指定方向期犬，如 border-top: 1px solid #abc; 或者既指定方向又指定屬性河哑， 如 border-top-witdh: 1px
css3 新屬性： border-radius」昊ⅲ可以使邊框變?yōu)閳A角形狀璃谨，甚至是一個圓形，橢圓形鲤妥，如 border-radius: 20px; 佳吞， border-radius: 50%; 使用百分數(shù)定義圓形半徑或橢圓的半長軸，半短軸棉安。水平半軸相對于盒模型的寬度底扳；垂直半軸相對于盒模型的高度。效果如下：
定位和布局
display 屬性
div贡耽、h1 或 p 元素的 display 屬性默認為 block衷模， 常常被稱為“塊級元素”， span 和 strong 等元素的 display 屬性默認為 inline蒲赂，稱為“行內(nèi)元素”阱冶。
常見的 display 屬性值有如下幾種：
block： 寬高可以自行設置，默認寬度由父容器決定滥嘴，默認高度由內(nèi)容決定木蹬。自己獨占一行。
inline：寬度和高度都有內(nèi)容決定氏涩，與其他元素共占一行届囚。
inline-block： 寬高可以自行設置，類似block是尖，但是與其他元素共占一行意系，類似inline。
none： 常用于隱藏 DOM 節(jié)點
position 屬性
元素在頁面中的布局遵守一套文檔流的方式饺汹，默認的定位屬性值為static蛔添。它其實是未被設置定位的。
元素如果被定位了兜辞，那么它的top left bottom right 等屬性就會生效迎瞧，能設置定位的屬性是 relative, absolute和fixed。
需要注意的另一點是被定位的元素層次( z-index)會得到提高逸吵。
relative（相對定位）
設置方法： position: relative
然后通過設置 top left bottom right 中任意一個屬性凶硅，元素就會在自身文檔流所在位置上被移動，移動的距離是相對于該元素開始的起點（未使用相對定位之前）扫皱。
看下 w3school 上的例子足绅，代碼：
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
效果如下：
可以看到捷绑，其他元素不會調(diào)整位置來彌補它偏離后剩下的空隙。
absolute（絕對定位）
設置方法： position: absolute
設置了絕對定位之后氢妈，元素會脫離文檔流粹污，其他的元素會調(diào)整位置來彌補它偏離后剩下的空隙。
偏移距離也是通過設置 top left bottom right 中的屬性首量，不同的是偏移的參考位置和之前元素的位置沒有關系壮吩，而是它最近的設置了定位屬性（position值不為static）的祖先元素。
如果元素為塊級元素（display 屬性值為 block)加缘，那么它的寬度也會由內(nèi)容撐開鸭叙。（在默認文檔流中塊級元素如果沒有設置寬度屬性，會自動填滿整行）
看下 w3school 上的例子生百，代碼：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
效果如下：
fixed (固定定位)
設置方法： position: fixed
固定定位有些類似絕對定位递雀，設置后也會脫離文檔流。不同的地方在于固定定位的參考點是可視窗口蚀浆，
即使頁面滾動缀程，元素仍然會在固定位置。
float 屬性
設置 float 屬性市俊，可以使元素變?yōu)楦佣ㄎ谎畲眨拥目蚩梢韵蜃蠡蛳蛴乙苿樱钡剿耐膺吘壟龅桨蚧蛄硪粋€浮動框的邊框為止摆昧。
語法： float: left 或 float: right
看下 w3school 上的例子：
以上兩個例子可以看出撩满，浮動框會脫離文檔流。第一個例子浮動框碰到容器的右邊緣停止了移動绅你，第二個例子浮動框碰到容器的左邊緣或者另一個浮動框邊緣停止了移動伺帘。
第一個例子行框被縮短。第二個例子展示了浮動元素不占空間忌锯，可以通過創(chuàng)建一個空的 div伪嫁，然后設置 clear 屬性，如
clear: both偶垮，清除浮動张咳。
