網(wǎng)頁上只有三個(gè)水平并列大小相同的的DIV，大小為300p*200,如何使用CSS讓它們整體水平和垂直都居中，并使用不同的背景色？
一、html
要在網(wǎng)頁上實(shí)現(xiàn)三個(gè)水平并列且大小相同的div元素，每個(gè)尺寸為300像素寬和200像素高，整體居中顯示且具有不同的背景顏色，你可以通過以下CSS來完成：
假設(shè)HTML結(jié)構(gòu)如下：
Html
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
二、css
相應(yīng)的CSS樣式應(yīng)為：
Css
/* 確保body或容器父元素填充整個(gè)視口 */
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
/* 設(shè)置一個(gè)合適的最大寬度，保證在任何分辨率下都能水平居中 */
max-width: 900px;
display: flex;
justify-content: space-between; /* 使盒子之間等距分布 */
align-items: center; /* 垂直居中對齊 */
width: calc(3 * (300px + gap)); /* 包括div與div之間的間距 */
gap: 10px; /* 自定義盒子之間的間距 */
}
.box {
width: 300px;
height: 200px;
}
.box1 {
background-color: #ff0000; /* 不同的背景色 */
}
.box2 {
background-color: #00ff00;
}
.box3 {
background-color: #0000ff;
}
這樣，.container會(huì)確保內(nèi)部的.box元素水平居中，同時(shí)它們自身也會(huì)因?yàn)閍lign-items: center;而垂直居中。每個(gè).box子元素都有指定的寬度和高度，并且設(shè)置了不同的背景顏色。如果需要調(diào)整盒子間的間距，可以修改gap屬性的值。文章來源：http://www.zghlxwxcb.cn/news/detail-806672.html
小結(jié)
由于多種設(shè)計(jì)因素交織，必須實(shí)際試過才知道哪一種是有效的，還有在軟件開發(fā)過程，系統(tǒng)的各個(gè)因素也是互相交織著的，比如你要高度代碼，就涉及到權(quán)限，有些權(quán)限在操作系統(tǒng)中不是很直觀，或者涉及到多個(gè)層次，初學(xué)者遇到問題要勇于思考、勤于動(dòng)手、有問題可以到網(wǎng)上查詢解決方法，根據(jù)需要擴(kuò)展知識面，如網(wǎng)絡(luò)、操作系統(tǒng)、安全等方面的知識。文章來源地址http://www.zghlxwxcb.cn/news/detail-806672.html
到了這里，關(guān)于編程筆記 html5&css&js 039 CSS背景示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
