HTML-CSS標(biāo)準(zhǔn)盒子模型布局 217

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

在網(wǎng)頁(yè)中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用的;CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周?chē)腍TML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實(shí)際內(nèi)容(content)四個(gè)屬性,所以布局時(shí)每個(gè)元素所占的總寬高是這4個(gè)屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

1.3Padding(內(nèi)邊距)清除內(nèi)容周?chē)膮^(qū)域,內(nèi)邊距是透明的

1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

標(biāo)準(zhǔn)盒子模型

寬度為100px的div

根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個(gè)寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁(yè)內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個(gè)塊的大小,位置等

DIV+CSS布局最重要的是靈活運(yùn)用float(浮動(dòng))屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動(dòng),其值為:1)left 2)right 3)both

d2向右浮動(dòng) float:right

因?yàn)閐iv是塊級(jí)元素,如果都沒(méi)有脫離文檔流div就會(huì)按照從上到下的順序放置

d2設(shè)置為右浮動(dòng)其他兩個(gè)div位置的變化:

1)d1沒(méi)有脫離文檔流會(huì)占據(jù)一行,所以d2只能浮動(dòng)到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動(dòng)填充到d2的位置

d1,d2全部設(shè)置為右浮動(dòng)

1)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):因?yàn)閏ss中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測(cè)試不再截圖

2)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):d3就會(huì)跑到上圖中d2的位置

3)如果3個(gè)div都設(shè)置左或右浮動(dòng),當(dāng)3個(gè)width加一起<=100%就會(huì)在第一行顯示(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清除左浮動(dòng),d3設(shè)置為右浮動(dòng)

當(dāng)d2清除了左浮動(dòng),d3設(shè)置為右浮動(dòng),就會(huì)如上圖所示;如果d2清除的是右浮動(dòng),d2就會(huì)在d1上面,d3就會(huì)定位在d1下面的右面,自己測(cè)試不再截圖

當(dāng)d2清除了左浮動(dòng),如果想要d2緊挨著d1(與d1在一行上),可以通過(guò)position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測(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布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁(yè)進(jìn)行布局

注意:瀏覽器的兼容性問(wèn)題,特別是使用IE內(nèi)核的瀏覽器對(duì)W3C的規(guī)范不怎么遵守

許多方法可以將HTML元素與CSS對(duì)齊，但是一起使用或單獨(dú)使用它們并不是那么容易。開(kāi)發(fā)人員所面臨的困難之一就是試圖將元素集中在頁(yè)面中間。

因此，在本文中，我將展示一些最常用的方法，即通過(guò)使用不同的CSS屬性在水平和垂直方向上居中圖像。

水平居中

讓我們開(kāi)始使用3個(gè)不同的CSS屬性將圖像水平居中。

文字對(duì)齊

使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級(jí)容器（例如<div>）內(nèi)時(shí)，此方法才有效：

Margin: Auto

使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨(dú)使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個(gè)其他屬性。

margin-auto屬性對(duì)內(nèi)聯(lián)級(jí)別的元素沒(méi)有任何影響。由于<img>標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級(jí)元素：

其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動(dòng)對(duì)齊，可以這樣解決問(wèn)題（除非我們給出100％的寬度）：

Display: Flex

將圖像水平居中的第三種方法是使用display：flex。同樣，我們對(duì)容器使用text-align屬性，它也會(huì)使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個(gè)稱(chēng)為justify-content的附加屬性。

justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會(huì)占用100％的空間，然后我們就無(wú)法對(duì)其進(jìn)行集中化。

垂直居中放置圖像

1、Display: Flex

對(duì)于垂直對(duì)齊，使用display：flex確實(shí)很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：

現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：

如果將align-items屬性與display：flex一起使用，就會(huì)將元素垂直放置。

2、位置：絕對(duì)和變換屬性

垂直對(duì)齊的另一種方法是一起使用position和transform屬性。這個(gè)有點(diǎn)復(fù)雜，所以讓我們一步一步地做。

步驟1：定義絕對(duì)位置

首先，我們將圖像的定位行為從靜態(tài)更改為絕對(duì)：

同樣，它應(yīng)該位于相對(duì)放置的容器內(nèi)，因此我們添加一個(gè)位置：相對(duì)于其容器的div。

步驟2：定義頂部和左側(cè)屬性

其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會(huì)將圖像的起點(diǎn)（左上角）移到容器的中心：

步驟3：定義變換屬性

在第二步的時(shí)候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負(fù)50％可以達(dá)到目的：

還可以使用其他方法進(jìn)行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁(yè)面中心對(duì)齊圖像。

多程序員朋友，在用CSS進(jìn)行邊距調(diào)整時(shí)，老分不清楚外邊距margin和內(nèi)邊距padding的區(qū)別，在我部門(mén)，就有兩個(gè)迷糊蟲(chóng)。于是我上網(wǎng)找了一幅圖，一副不可描述的圖(你可不要想歪了)，他們一看就完全明白了，現(xiàn)在分享給你。

12.1 內(nèi)外抉擇

在什么場(chǎng)景中使用padding，在什么場(chǎng)景中使用margin，這是一個(gè)學(xué)問(wèn)。你掌握了，學(xué)問(wèn)就有了。

這是用padding的學(xué)問(wèn)

（1）需要在border內(nèi)側(cè)添加空白，在文字與邊框留有距離時(shí)；

（2）空白處需要背景色時(shí)；

（3）上下相連的兩個(gè)盒子之間的空白希望等于兩者之和時(shí)，比如15px+20px的padding，將得到35px的空白。

這是用margin的學(xué)問(wèn)

（1）需要在border外側(cè)添加空白時(shí);

（2）空白處不需要有背景色時(shí);

(3）上下相連的兩個(gè)盒子之間的空白需要相互抵消時(shí)，比如15px+20px的margin，將得到20px的空白。

12.2 內(nèi)外有別

在CSS中，通過(guò)外邊距margin屬性，可設(shè)置元素周?chē)目臻g。可用margin統(tǒng)一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見(jiàn)的。padding和margin的作用不同，但用法是一樣的。為了區(qū)分效果，我只在一個(gè)div中用了padding，通過(guò)比較，一目了然。

在CSS表文件ys2.css中的代碼

/*單獨(dú)指定一個(gè)邊距*/
.one-margin {
    margin-left: 100px;
}

/*4個(gè)邊距*/
.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一個(gè)值：4個(gè)邊距;<br/>
        margin兩個(gè)值：上下邊距、左右邊距;<br/>
        margin三個(gè)值：上邊距、左右邊距、下邊距;<br/>
        margin四個(gè)值：上邊距、右邊距、下邊距、左邊距。
    </div>
    <div class="use-padding">
        padding一個(gè)值：4個(gè)邊距;<br/>
        padding兩個(gè)值：上下邊距、左右邊距;<br/>
        padding三個(gè)值：上邊距、左右邊距、下邊距;<br/>
        padding四個(gè)值：上邊距、右邊距、下邊距、左邊距。<br/>
        為了區(qū)分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

輸出結(jié)果

好了，有關(guān)CSS邊距的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：「玩轉(zhuǎn)前端」如何創(chuàng)建完美的HTML郵件
下一篇：webgl實(shí)現(xiàn)的動(dòng)態(tài)3d卡片背景特效html頁(yè)面源碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商