一、盒子模型：

整體的寬=margin-left（right）+padding-left（right）+border+content

整體的高=margin-top（bottom）+padding-top（bottom）+border+content

二、頁面布局：

（1）標準流：按照原先格式排版塊兒元素等一些格式，所有塊兒都是按照豎排排列，自占一排。

（2）浮動流：給div標簽加上float屬性，是指按照屬性來排列。若想讓所給的塊兒元素按照橫行排列，需要給每個div元素均添加float：left（right）屬性。

（3）每個對象都可以調用多種樣式，樣式之間用空格鍵來進行分開即可。

（4）要是塊級元素居中，使用margin：0 auto；

要是行內元素居中，給父元素使用text-align：center；

（5）建立頁面前可以建立一個通用頁面，清除margin，padding等值。其中list-style：none；屬性可以使列表中的圓圈，方塊兒等標誌去掉。clear：both可以清除浮動屬性。當行高等於頁面塊狀元素的高時，其中的內容垂直居中。使用display：inline-block（block）屬性可以讓行內元素和塊元素進行轉換。ctrl+shift+/=註釋（其中的內容並不在頁面中顯示），在html中：<!-- -->代表註釋，在css中：/* */代表註釋。border-radius屬性可以設置圓角效果。cursor：pointed可以在鼠標停留時由箭頭變成手狀。input-outline：none可以使所有由input定義的框框除去除在選中時的藍色邊框。

（6）頁面中的定位：position屬性，relative（相對定位：不加限定的時候以該標簽原先所在的位置為參考）/absolute（絕對定位：以父元素位置為參考）/fixed（固定定位：定在頁面中的位置保持不動）。

如果想要進行移動，要給父元素定義position：relative；（此時不用定義top等值）

position與top，bottom，left，right在一起使用

若定位與浮動在一起使用時，浮動效果消失。

（7）">"連接的元素代表父子關系，只適用於兩代，而使用空格的則代表該元素下所有相同的標簽。

（8）在下拉表單中，要想讓鼠標停留時再出現其中的內容時，需要在其中添加display：none（系統默認隱藏，不占用結構，等於此代碼被註釋）而使用display：block可以使內容顯示出來。

（9）hover屬性可以使用在很多標簽上,用於定義鼠標停留時的樣式。

（10）

顯示屬性
display:
屬性值：none:隱藏
block:塊級顯示
inline：行級顯示

<form action="">
name:<input id="name" type="text" /><span id="span">對不起 輸入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>
（11）

浮動屬性
float:
屬性值：left right
clear:清除浮動 left right both
缺點： (1)影響相鄰元素不能正常顯示。(2)影響父元素不能正常顯示。

HTML-頁面布局（11月5日）