整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)
在網(wǎng)頁中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語是用來設(shè)計和布局時使用的;CSS盒模型本質(zhì)上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實際內(nèi)容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的
1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框
1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的
1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等
標(biāo)準(zhǔn)盒子模型
寬度為100px的div
根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px
2)DIV+CSS布局
Div+CSS布局就是將網(wǎng)頁內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個塊的大小,位置等
DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both
clear屬性作用是清除浮動,其值為:1)left 2)right 3)both
d2向右浮動 float:right
因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置
d2設(shè)置為右浮動其他兩個div位置的變化:
1)d1沒有脫離文檔流會占據(jù)一行,所以d2只能浮動到d1下面的右面如上圖所示
2)d2脫離文檔流,d3自動填充到d2的位置
d1,d2全部設(shè)置為右浮動
1)當(dāng)d1,d2都設(shè)置為右浮動時:因為css中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測試不再截圖
2)當(dāng)d1,d2都設(shè)置為右浮動時:d3就會跑到上圖中d2的位置
3)如果3個div都設(shè)置左或右浮動,當(dāng)3個width加一起<=100%就會在第一行顯示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮動,d3設(shè)置為右浮動
當(dāng)d2清除了左浮動,d3設(shè)置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖
當(dāng)d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測試
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網(wǎng)頁進行布局
注意:瀏覽器的兼容性問題,特別是使用IE內(nèi)核的瀏覽器對W3C的規(guī)范不怎么遵守
許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發(fā)人員所面臨的困難之一就是試圖將元素集中在頁面中間。
因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開始使用3個不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級容器（例如<div>）內(nèi)時，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。
margin-auto屬性對內(nèi)聯(lián)級別的元素沒有任何影響。由于<img>標(biāo)簽是一個內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進行集中化。
1、Display: Flex
對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。
2、位置：絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復(fù)雜，所以讓我們一步一步地做。
步驟1：定義絕對位置
首先，我們將圖像的定位行為從靜態(tài)更改為絕對：
同樣，它應(yīng)該位于相對放置的容器內(nèi)，因此我們添加一個位置：相對于其容器的div。
步驟2：定義頂部和左側(cè)屬性
其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會將圖像的起點（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負(fù)50％可以達到目的：
還可以使用其他方法進行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
多程序員朋友，在用CSS進行邊距調(diào)整時，老分不清楚外邊距margin和內(nèi)邊距padding的區(qū)別，在我部門，就有兩個迷糊蟲。于是我上網(wǎng)找了一幅圖，一副不可描述的圖(你可不要想歪了)，他們一看就完全明白了，現(xiàn)在分享給你。
在什么場景中使用padding，在什么場景中使用margin，這是一個學(xué)問。你掌握了，學(xué)問就有了。
這是用padding的學(xué)問
（1）需要在border內(nèi)側(cè)添加空白，在文字與邊框留有距離時；
（2）空白處需要背景色時；
（3）上下相連的兩個盒子之間的空白希望等于兩者之和時，比如15px+20px的padding，將得到35px的空白。
這是用margin的學(xué)問
（1）需要在border外側(cè)添加空白時;
（2）空白處不需要有背景色時;
(3）上下相連的兩個盒子之間的空白需要相互抵消時，比如15px+20px的margin，將得到20px的空白。
在CSS中，通過外邊距margin屬性，可設(shè)置元素周圍的空間。可用margin統(tǒng)一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見的。padding和margin的作用不同，但用法是一樣的。為了區(qū)分效果，我只在一個div中用了padding，通過比較，一目了然。
在CSS表文件ys2.css中的代碼
/*單獨指定一個邊距*/
.one-margin {
margin-left: 100px;
}
/*4個邊距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代碼
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一個值：4個邊距;<br/>
margin兩個值：上下邊距、左右邊距;<br/>
margin三個值：上邊距、左右邊距、下邊距;<br/>
margin四個值：上邊距、右邊距、下邊距、左邊距。
</div>
<div class="use-padding">
padding一個值：4個邊距;<br/>
padding兩個值：上下邊距、左右邊距;<br/>
padding三個值：上邊距、左右邊距、下邊距;<br/>
padding四個值：上邊距、右邊距、下邊距、左邊距。<br/>
為了區(qū)分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>輸出結(jié)果
好了，有關(guān)CSS邊距的內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。
一個當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。
#前端##HTML5##CSS##程序員##Web#
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
