輕松學(xué)：網(wǎng)頁設(shè)計12-網(wǎng)頁布局盒子模型布局
時間：2023-08-28 20:42:01 | 來源：網(wǎng)站運營
時間：2023-08-28 20:42:01 來源：網(wǎng)站運營
輕松學(xué)：網(wǎng)頁設(shè)計12-網(wǎng)頁布局盒子模型布局：一個“盒子”由寬度和高度組成，盒子在瀏覽器中的擺放位置稱為布局。
寬度：盒子設(shè)置其寬度為100%，這樣寬度就會隨著瀏覽器的寬度調(diào)整進(jìn)行自動適應(yīng)。
高度：高度是無法通過設(shè)置百分比來進(jìn)行自適應(yīng)，如果div中有內(nèi)容，高度才會自適應(yīng)內(nèi)容的高度。如果想讓一個元素（盒子）的百分比高度height：100%起作用，則需要給這個元素的所有父元素的高度設(shè)定一個有效值。
1.盒子水平居中使用屬性text-align：center可以設(shè)置容器中的內(nèi)容（包括表格）水平居中。如果容器中放置的子元素仍然還是一個容器，那么單純地設(shè)置text-align：center是不會生效的，text-align：left或right亦然。
如果也需要水平居中對齊，就需要在div的外面再套一個更大的div容器，讓外面的div容器通過設(shè)置邊距margin: 0 auto;實現(xiàn)水平居中即可。
2.盒子內(nèi)容垂直居中表格中的內(nèi)容默認(rèn)都是垂直居中的，通常情況下，很多排版布局都希望讓內(nèi)容垂直居中，這樣就會更加美觀協(xié)調(diào)。
line-height屬性：
line-height實現(xiàn)內(nèi)容的垂直居中，line-height只能實現(xiàn)使有一行高度的內(nèi)容垂直居中。且需line-height的值與盒子內(nèi)高度height的值完全相同。
<head> <meta charset="utf-8"> <title>盒子的寬度</title> <style> #divouter1{width:100%; /*寬度100%，填充整個屏幕*/ height:200px; border:2px solid red; /*邊框*/ line-height: 200px; /*內(nèi)容高度*/ text-align: center; /*內(nèi)容水平居中*/ </style></head><body> <div id="divouter1">歡迎學(xué)習(xí)div垂直居中的知識點</div></body>3.盒子內(nèi)容垂直居中那么有什么方法能讓兩行或多行內(nèi)容能夠垂直居中呢？表格中的單元格默認(rèn)就是垂直居中的，可以利用div來模擬一個單元格的屬性display:table-cell。
display:table-cell
模擬一個單元格的屬display:table-cell使盒子中的內(nèi)容作為一個表格單元格顯示（類似 <td> 和 <th>），并利用vertical-align實現(xiàn)內(nèi)容垂直居中后，但對div單純設(shè)置寬度為100%將會失效，可以利用css的另外一個屬性min-width：500px表示單元格的最小寬度。
4.盒子垂直居中使用 css 實現(xiàn)水平居中很容易，但要實現(xiàn)盒子垂直居中并不容易，W3C提出了一種新的方案--Flex布局。Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，任何一個容器都可以指定為Flex布局,采用Flex布局的元素，被稱為Flex容器(flex container)，簡稱“容器”，其所有子元素自動成為容器成員。
display:flex; /*將對象作為彈性伸縮盒顯示*/
justify-content:space-around;/*center:水平居中,
align-items:stretch;/*center:垂直居中
.box{height:300px;width: 100%;display:flex; /*將對象作為彈性伸縮盒顯示*/justify-content:center; /*水平居中*/align-items:center; /*垂直居中*/ /* 只要三句話就可以實現(xiàn)不定寬高水平垂直居中。 */}5.內(nèi)容溢出在使用div盒子頁面布局時都會設(shè)置其高度，但這樣也可能會導(dǎo)致div的內(nèi)容超出了其div設(shè)置的高度，可以使用overflow屬性來對其進(jìn)行處理。
overflow: hidden; /*設(shè)置超出部分內(nèi)容自動隱藏*/
關(guān)鍵詞：布局,盒子,模型,設(shè)計
在線咨詢
