第5章-CSS盒子模型
一、盒子相關屬性：
盒子模型是實現網頁布局的基礎，經常會使用內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)等屬性。
I.內邊距與外邊距：
1.外邊距：
邊距(margin)屬性，根據上、下、左、右4個方向可細分為margin-top、margin-bottom、margin-left、margin-right。
{margin:1px 2px 3px 4px;}，有4個值，表示上外邊距1px、右外邊距2px、下外邊距3px、左外邊距4px。
{margin:1px 4px;}，有2個值，表示上下外邊距1px、左右外邊距4px。
除了上述設置外，也可以設置水平位auto，這樣做會使盒子里面的水平位置自動居中。
?內容設置為：<p class="margin">使用auto效果</p>。在瀏覽器中運行該代碼，結果顯示該段落位置為水平居中。
2.邊框屬性：
邊框(border)有3個屬性：顏色(border-color)、粗細(border-width)、樣式(border-style)。
如：border-width: thin 10px thick medium <!-- 對盒子的邊框粗細進行設置 -->
對邊框的設置方法是：按照規定的順序給出1個、2個、3個、4個屬性值，它們含義將有所區別，具體如下：
（1）1個：4個邊框屬性一樣；
（2）2個：前者表示上下邊框屬性，后者表示左右邊框屬性；
（3）3個：前者表示上邊框屬性，中間表示左右邊框屬性，后者表示下邊框屬性；
（4）4個：依次表示上、右、下、左邊框的屬性，即順時針排序。
3.內邊距:
內邊距(padding)屬性，也稱為填充屬性，設置的是內容與邊框的距離。如：
p {width: 150px;height: 50px;background-color: pink;padding-left: 40px; }II.塊級元素與行內元素：
大多數HTML元素都被定義為塊級元素(block)或行內元素(inline)。
（1）塊級元素默認占一行，一行內添加一個塊級元素后，一般無法再添加其他元素。如：div、p、h1~h6、ul、ol、table都是塊級元素。
（2）行內元素會在一條直線上排列(默認寬度只與內容有關)，都是同一行的，水平方向排列。如：a、span、img都是行內元素。
它們的區別如下：
塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素，只能包含文本或其他行內元素。
塊級元素的寬高、行高以及外邊距內邊距都是可控的。行內元素設置width無效，height無效(可設置line-height)，?margin上下無效，padding上下無效。
它們的用法：
塊級元素dIv實際上就是一個容器，它把文檔分成獨立的、不同的部分，div還有一個最常用的用途是文檔布局。
行內元素span用來組合文檔中的行內元素，通過使用span標簽可以更好地管理行內元素。如果不加樣式，span元素中的文本與其他文本不會有任何區別。如：<p><span style="font-style:italic;">注釋</span>span是行內元素</p>。
1.塊級元素之間的豎直margin：
<div style="margin-bottom:50px;">塊元素1</div> <div style="margin-top:30px;">塊元素2</div>以上代碼會形成“塌陷現象”，即：最終margin效果為塊元素1和塊元素2中margin的最大值者，以上代碼中塊元素2的margin-top為30<50，所以相當于無效。豎直相鄰margin-top、margin-bottom不是疊加的margin值，而是取最大者。
2.margin中的負值：
<html><head><style type="text/css">.left {margin-right: 30px;background-color: greenyellow;}.right {margin-left: -53px;/*設置為負數*/background-color: yellow;}</style></head><body><span class="left">行內元素1</span><span class="right">行內元素2</span></body> </html>以上代碼會形成“疊加現象”。效果：
如果.right { margin-left: 0px....}，則效果：
二、浮動定位：
1.float屬性：
在CSS中，通過float屬性實現元素的浮動。float屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過，在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
主要浮動形式：
| 值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 默認值，元素不浮動，顯示其在文本中出現的位置 |
| inherit | 規定應該從父元素繼承float屬性的值 |
在“盒子模型”項目實施過程中使用了盒子模型，如果在該模型中添加如下語句：
.box1{float:left;}結果是“Box-1"向左浮動，浮動的塊不能獨立占領一行，以適應寬度存在，居左對齊。其下一行”Box-2"受到浮動的影響向上移動，然后添加如下語句：
.box2{float:left;}結果是“Box-2"向左浮動，其下一行”Box-3"受到浮動的影響向上移動，最后再添加如下語句：
.box3{float:left;}該語句的作用是將盒子box3向左浮動，此時段落受到浮動的影響，向上移動，網頁顯示效果如下：
如果修改盒子的寬度屬性，將box1、box2、box3的每個寬度都設置為120px，它的顯示結果如下：
由于容器的寬度不足以在同一排容納3個盒子，并且盒子是浮動的，就會造成第3個盒子在下方顯示。所以，編寫代碼時要注意設置不同的相關屬性，如將容器變大或者將盒子調小。
2.clear屬性：
如果希望清除浮動對元素的影響，可以使用clear屬性。clear屬性有5個可能值：left、right、both、none、inherit。
clear:left可清除左浮動的影響；同樣，clear:right可清除右浮動的影響。
對于上圖中的頁面，做如下修改，清除左浮動對p元素的影響：
p {border:1px dashed black;background:pink;margin:10px;clear:left }項目實戰：3個相框
<html><head><meta charset="utf-8"><title> 三個相框</title><style>.outter {border: 1px solid black;background: grey;padding: 10px;width: 560px;height: 220px;margin:auto;}.box {border: 8px solid #333;background: #FFF;margin: 10px;padding: 10px;float: left;}</style></head><body><div class="outter"><div class="box"><img src="sea.jpg" width="130" height="170"></div><div class="box"><img src="bridge.jpg" width="130" height="170"></div><div class="box"><img src="tower.jpg" width="130" height="170"></div></div></body> </html>效果如下：
代碼結構詳解如下：
根據效果圖，可以得出：margin是負責留白的，padding是包含在background中的。
其實這和安卓布局是一模一樣的(就是沒有一個border的概念)，如下是對比：
<LinearLayoutandroid:layout_width="580px"android:layout_height="220px"android:padding="10px"android:background="@android/color:grey"android:orientation="horizontal"><TextViewandroid:layout_width="130px"android:layout_height="170px"android:layout_margin="10px"android:padding="10px"android:text="中國"android:background="#FFF"/> </LinearLayout>三、定位位置：
比起浮動定位，位置定位更加準確、具體、易控制。
1.position屬性：
position屬性可以使元素顯示在網頁中任意指定的位置上。在CSS布局中，position發揮著非常重要的作用，很多容器的定位是用position完成的。
position屬性的值及使用方法：
| 值 | 描述 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left、top、right、bottom屬性進行規定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過top、right、bottom、left屬性進行規定 |
| relative | 相對定位，對象不可重疊，可以通過top、right、bottom、left屬性在正常文檔中偏移位置 |
| static | 默認的屬性值，無特殊定位，對象遵循HTML定位規則。不能通過z-index進行層次分級 |
I.默認的屬性值：
無特殊定位，也就是該盒子按照標準流(包括浮動方式)進行布局。
II.絕對定位：
盒子的位置以及它的包含框為基準進行偏移。絕對定位(absolute)的框從標準流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他盒子就好像這個盒子不存在一樣。如：
.pos_abs{position:absolute;left:50px;top:80px; } 內容設置為： <img class="pos_abs" src="image/tower.jpg"> <p>通過絕對定位，元素可以放置到頁面上的任何位置</p>。應圖片位置與頁面頂部距離是80px，距頁面左側為50px，假如修改絕對定位的語句，將top:80px修改為top:10px，結果可能會出現圖片遮檔文字的情況。
III.相對定位：
使用相對定位(relative)的盒子的位置以標準流的排版方式為基礎，然后使盒子相對于它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。相對定位的原理是：如果對一個元素進行相對定位，首先它將出現在它所在的原始位置上，之后通過設置的水平或垂直位置將元素相對于它的原始起始點進行移動。另外，進行相對定位時，無論是否進行移動元素，都占據原來的空間。如：
#box_relative{position:relative;left:20px;top:30px; }相對定位顯示結果：
它的意思是，生成的盒子與原來盒子相比在其右下方：向右移動20px，向下移動30px。絕對定位和相對定位的區別是，絕對定位的坐標原點為上級元素的原點，而相對定位的坐標原點為定位偏移前的原點，與上級元素無關。一般情況下，絕對定位只用于需要精確控制內容的情況，因為絕對定位要求開發者將元素的位置精確到某一像素，而相對定位在內容如何定位上的不可預測性更大。所以，絕對定位更加精確，相對定位在屏幕大小改變時適應性更強。
IIII.固定定位：
它和絕對定位類似，只是以瀏覽器窗口為基準進行定位。固定定位(fixed)的容器不會隨著滾動條的拖動而變換位置。
例如，如下代碼為固定定位的運用，文本顯示于瀏覽器的一個固定位置。
.pos_fixed{position:fixed;left:50px;top:10px; } 內容設置為： <div class="pos_fixed">固定位置</div>項目實戰：照片墻
<html> <head> <meta charset="utf-8"> <title>照片墻</title> <style> .box{position:relative; top:50; left:200;} img{position:absolute;border:5px solid;border-image:url(pic/33.png) 5 round; padding:8px; margin:10px; } .candel{left:410;} .fire{left:200; top:120;} .sweet{left:105; top:270;} .food{left:515; top:283;} .turkey{left:395; top:375;} .fruit{left:200; top:375;} </style> </head> <body> <div class="box"><img class="candel" src="pic/蠟燭.gif" width="75" height="94" border="0" alt="該圖像無法顯示，請查看文件路徑"><img class="sweet" src="pic/甜點.jpg" width="70" height="73" border="0" alt="該圖像無法顯示，請查看文件路徑"><img class="fire" src="pic/爐火.jpg" width="289" height="226" border="0" alt="該圖像無法顯示，請查看文件路徑"><img class="food" src="pic/佳肴.gif" width="95" border="0" alt="該圖像無法顯示，請查看文件路徑"><img class="turkey" src="pic/火雞.gif" width="94" border="0" alt="該圖像無法顯示，請查看文件路徑"><img class="fruit" src="pic/水果.jpg" width="95" border="0" alt="該圖像無法顯示，請查看文件路徑"> </div> </body> </html>? ? ? ?其中相冊背景邊框圖pic/33.png：
布局草圖如下：（注：<img>是絕對定位(是absolute特性)，并且border="0"會覆蓋內聯樣式）
? ? ? ? ? ? ? ? ? ? ?<img>：
調式部分截圖：
?四、隱藏與顯示：
I.visiblility屬性：
visibility屬性控制著元素的顯示與隱藏。如果一個元素的visibility屬性設置為hidden，即表現為不可見的形式，但是元素不可見并不等于它不存在，它仍舊會占據頁面的部分位置，從而影響頁面的布局。
visibility的屬性值及用法說明：
| 屬性 | 描述 |
| visible | 默認值，設置元素為可見的 |
| hidden | 元素框被隱藏，但仍然占據部分頁面位置，仍然影響頁面的布局 |
| collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他元素上，就會呈現為hidden |
將圖片墻中的火雞圖片隱藏，語句格式如下：
.turkey {left:395;top:375;visibility:hidden; }因為圖片設置為hidden，所以無法顯示圖片，也無法顯示alt屬性指定的替換文本。
II.z-index屬性：
z-index屬性用于設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的上面。如：
img {position:absolute;left:0px;top:0px;z-index:-1; }該語句的作用是設置了元素的堆疊順序，由于z-index設置為-1，因此它在文本的后面出現，顯示效果如下：
III.display屬性：
display屬性用于定義建立布局時元素生成的顯示框類型。
<body><div>Box-1</div><div>Box-2</div><div>Box-3</div><span>Box-4</span><span>Box-5</span><span>Box-6</span><div>Box-7</div><span>Box-8</span> </body>效果：?
<body><div style="display: inline;">Box-1</div><div style="display: inline;">Box-2</div><div style="display: inline;">Box-3</div><span style="display: block">Box-4</span><span style="display: block">Box-5</span><span style="display: block">Box-6</span><div style="display: none">Box-7</div><span style="display: none">Box-8</span> </body>效果：
display常見屬性值及用法如下：
| 值 | 描述 |
| block | 此元素將顯示為塊級元素，此元素前后會帶有換行符 |
| inline | 此元素會被顯示為內聯元素，元素前后沒有換行符 |
| none | 此元素不會被顯示 |
上例中，div是塊級元素，它的display屬性默認值是block。例子中將div的display設置為inline，就能將多個div顯示成span的效果。
項目實戰：懸浮菜單
<html><head><title> 顯示與隱藏 </title><meta charset="utf-8"><style>li {list-style: none;border: 1px groove;position: relative;margin: 0;padding: 0;width: 185px;}#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 20px;left: 0;}/*下拉(注:'>'號可以去掉)*/#nav li:hover>ul {display: block;}</style></head><body><ul id="nav"><li>選項表<ul><li>項目一</li><li>項目二</li></ul></li></ul></body> </html>鼠標沒在“選項表”上時：?，鼠標指向“選項表”后：
項目實戰2：咖啡商城
項目設計說明：
（1）在設計階段就要對頁面的整體布局有全面的考慮，并逐步加以實現。
首先定義一個ID選擇符main，并依據頁面大小對該選擇符設置合適的寬度，之后將該寬度分割成左、中、右3塊。本項目中選擇左側塊放置全部商品名稱部分，同時使用浮動效果將3塊放置到同一排，最后使用clear清除浮動效果。
（2）合理使用盒子模型相關屬性。
為了使文字在頁面中有良好的交互效果，需要選擇使用合適的寬度，靈活使用盒子模型的相關屬性，并與文本、字體屬性配合使用。
<!doctype html> <html><head><meta charset="utf-8"><title>Insert title here</title><style type="text/css">#main {width: 1210px;margin: 0 auto;}/*設置總體寬度及邊距*/#main .left {float: left;width: 230px;}/*設置塊的寬度及向左浮動效果*/.assort_wrap {width: 762px;overflow: hidden;padding-bottom: 2px;}.module_common {padding: 5px;border-left: 2px solid #895707;border-bottom: 2px solid #895707;border-right: 2px solid #895707;overflow: hidden;margin-bottom: 10px;clear: both;}/*設置邊框屬性、邊距、及內容溢出時效果*/.assort_wrap {width: 210px;overflow: hidden;}/*設置寬度及內容溢出時會被修剪*/.assort_wrap dt {font-size: 14px;line-height: 20px;margin: 5px;}/*設置字號、行高、邊距*/.assort_wrap dt a {padding-left: 5px;line-height: 20px;font-weight: bold;color: #895707;text-decoration: none;}/*設置邊距、行高、字體粗細、顏色、修飾等屬性*/.assort_wrap dt a:hover {text-decoration: none;color: #f60;}/*設置鼠標指針懸浮時字體顏色改變*/.assort_wrap dd {width: 200px;line-height: 20px;overflow: hidden;color: #a6a6a6;word-spacing: 4px;padding: 0px;}.assort_wrap dd a {color: #444;text-decoration: none;}.assort_wrap dd a:hover {text-decoration: none;color: #f60;}</style></head><body><div id="main"><div class="left"><div class="module_common"><div class="assort_wrap"><h2>全部商品分類</h2><dl><!--注：dl與dt(data title)、dd(data data)配套使用--><dt><a href="">白咖啡</a></dt><dd><a href="">大馬白咖啡</a>| <a href="">白咖啡</a></dd></dl><dl><dt><a href="">咖啡</a></dt><dd><a href="">咖啡豆</a>| <a href="">咖啡生豆</a>| <a href="">有機咖啡</a>| <a href="">咖啡膠囊</a></dd></dl><dl><dt><a href="">咖啡器具</a></dt><dd><a href="">奶泡壺</a>| <a href="">壓粉器</a>| <a href="">磕粉盒</a>| <a href="">濾紙/濾器/濾布/濾杯</a>| <a href="">光波爐</a>| <a href="">其它</a></dd></dl><dl><dt><a href="">咖啡原料</a></dt><dd><a href="">咖啡粉</a>| <a href="">速溶咖啡</a>| <a href="">純咖啡粉</a></dd></dl><dl><dt><a href="">咖啡輔料</a></dt></dl><dl><dt><a href="">咖啡壺</a></dt><dd><a href="">虹吸壺</a>| <a href="">摩卡壺</a>| <a href="">法式壓壺</a>| <a href="">手沖咖啡壺</a>| <a href="">比利時咖啡壺</a>| <a href="">咖啡壺</a>| <a href="">冰滴壺</a>| <a href="">土耳其壺咖啡壺</a>| <a href="">越南滴漏壺</a>| <a href="">其它</a></dd></dl><dl><dt><a href="">咖啡研磨機</a></dt><dd><a href="">電動磨豆機</a>| <a href="">手動磨豆機</a></dd></dl><dl><dt><a href="">烘焙機</a></dt></dl><dl><dt><a href="">咖啡杯 / 杯類</a></dt></dl><dl><dt><a href="">咖啡機零件</a></dt><dd><a href="">咖啡機清潔粉</a></dd></dl><dl><dt><a href="">咖啡廳相關設備</a></dt></dl></div></div></div></div></body> </html>?
總結
以上是生活随笔為你收集整理的第5章-CSS盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lt；转载gt；游戏服务器开发都要学什么
- 下一篇： Nexus 5X 使用Zxing扫描倒立