整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
端面試題中經(jīng)常會出現(xiàn)這個問題，接下來，小郭就帶你揭秘幾種最常見的答案。
關(guān)注我！了解更多前端干貨！
先設(shè)定一個html結(jié)構(gòu)以及css的基本樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何讓div實現(xiàn)水平居中</title>
</head>
<body>
<div id="dad">
<div id="son"></div>
</div>
</body>
</html>css樣式
#dad{
width: 400px;
height: 200px;
border: 3px solid green;
margin: 30px auto;
}
#son{
width: 100px;
height: 100px;
background: purple;
}方法一：純margin
/*css處添加下面代碼*/
#son{
margin:0 auto;
}方法二：position定位
/*css處添加下面代碼*/
#dad{
position: relative;
}
#son{
position: absolute;
left:50%;
margin-left:-50px;
}
/*注意：margin-left是負(fù)值，是#son這個div寬的一半*/?方法三：flexbox
/*css處添加下面代碼*/
#dad{
display: flex;
justify-content: center;
}
/*注意：彈性盒子的大部分屬性都是寫在父級上的*/以上三種是最常見的，下期我們來講講其他奇形怪狀的方法～
關(guān)注我，帶你了解更多前端干貨！
學(xué)前端，就選銳盈課堂！
為Web開發(fā)人員，最常見的事情之一就是更改HTML元素的背景顏色。但是，如果您不了解如何使用CSS background-color屬性，可能會產(chǎn)生混淆。在本文中，我們討論以下幾點
1.HTML元素的默認(rèn)背景色值
2.如何更改div的背景顏色，這是非常常見的元素
3.該background-color屬性會影響CSS盒子模型的哪些部分，以及
4.此屬性可以采用的不同值。
div的默認(rèn)背景顏色是transparent。因此，如果您不指定div的背景色，它將顯示其父元素的背景色。
在此示例中，我們將更改以下div的背景顏色。
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>沒有任何樣式，它將在視覺上轉(zhuǎn)換為以下內(nèi)容。
讓我們通過向類中添加樣式來更改div的背景顏色。您可以通過嘗試HTML文件中的示例進行操作。
<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
</body>這將導(dǎo)致以下結(jié)果：
看！我們已成功更改了該div的背景顏色。接下來，讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。
根據(jù)CSS框模型，所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成，如下圖所示。
如果您不熟悉Box模型，則可以查閱相關(guān)資料。問題是，當(dāng)您更改div的背景顏色時，Box模型的哪一部分會受到影響？簡單的答案是填充區(qū)域和內(nèi)容區(qū)域。讓我們通過一個例子來確認(rèn)這一點。
<style>
body {
background-color: #ABBAEA;
}
div {
height: 200px;
margin: 20px;
border: 5px solid;
background-color: #FBD603;
}
</style>
<body>
<div>
<p>This is the parent div which contains the div we are testing</p>
<div>
<p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
</div>
</div>
</body>這將導(dǎo)致：
從上面的示例中，我們可以看到空白區(qū)域和邊框區(qū)域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區(qū)域保持透明，并反映父容器的背景色。
最后，讓我們討論background-color屬性可以采用的值。
就像color屬性一樣，background-color屬性可以采用六個不同的值。讓我們通過一個示例考慮三個最常見的值。在示例中，我們將div的背景色設(shè)置為具有不同值的紅色。
<style>
/* Keyword value/name of color */
.div-1 {
background-color: red;
}
/* Hexadecimal value */
.div-2 {
background-color: #FF0000;
}
/* RGB value */
.div-3 {
background-color: rgb(255,0,0);
}
</style>
<body>
<div class="div-1">
<p>The background property can take six different values.</p>
</div>
<div class="div-2">
<p>The background property can take six different values.</p>
</div>
<div class="div-3">
<p>The background property can take six different values.</p>
</div>
</body>注意，它們的結(jié)果都是相同的背景色。
該background-color屬性可以采用的其他值包括HSL值，特殊關(guān)鍵字值和全局值。這是每個例子。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;設(shè)置元素的背景色時，重要的是要確保背景色和其包含的文本顏色的對比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。
第一個div的背景顏色與文本顏色之間的對比度不夠高，每個人都看不到。因此，除非您是唯一正在使用的網(wǎng)站，并且您的視力非常好，否則應(yīng)避免這種顏色組合。
第二個div在背景顏色和文本顏色之間具有更好的對比度。因此，它使人們更容易閱讀和閱讀。
在本文中，我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后，我們討論了background-color屬性可以采用的值。
希望本文對您有所幫助。謝謝閱讀。
近幾年，前端經(jīng)歷了飛速發(fā)展，每隔幾個月，就有新的技術(shù)框架產(chǎn)生，如果你有1年多沒有接觸過它，那么再上手的時候，你一定會對它感到陌生，似乎一不留神，自己就已經(jīng)被無情拋棄了。
面對著js框架的飛速發(fā)展，得益于babel技術(shù)，瀏覽器可以很快地使用新的框架技術(shù)，vue，angular，react似乎也已經(jīng)統(tǒng)治了好久好久。
而作為前端三劍客的css呢?似乎css3已經(jīng)是很久很久的事情了，久到了我們不知道它是否還在更新，css是否還有新的技術(shù)產(chǎn)生。
雖然各種scss，stylus，less預(yù)處理器提高了我們代碼的開發(fā)和維護，但是css依然缺少一個一擊致命，一劍封喉的技術(shù)。
慶幸的是，我們等到了grid的到來，它的到來宣布了css布局從此進入了grid時代。
早期的網(wǎng)頁布局是采用table的，也就是所有的內(nèi)容都會放到table里面，如果想要內(nèi)嵌布局，就會采用table嵌套table，那個時候可以說布局很簡單，因為就是使用table，但是table過于繁瑣，因此也產(chǎn)生了大量無用的代碼。
css浮動的出現(xiàn)，徹底解放了網(wǎng)頁布局，目前主流的網(wǎng)頁采用的都是div+css的布局，這種布局簡化了代碼結(jié)構(gòu)，通過使用css來定位元素位置，可以說這種布局極大程度上網(wǎng)站的開發(fā)效率，同時網(wǎng)頁的可維護性也得到大大提高。
首先我們看下grid的支持情況，從下面的圖片可以看到，主流瀏覽器都是支持的，特別是在最新版的ie也采用和chrome一樣的內(nèi)核之后，可以說現(xiàn)在前端開發(fā)終于迎來了最幸福的時刻。
這是一個非常棒的布局解決方案。自從網(wǎng)絡(luò)誕生以來，我們就一直在努力設(shè)計我們的網(wǎng)站，強迫他們?nèi)ミm應(yīng)和使用那些不適合他們的方式。
不過網(wǎng)格布局的出現(xiàn)，直接從瀏覽器解決了我們布局的復(fù)雜性，我們不再需要復(fù)雜的css來生成網(wǎng)格布局，不需要使用bootstrap這樣的網(wǎng)格框架來布局，我們可以使用簡單的grid布局來完成。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
