第5章-CSS盒子模型
一、盒子相關(guān)屬性：
盒子模型是實現(xiàn)網(wǎng)頁布局的基礎(chǔ)，經(jīng)常會使用內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)等屬性。
I.內(nèi)邊距與外邊距：
1.外邊距：
邊距(margin)屬性，根據(jù)上、下、左、右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。
除了上述設(shè)置外，也可以設(shè)置水平位auto，這樣做會使盒子里面的水平位置自動居中。
?內(nèi)容設(shè)置為：<p class="margin">使用auto效果</p>。在瀏覽器中運行該代碼，結(jié)果顯示該段落位置為水平居中。
2.邊框?qū)傩?#xff1a;
邊框(border)有3個屬性：顏色(border-color)、粗細(border-width)、樣式(border-style)。
如：border-width: thin 10px thick medium <!-- 對盒子的邊框粗細進行設(shè)置 -->
對邊框的設(shè)置方法是：按照規(guī)定的順序給出1個、2個、3個、4個屬性值，它們含義將有所區(qū)別，具體如下：
（1）1個：4個邊框?qū)傩砸粯?#xff1b;
（2）2個：前者表示上下邊框?qū)傩?#xff0c;后者表示左右邊框?qū)傩?#xff1b;
（3）3個：前者表示上邊框?qū)傩?#xff0c;中間表示左右邊框?qū)傩?#xff0c;后者表示下邊框?qū)傩?#xff1b;
（4）4個：依次表示上、右、下、左邊框的屬性，即順時針排序。
3.內(nèi)邊距:
內(nèi)邊距(padding)屬性，也稱為填充屬性，設(shè)置的是內(nèi)容與邊框的距離。如：
p {width: 150px;height: 50px;background-color: pink;padding-left: 40px; }II.塊級元素與行內(nèi)元素：
大多數(shù)HTML元素都被定義為塊級元素(block)或行內(nèi)元素(inline)。
（1）塊級元素默認占一行，一行內(nèi)添加一個塊級元素后，一般無法再添加其他元素。如：div、p、h1~h6、ul、ol、table都是塊級元素。
（2）行內(nèi)元素會在一條直線上排列(默認寬度只與內(nèi)容有關(guān))，都是同一行的，水平方向排列。如：a、span、img都是行內(nèi)元素。
它們的區(qū)別如下：
塊級元素可以包含行內(nèi)元素和塊級元素。行內(nèi)元素不能包含塊級元素，只能包含文本或其他行內(nèi)元素。
塊級元素的寬高、行高以及外邊距內(nèi)邊距都是可控的。行內(nèi)元素設(shè)置width無效，height無效(可設(shè)置line-height)，?margin上下無效，padding上下無效。
它們的用法：
塊級元素dIv實際上就是一個容器，它把文檔分成獨立的、不同的部分，div還有一個最常用的用途是文檔布局。
行內(nèi)元素span用來組合文檔中的行內(nèi)元素，通過使用span標簽可以更好地管理行內(nèi)元素。如果不加樣式，span元素中的文本與其他文本不會有任何區(qū)別。如：<p><span style="font-style:italic;">注釋</span>span是行內(nèi)元素</p>。
1.塊級元素之間的豎直margin：
<div style="margin-bottom:50px;">塊元素1</div> <div style="margin-top:30px;">塊元素2</div>以上代碼會形成“塌陷現(xiàn)象”，即：最終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;/*設(shè)置為負數(shù)*/background-color: yellow;}</style></head><body><span class="left">行內(nèi)元素1</span><span class="right">行內(nèi)元素2</span></body> </html>以上代碼會形成“疊加現(xiàn)象”。效果：
如果.right { margin-left: 0px....}，則效果：
二、浮動定位：
1.float屬性：
在CSS中，通過float屬性實現(xiàn)元素的浮動。float屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過，在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
主要浮動形式：
| 值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 默認值，元素不浮動，顯示其在文本中出現(xiàn)的位置 |
| inherit | 規(guī)定應(yīng)該從父元素繼承float屬性的值 |
在“盒子模型”項目實施過程中使用了盒子模型，如果在該模型中添加如下語句：
.box1{float:left;}結(jié)果是“Box-1"向左浮動，浮動的塊不能獨立占領(lǐng)一行，以適應(yīng)寬度存在，居左對齊。其下一行”Box-2"受到浮動的影響向上移動，然后添加如下語句：
.box2{float:left;}結(jié)果是“Box-2"向左浮動，其下一行”Box-3"受到浮動的影響向上移動，最后再添加如下語句：
.box3{float:left;}該語句的作用是將盒子box3向左浮動，此時段落受到浮動的影響，向上移動，網(wǎng)頁顯示效果如下：
如果修改盒子的寬度屬性，將box1、box2、box3的每個寬度都設(shè)置為120px，它的顯示結(jié)果如下：
由于容器的寬度不足以在同一排容納3個盒子，并且盒子是浮動的，就會造成第3個盒子在下方顯示。所以，編寫代碼時要注意設(shè)置不同的相關(guān)屬性，如將容器變大或者將盒子調(diào)小。
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 }項目實戰(zhàn)：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>效果如下：
代碼結(jié)構(gòu)詳解如下：
根據(jù)效果圖，可以得出：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屬性可以使元素顯示在網(wǎng)頁中任意指定的位置上。在CSS布局中，position發(fā)揮著非常重要的作用，很多容器的定位是用position完成的。
position屬性的值及使用方法：
| 值 | 描述 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left、top、right、bottom屬性進行規(guī)定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過top、right、bottom、left屬性進行規(guī)定 |
| relative | 相對定位，對象不可重疊，可以通過top、right、bottom、left屬性在正常文檔中偏移位置 |
| static | 默認的屬性值，無特殊定位，對象遵循HTML定位規(guī)則。不能通過z-index進行層次分級 |
I.默認的屬性值：
無特殊定位，也就是該盒子按照標準流(包括浮動方式)進行布局。
II.絕對定位：
盒子的位置以及它的包含框為基準進行偏移。絕對定位(absolute)的框從標準流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他盒子就好像這個盒子不存在一樣。如：
.pos_abs{position:absolute;left:50px;top:80px; } 內(nèi)容設(shè)置為： <img class="pos_abs" src="image/tower.jpg"> <p>通過絕對定位，元素可以放置到頁面上的任何位置</p>。應(yīng)圖片位置與頁面頂部距離是80px，距頁面左側(cè)為50px，假如修改絕對定位的語句，將top:80px修改為top:10px，結(jié)果可能會出現(xiàn)圖片遮檔文字的情況。
III.相對定位：
使用相對定位(relative)的盒子的位置以標準流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。相對定位的原理是：如果對一個元素進行相對定位，首先它將出現(xiàn)在它所在的原始位置上，之后通過設(shè)置的水平或垂直位置將元素相對于它的原始起始點進行移動。另外，進行相對定位時，無論是否進行移動元素，都占據(jù)原來的空間。如：
#box_relative{position:relative;left:20px;top:30px; }相對定位顯示結(jié)果：
它的意思是，生成的盒子與原來盒子相比在其右下方：向右移動20px，向下移動30px。絕對定位和相對定位的區(qū)別是，絕對定位的坐標原點為上級元素的原點，而相對定位的坐標原點為定位偏移前的原點，與上級元素無關(guān)。一般情況下，絕對定位只用于需要精確控制內(nèi)容的情況，因為絕對定位要求開發(fā)者將元素的位置精確到某一像素，而相對定位在內(nèi)容如何定位上的不可預測性更大。所以，絕對定位更加精確，相對定位在屏幕大小改變時適應(yīng)性更強。
IIII.固定定位：
它和絕對定位類似，只是以瀏覽器窗口為基準進行定位。固定定位(fixed)的容器不會隨著滾動條的拖動而變換位置。
例如，如下代碼為固定定位的運用，文本顯示于瀏覽器的一個固定位置。
.pos_fixed{position:fixed;left:50px;top:10px; } 內(nèi)容設(shè)置為： <div class="pos_fixed">固定位置</div>項目實戰(zhàn)：照片墻
<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"會覆蓋內(nèi)聯(lián)樣式）
? ? ? ? ? ? ? ? ? ? ?<img>：
調(diào)式部分截圖：
?四、隱藏與顯示：
I.visiblility屬性：
visibility屬性控制著元素的顯示與隱藏。如果一個元素的visibility屬性設(shè)置為hidden，即表現(xiàn)為不可見的形式，但是元素不可見并不等于它不存在，它仍舊會占據(jù)頁面的部分位置，從而影響頁面的布局。
visibility的屬性值及用法說明：
| 屬性 | 描述 |
| visible | 默認值，設(shè)置元素為可見的 |
| hidden | 元素框被隱藏，但仍然占據(jù)部分頁面位置，仍然影響頁面的布局 |
| collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他元素上，就會呈現(xiàn)為hidden |
將圖片墻中的火雞圖片隱藏，語句格式如下：
.turkey {left:395;top:375;visibility:hidden; }因為圖片設(shè)置為hidden，所以無法顯示圖片，也無法顯示alt屬性指定的替換文本。
II.z-index屬性：
z-index屬性用于設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的上面。如：
img {position:absolute;left:0px;top:0px;z-index:-1; }該語句的作用是設(shè)置了元素的堆疊順序，由于z-index設(shè)置為-1，因此它在文本的后面出現(xiàn)，顯示效果如下：
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 | 此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符 |
| none | 此元素不會被顯示 |
上例中，div是塊級元素，它的display屬性默認值是block。例子中將div的display設(shè)置為inline，就能將多個div顯示成span的效果。
項目實戰(zhàn)：懸浮菜單
<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>鼠標沒在“選項表”上時：?，鼠標指向“選項表”后：
項目實戰(zhàn)2：咖啡商城
項目設(shè)計說明：
（1）在設(shè)計階段就要對頁面的整體布局有全面的考慮，并逐步加以實現(xiàn)。
首先定義一個ID選擇符main，并依據(jù)頁面大小對該選擇符設(shè)置合適的寬度，之后將該寬度分割成左、中、右3塊。本項目中選擇左側(cè)塊放置全部商品名稱部分，同時使用浮動效果將3塊放置到同一排，最后使用clear清除浮動效果。
（2）合理使用盒子模型相關(guān)屬性。
為了使文字在頁面中有良好的交互效果，需要選擇使用合適的寬度，靈活使用盒子模型的相關(guān)屬性，并與文本、字體屬性配合使用。
<!doctype html> <html><head><meta charset="utf-8"><title>Insert title here</title><style type="text/css">#main {width: 1210px;margin: 0 auto;}/*設(shè)置總體寬度及邊距*/#main .left {float: left;width: 230px;}/*設(shè)置塊的寬度及向左浮動效果*/.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;}/*設(shè)置邊框?qū)傩?、邊距、及?nèi)容溢出時效果*/.assort_wrap {width: 210px;overflow: hidden;}/*設(shè)置寬度及內(nèi)容溢出時會被修剪*/.assort_wrap dt {font-size: 14px;line-height: 20px;margin: 5px;}/*設(shè)置字號、行高、邊距*/.assort_wrap dt a {padding-left: 5px;line-height: 20px;font-weight: bold;color: #895707;text-decoration: none;}/*設(shè)置邊距、行高、字體粗細、顏色、修飾等屬性*/.assort_wrap dt a:hover {text-decoration: none;color: #f60;}/*設(shè)置鼠標指針懸浮時字體顏色改變*/.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="">咖啡廳相關(guān)設(shè)備</a></dt></dl></div></div></div></div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的第5章-CSS盒子模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lt；转载gt；游戏服务器开发都要学什么
- 下一篇： 【CSS】盒子模型、内边距、背景设置_0