HTML進階：通過DIV+CSS進行佈局
為什麼要使用這種佈局？
傳統表格的佈局缺陷佈局固定不夠靈活。
什麼是Div？
它是一個html標籤，一個塊級元素（單獨顯示一行，即如果後面還有元素，將會在下一行顯示）。主要用途是結合CSS實現頁面的佈局。
什麼是Span？
它是一個html標籤，一個內聯元素（顯示一行，即如果後面還有元素，則顯示在同一行上）。主要用途是結合CSS對括起來的內容進行樣式的修飾。
CSS的作用是什麼？
HTML構成了整個網站的骨架，CSS則是對其中的內容進行修飾和美化。
CSS的語法規範：
選擇器{
屬性名1：屬性值1；
屬性名2：屬性值2；
屬性名3：屬性值3；
}
注：選擇器的作用是快速查詢需要設定樣式的元素
三種基本選擇器模式：
1.元素選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素選擇器</title> <style> div{ font-size: 30px; color: red; } </style> </head> <body> <div> 選中1 </div> <div> 選中2 </div> <div> 選中3 </div> </body> </html>
2.類選擇器（相比第一個它可以實現同類標籤的不同選擇）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>類選擇器</title> <style> .div2{ font-size: 30; color: blue; } </style> </head> <body> <div> 選中1 </div> <div class="div2"> 選中2 </div> <div> 選中3 </div> </body> </html>
3.id選擇器（實現單個的選中）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
<style>
#div3{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
選中1
</div>
<div class="div2">
選中2
</div>
<div id="div3">
選中3
</div>
</body>
</html>兩種其他選擇器：
1.層級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級選擇器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>
<p>
選中1
</p>
</div>
</body>
</html>2.屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
input[type="text"]{
background-color: gold;
}
</style>
</head>
<body>
使用者名稱：<input type="text" name="username" /><br />
密碼：<input type="password" name="password" />
</body>
</html>三種CSS引入方式
作用：CSS樣式的程式碼所寫的位置
1.內部引入
即是將<style>樣式部分寫在<head>裡，預設style中type="text/css"
2.行內引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<style type="text/css">
div{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div style="font-size: 20px;color: blueviolet;">
這是行內引入
</div>
</body>
</html>注：style是任何標籤都具有的屬性。且style具有就近原則，選擇最近的樣式。
3.外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<!--當使用外部引入是，需使用link標籤，stylesheet代表層疊樣式表，href代表外部引入的路徑-->
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
選中1
</div>
<div>
選中2
</div>
</body>
</html>CSS浮動
目的：將多個<div>標籤在一行顯示
規則：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。所以一旦前面的框發生變化，後面的框可能也會發生相應的變化。考慮到浮動框不在文件的普通流（即不浮動的框）中，所以文件的普通流中的塊框將視浮動框為不存在。
設定：float屬性（取值可以是left，right，none）
注意：一旦最後一個浮動框在最後一個位置放不下時，就會跳到下一行；如果前面的浮動框過高，後面放不下的浮動框將會被卡在較高的浮動框處。
如果想讓前面的浮動對後面沒有影響，該怎樣設定清除浮動？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮動</title>
<style>
#one{
border: 1px solid red;
width:300px;
height: 150px;
float:left;
}
#two{
border: 1px solid black;
width:300px;
height: 150px;
}
#three{
border: 1px solid blue;
width:300px;
height: 150px;
}
/*清除浮動*/
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="clear">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>CSS的盒子模型
注：當整個需要顯示的內容居中，可設定屬性值為auto；當內容需要居中時，可通過text-align:center進行設定；如果只設置一個畫素，表示各邊都是相同的畫素；如果設定四個畫素，以此表示的是上，右，下，左各邊的邊距；當然也可以通過padding-top，padding-right，padding-bottom，padding-left進行分別設定。可通過瀏覽器中F12進行除錯。
