所謂盒子模型就是把html頁面中的元素看作是乙個矩形盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容、邊框和外邊距組成。
1.網頁就是多個盒子巢狀排列的結果。
2.內邊距出現在內容區域的周圍，當給元素新增背景或背景影象的時，該元素的背景色或背景圖也將出現在內邊劇中
3.外邊距是該元素與相鄰元素之間的距離
4.如果給元素定義邊框屬性，邊框將出現在內邊距和外邊距之間
雖然盒子擁有內邊距、邊框、外邊距、寬和高這些基本屬性，但並不要求每個元素都必須定義這些屬性。
設定內容 樣式屬性 常用屬性值
上邊框 border-top-style:樣式；
border -top-width:寬度；
border-top-color:顏色；
bordet-top:寬度 樣式 顏色 ；
下邊框 border-bottom-style:樣式；
border-bottom-width:寬度；
border-bottom-color:顏色；
border-bottom:寬度 樣式 顏色；
左邊框 border-left-style:樣式；
border-left-width:寬度；
border-left-color:顏色；
border-left:寬度 樣式 顏色；
右邊框 border-right-style:樣式；
border-right-width:寬度；
border-right-color:顏色；
border-right:寬度 樣式 顏色；
樣式綜合設定 border-style:上邊 [右邊 下邊 左邊] ； none(無）、solid 單實線、dashed 虛線、dotted 點線、double 雙實線
寬度綜合設定 border-width:上邊 [右邊 下邊 左邊] ； 畫素值
顏色綜合設定 border-color:上邊 [右邊 下邊 左邊] ； 顏色值、#十六進製制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設定 border:四邊寬度 四邊樣式 四邊顏色；
1.使用border-style屬性綜合設定四邊樣式時，必須按上右下左的順時針順序，省略時採用值複製的原則，即乙個值為四邊，兩個值為上下/左右，3個值為上/左右/下。
2. 使用border-width屬性綜合設定四邊寬度時，必須按上右下左的順時針順序採用值複製的原則，即乙個值為四邊，兩個值為上下/左右，3個值為上/左右/下。
3. 使用border-color屬性綜合設定四邊顏色時，必須按順時針順序採用值複製的原則，即乙個值為四邊，兩個值為上下/左右，3個值為上/左右/下。
設定邊框顏色時同樣必須設定邊框樣式，如果未設定樣式或設定為none,則其他的邊框屬性無效。
4.當每一側的邊框都不同，或者只需要單獨定義某一側的邊框時，可以使用單側邊框的綜合設定屬性border-top、border-bottom、border-left、或border-right。
內邊距屬性
（1）padding-top:上內邊距。
（2）padding-right:右內邊距。
（3）padding-bottom:下內邊距。
（4）padding-left:左內邊距。
（5）padding:上內邊距[右內邊距 下內邊距 左內邊距]
1.在上面的設定中，padding相關屬性的取值可為auto自動（預設值）、不同單位的數值、相對于父元素（或瀏覽器）寬度的百分比%，實際工作中最常用的是畫素值px，不允許使用負值。
2.同邊框相關屬性一樣，使用復合屬性padding定義內邊距時，必須按順時針順序採用值複製的原則，即乙個值為四邊，兩個值為上下/左右，3個值為上/左右/下。
3.如果設定內外邊距為百分比，不論上下或左右的內外邊距，都是相對于父元素寬度width的百分比，隨父元素width的變化而變化，和高度height無關。
外邊距屬性
（1）margin-top:上內邊距。
（2）margin-right:右內邊距。
（3）margin-bottom:下內邊距。
（4）margin-left:左內邊距。
（5）margin:上內邊距[右內邊距 下內邊距 左內邊距]
margin相關屬性的值，使復合屬性margin取1~4個值的情況與padding相同。但是外邊距可以使用負值，使相鄰元素重疊。
當對塊級元素應用寬度屬性width，並將左右的外邊距都設定為auto時，可使塊級元素水平居中。
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
背景屬性
1.設定背景顏色
使用background-color屬性來設定，其屬性值與文字顏色的取值一樣，可使用預定義的顏色值、十六進製制#rrggbb或 rgb**rgb(r,g,b)。background-color的預設值為transparant,即背景透明，這是子元素會顯示其父元素的背景。
2.設定背景影象
將影象作為網頁元素的背景， 通過background-image屬性實現。
3.設定背景影象平鋪
預設情況下，背景影象會自動向水平和豎直兩個方向平鋪，可以通過background-repeat屬性來控制，
（1）repeat:沿水平和豎直兩個方向平鋪（預設值）。
（2）no-repeat:不平鋪（影象位於元素的左上角，只顯示一次）。
（3）repeat-x：只沿水平方向平鋪。
（4）repeat-y:只沿豎直方向平鋪。
4.設定背景影象的位置
background-position屬性的值通常設定為兩個，中間用空格隔開，用於定義背景影象在元素的水平和垂直方向的座標，background-position屬性的默值為「00」或「top left」即背景影象位於元素的左上角。
（1）使用不同單位（最常用的是畫素px）的數值，直接設定影象左上角在元素中的座標。
（2）使用預定義的關鍵字，指定背景影象在元素中的對齊方式，
水平方向值: left、center、right。
垂直方向值: top、center、bottom。
兩個關鍵字的順序任意，若只有乙個值則另乙個預設為center。例如：
center:相當於center center (居中顯示）。
top:相當於top center或center top (水平居中、上對齊）。
(3)使用百分比：按背景影象和元素的指定點對齊
0% 0%:表示影象左上角與元素的左上角對齊。
50% 50%:表示影象50% 50%中心點與元素50%50%的中心點對齊
20% 30% :表示影象20% 30%的點與元素20% 30%的點對齊。
100% 100% :表示影象右下角與元素的右下角對齊，而不是影象充滿元素
如果只有乙個百分數，將作為水平值，垂直值則預設為50%。
5.設定背景影象固定
可以使用background-attachment屬性來設定。
（1）scroll:影象隨頁面元素一起滾動（預設值）。
（2）fixed:影象固定在螢幕上，不隨頁面元素滾動。
6.綜合設定元素的背景
語法格式：
background:背景色 url("影象）平鋪 定位 固定；
1盒子的寬與高
1.盒子的總寬度=width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和。
2.盒子的總高度=height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和。
3.寬度屬性width和高度屬性height 僅適用於塊級元素，對行內元素無效（< img/>標記和< input/>除外）。
4.計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
網頁設計與製作
ap div 網頁布局技術 模板 庫 div css 框架一 用 建頁 面 建空白頁 儲存到站點 插入 兩行之間用shift enter鍵換行 認識 標題 部分可用來定義表頭樣式 無 對 不啟用列或崗標題 左 可以將 一列運標題以便每一 行輸入一標題 頂部 可以將 一行作為標題行，以便為 每列加標籤...
網頁設計與製作（四）
1.標籤指定選擇器 標籤指定式選擇器又稱交集選擇器，有兩個選擇器構成，其中第乙個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h3.special或p one。3段落文字巢狀在段落中，使用strong標記定義的文字 紅色 巢狀之外由 後代選擇器不限於使用兩個元素，如...
網頁設計與製作的學習（三）
標籤指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第乙個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格。段落一段落二 段落三方塊1 後代選擇器用來選擇元素或元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後邊，中間用空格分隔。當標記發生巢狀時，內層標記就成為...