成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 盒模型篇

Jrain / 2632人閱讀

摘要：瀏覽器渲染引擎通過盒模型的方式來(lái)布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過屬性來(lái)設(shè)置。

瀏覽器渲染引擎通過盒模型的方式來(lái)布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長(zhǎng)和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁(yè)。

Margin，Border，Padding

每一個(gè)盒子都會(huì)有margin，border和padding屬性。我們可以通過CSS來(lái)指定這三個(gè)屬性的大小。例如：

.box {
  margin: 40px;
  padding: 20px;
  border: black 2px solid;
  text-align: center
}

  

    box
  

  

    box
  

  

    box

box class被應(yīng)用后的樣式如下：

margin 應(yīng)用后元素與元素之間產(chǎn)生了相應(yīng)的空間。

border 應(yīng)用后元素的外邊框增加了寬度。

padding 應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。

我們同樣可以通過Chrome的Developer Tools來(lái)驗(yàn)證相應(yīng)的屬性。上面的代碼在Developer Tools中的計(jì)算結(jié)果如下：

上栗中，我們將盒子四個(gè)方向的margin都設(shè)置成了40px。我們還可以只修改上下左右中的其中一個(gè)或幾個(gè)。

/* 具體指定上右下左的margin */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 以簡(jiǎn)寫的方式指定margin，依次為上，右，下，左 */
.box {
  margin: 10px 20px 30px 40px;
}

/* 以簡(jiǎn)寫的方式指定margin，依次為上下，左右 */
.box {
  margin: 10px 20px;
}

padding設(shè)置的語(yǔ)法與margin相同，這里就不列出了。border的設(shè)置比較特殊，有機(jī)會(huì)會(huì)找專門一個(gè)章節(jié)來(lái)介紹。

這里還有一個(gè)小技巧，就是如果想將一個(gè)元素水平居中，可以將它的margin-left和margin-right屬性設(shè)置成auto。即左右兩邊的margin根據(jù)當(dāng)前窗口寬度自動(dòng)調(diào)節(jié)到合適大小。

Margin 塌陷

下面這塊代碼中，盒模型的計(jì)算結(jié)果和我們預(yù)期的不太一樣：

.box1 {
  margin-bottom: 30px;
  border: black 2px solid;
  text-align: center
}

.box2 {
  margin-top: 60px;
  border: black 2px solid;
  text-align: center
}

  

    box 1
  

  

    box 2

如果按照前面的解釋，box1和box2這間的空間應(yīng)該是30px + 60px = 90px，但實(shí)際上只有60px。原因是瀏覽器渲染元素時(shí)，垂直方向相鄰的元素margin值只會(huì)取設(shè)置的較大的那個(gè)值。這就是Margin Collapsing。在上栗中，最后計(jì)算結(jié)果是60px。通過Chrome的工具，我們可以驗(yàn)證，如下圖：

橘黃色部分為兩個(gè)盒元素的margin區(qū)域。圖例中可以看出margin的高度不是兩個(gè)元素marign相加，而是取較大的那個(gè)。

block元素和inline元素

html元素中，有一些元素是block元素，即元素的寬度會(huì)占滿整個(gè)窗口的寬度，例如div。還有一些是inline元素，即元素的寬度是根據(jù)自己內(nèi)容需要計(jì)算出來(lái)的寬度，且會(huì)緊貼在前一個(gè)inline元素的后面，例如span。


  

    我是block
  

  
    我是inline
  
  
    我是inline
  
  

    我是block

我們可以通過display屬性還改變?cè)氐哪J(rèn)顯示屬性。例如想將一個(gè)span以block形式展現(xiàn)，只需將其設(shè)置成display: block;

還有一點(diǎn)需要注意的是，以inline形式展現(xiàn)的元素，是不受上下margin屬性控制的，如果想給一個(gè)inline元素設(shè)置margin-top和margin-bottom則需要將display設(shè)置成inline-block.


  我是inline


  我是inline

上下margin不起作用
.inline {
  margin: 20px;
  border: red 1px solid;
}

上下margin起作用
.inline {
  margin: 20px;
  border: red 1px solid;
  display: inline-block;
}

盒模型長(zhǎng)度和寬度的計(jì)算

盒模型的長(zhǎng)度可以通過width屬性還設(shè)置，例如width: 200px。我們來(lái)看一個(gè)例子：

.box {
  margin: 10px auto;
  padding: 10px;
  border: red 1px solid;
  text-align: center;
  width: 200px;
}

  box

我們?cè)O(shè)置了元素寬度是200px，但通過Developer Tools查看到最后的結(jié)果是222px。原因是瀏覽器渲染引擎默認(rèn)理解width屬性是內(nèi)容加上padding的寬度，整個(gè)元素寬度還要加上border和margin，即200px + 2 * 10px (margin) + 2 * 1px (border) = 222px。

這種對(duì)width屬性的處理很多時(shí)候會(huì)帶來(lái)一些不便，因?yàn)槲覀儫o(wú)法準(zhǔn)確的知道最后的元素到底有多寬。要解決這個(gè)問題，可以通過設(shè)置box-sizing: border-box;，這樣元素最后整體寬度就是我們?cè)O(shè)置的寬度了。如下圖：

我們?cè)谝靡恍〤SS框架時(shí)，大多數(shù)框架都會(huì)將所有元素的box-sizing設(shè)置成border-box。有興趣的同學(xué)可以看看Bootstrap等框架的源碼。

* {
  box-sizing: border-box;
}

關(guān)于盒模型的高度，可以通過height屬性來(lái)設(shè)置。而如何將設(shè)置垂直居中，還是建議使用flex-box來(lái)實(shí)現(xiàn)，網(wǎng)上關(guān)于flex-box的資料很多，有興趣的話可以去看看。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116703.html

相關(guān)文章

  • 關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 盒模型篇

    摘要：瀏覽器渲染引擎通過盒模型的方式來(lái)布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過屬性來(lái)設(shè)置。 瀏覽器渲染引擎通過盒模型的方式來(lái)布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長(zhǎng)和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁(yè)。 Margi...

    OnlyLing 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來(lái)解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來(lái)是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語(yǔ)法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

    chanthuang 評(píng)論0 收藏0

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來(lái)解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來(lái)是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語(yǔ)法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

    elina 評(píng)論0 收藏0

  • HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

    摘要：內(nèi)容簡(jiǎn)述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。 內(nèi)容簡(jiǎn)述 關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。大家肯定聽過CSS奇淫技巧吧，關(guān)于這個(gè)我還沒有去深入了解，只是說普通的效果啥的，我...

    Salamander 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<