成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Batkid / 618人閱讀

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

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

1. 屬性講解

content-box

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

border-box

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

計(jì)算公式：

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

2. 考慮盒子模型的margin

從上面可以知道，即時(shí)是border-box也是不計(jì)算margin，只是多余計(jì)算了border和padding。因?yàn)?code>border和padding都是盒子模型的一部分，但是margin標(biāo)記的是盒子和盒子的間距。所以，border-box的解釋很符合常理。

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

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

代碼：源碼下載




  
  
  
  yuanxin.me

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

3. 使用建議

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

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

4. 關(guān)于

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

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

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

相關(guān)文章

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

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

    icyfire 評論0 收藏0

  • CSS 搞事技巧：border+transparent

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

    nifhlheimr 評論0 收藏0

  • DOM盒模型

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

    djfml 評論0 收藏0

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

    摘要：協(xié)商緩存從緩存數(shù)據(jù)庫中取出緩存的標(biāo)識，然后向?yàn)g覽器發(fā)送請求驗(yàn)證請求的數(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)與布局

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

    GeekQiaQia 評論0 收藏0

發(fā)表評論

0條評論

Batkid

男|高級講師

TA的文章

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