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

資訊專欄INFORMATION COLUMN

border-sizing屬性詳解和應(yīng)用

Batkid / 664人閱讀

摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據(jù)項目中的使用經(jīng)驗和的建議，推薦將屬性設(shè)置為。個人網(wǎng)站原文鏈接屬性詳解和應(yīng)用

box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現(xiàn)形式，不再冗贅。

1. 屬性講解

content-box

默認值，也是css2.1中的盒子模型。在計算width和height時候，不計算border、padding和margin。高度、寬度都只是內(nèi)容高度。

border-box

css3新增。 width和height屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。

計算公式：

  1. width = width = border + padding + 內(nèi)容寬度
  2. height = border + padding + 內(nèi)容高度

2. 考慮盒子模型的margin

從上面可以知道，即時是border-box也是不計算margin，只是多余計算了border和padding。因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以，border-box的解釋很符合常理。

問題來了，如果有時候一定要設(shè)置margin，怎么做到自由控制來保證兼容？例如，我們下面要設(shè)置一個撐滿頁面的盒子元素，而且有外邊距干擾，怎么做？

實現(xiàn)如下效果圖：

代碼：源碼下載




  
  
  
  yuanxin.me

所以，當(dāng)需要計算外邊距(margin)，可以配合css3中的四則運算（calc）來使用。

3. 使用建議

根據(jù)項目中的使用經(jīng)驗和w3c的建議，推薦將box-sizing屬性設(shè)置為border-box。

* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

4. 關(guān)于

歡迎技術(shù)交流，引用請注明出處。
個人網(wǎng)站：godbmw.com
原文鏈接：border-sizing屬性詳解和應(yīng)用

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

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

相關(guān)文章

  • 我理解的css盒模型以及使用場景

    摘要：在中我們可以通過設(shè)置的屬性來完成標準或者怪異模式之間的切換。設(shè)為之后，和的厚度可以隨意調(diào)，并不會溢出父元素。 - css盒模型是什么網(wǎng)頁設(shè)計中css技術(shù)所使用的一種思維模型 - 盒模型的組成 showImg(https://segmentfault.com/img/bVboot5?w=736&h=388); - 盒模型的兩種標準（在不考慮css3的情況下） showImg(https:...

    icyfire 評論0 收藏0

  • CSS 搞事技巧：border+transparent

    摘要：默認盒模型的正方形在上方已經(jīng)說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內(nèi)樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵 介紹 出門忘帶電源線，快遞到了終于可以繼續(xù)水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當(dāng)時處于懵逼狀態(tài)，錯過了大好的機會： 面試官：巴拉巴拉吧…… 我：嗯，啊，這個，...

    nifhlheimr 評論0 收藏0

  • DOM盒模型

    摘要：中的盒模型傳統(tǒng)盒模型在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內(nèi)容的寬度和高度。在這個基礎(chǔ)上我們在修改或者塊元素的寬度講不會發(fā)生變化。 showImg(https://segmentfault.com/img/bVbnygm?w=320&h=292); CSS中的盒模型 傳統(tǒng)盒模型 在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內(nèi)容的寬度和高度。 而一個塊元素的寬度是 ...

    djfml 評論0 收藏0

  • 刷前端面經(jīng)筆記（一）

    摘要：協(xié)商緩存從緩存數(shù)據(jù)庫中取出緩存的標識，然后向瀏覽器發(fā)送請求驗證請求的數(shù)據(jù)是否已經(jīng)更新，如果已更新則返回新的數(shù)據(jù)，若未更新則使用緩存數(shù)據(jù)庫中的緩存數(shù)據(jù)。 1.CSS的盒子模型 包含元素內(nèi)容content、內(nèi)邊距padding、邊框border、外邊距marginbox-sizing:border-box;content-box;inherit;1) content-box:總寬度=mar...

    劉德剛 評論0 收藏0

  • css的結(jié)構(gòu)與布局

    摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時，等于，否則等于。基于的方法這種應(yīng)該算是最佳的解決辦法實現(xiàn)方法當(dāng)使用布局時，使用在水平和垂直方向都會居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個height值時，元素會自適應(yīng)其內(nèi)部的元素高度，有時我們想讓元素的寬度也達到此效果，應(yīng)用場景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...

    GeekQiaQia 評論0 收藏0

發(fā)表評論

0條評論

Batkid

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<