Web 興起之后，關(guān)于CSS的介紹和學(xué)習(xí)資料已經(jīng)鋪天蓋地。
本文不涉及具體的CSS語法之類的，而是希望從初學(xué)者的角度，讓沒有接觸或很少接觸CSS
的人能快速的了解 CSS 到底是什么以及如何使用。
了解一個(gè)概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。
CSS (cascading style sheets)，可以翻譯成中文 層疊樣式表 。從名字可以看出：
CSS 的作用就是樣式，其實(shí) Web 只用 HTML也可以做出來，只是隨著機(jī)器和瀏覽器性能的提升，
人們對網(wǎng)頁的美觀和易用性要求越來越高，CSS 的重要性才逐漸凸顯。
CSS 我覺得有2個(gè)主要的作用：
注意 HTML 才是網(wǎng)頁的實(shí)際內(nèi)容，CSS 只是控制HTML元素的如何顯示，顯示與否。
CSS 在布局上用的最多，就是因?yàn)榱擞辛?CSS，才會(huì)有所謂的 div+css 布局方式，以前用 HTML 都是 table 布局。
初步了解 div+css 的布局，我覺得了解3點(diǎn)就夠了，框模型，定位和浮動(dòng)。
每個(gè)div對于css來說都是一個(gè) 框 。每個(gè)框由內(nèi)到外由4部分組成 content
padding border margin
div 的長和框由這4部分的長之和和寬之和組成
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<div>Content</div>
</body>
</html>
body {
background-color: #FAEBD7;
}
div {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
}例子很簡單，但是可以看出：
理解了 框模型之后，定位也很簡單，其實(shí)就是將一個(gè)個(gè)框定位在頁面上。
定位分為絕對定位和相對定位。
就是在瀏覽器上的絕對位置，通過 top 和 left 屬性設(shè)置相對于瀏覽器左上角的距離
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<div id="div1">Content1</div>
<div id="div2">Content2</div>
</body>
</html>
body {
background-color: #FAEBD7;
}
div {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
position: absolute;
}
#div1 {
top: 100px;
left: 100px;
}
#div2 {
top: 200px;
left: 200px;
}絕對定位明確但不靈活，除非屏幕大小能固定，否則需要多套css。設(shè)置不好會(huì)造成元素的重疊。
絕對定位中有個(gè)很關(guān)鍵的設(shè)置是 position: absolute
相對定位中每個(gè) div 的 top 和 left 不再是相對瀏覽器的左上角了。而是相對剩余位置的左上角。
同樣是上面的例子，把 position: absolute 換成 position: relative 可以發(fā)現(xiàn)2個(gè)div 不再重疊了。
div 默認(rèn)是 inline的，也就是每個(gè) div 占據(jù)了一行。
布局時(shí)，如果希望多個(gè)div排列在一行，那么就會(huì)用到浮動(dòng)（或者用以前的 table方式）
設(shè)置 div 浮動(dòng)屬性之后，就可以用div布局出各種結(jié)構(gòu)。
下面以常見的管理系統(tǒng)為例，做一個(gè)簡單的 div+css 布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<div id="head">head</div>
<div id="middle">
<div id="nav">nav</div>
<div id="content">content</div>
</div>
<div id="foot">foot</div>
</body>
</html>
body {
background-color: #FAEBD7;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid black;
text-align: center;
}
#head {
height: 50px;
width: 100%;
}
#middle {
width: 100%;
top: 50px;
bottom: 100px;
left: 0px;
position: absolute;
}
#nav {
float: left;
width: 200px;
height: 100%;
}
#content {
height: 100%;
overflow: hidden;
}
#foot {
height: 100px;
width: 100%;
bottom: 0px;
left: 0px;
position: absolute;
}上面的示例中，head，foot 高度固定，nav 寬度固定。其他都是自適應(yīng)的，
可以通過調(diào)整瀏覽器窗口的大小看到效果。
CSS 布局很簡單，如果還有其他的交互動(dòng)作，可以通過js來實(shí)現(xiàn)（比如導(dǎo)航和內(nèi)容的聯(lián)動(dòng)）。
現(xiàn)在已經(jīng)基本沒有人會(huì)用 table 的布局方式了，因?yàn)?table 本來只展現(xiàn)數(shù)據(jù)的一種方式，
row，cell 的方式也不適合組件化。
【 微信掃一掃 】
