国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 盒模型與box-sizing

番茄西紅柿 / 801人閱讀

摘要：一盒模型一個(gè)頁面由許多元素組成，而每一個(gè)元素都可以表示為一個(gè)矩形的盒子，盒模型正是描述這些矩形盒子的存在。外邊距區(qū)域用空白區(qū)域擴(kuò)展邊框區(qū)域，以分開相鄰的元素。的開源框架就全局設(shè)置了，由此可見盒模型的是比較受歡迎的。

一、盒模型

一個(gè)web頁面由許多html元素組成，而每一個(gè)html元素都可以表示為一個(gè)矩形的盒子，CSS盒模型正是描述這些矩形盒子的存在。

MDN的描述：

When laying out a document, the browsers rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

CSS盒模型有四條邊：外邊距邊、邊框邊、內(nèi)填充邊、內(nèi)容邊（Content edge、Padding edge、Border edge和Margin edge），四條邊由內(nèi)到外把它劃分為四個(gè)區(qū)域：內(nèi)容區(qū)域、內(nèi)邊距區(qū)域、邊框區(qū)域、外邊距區(qū)域（Content area、Padding area、Border area和Margin area）。

  • 內(nèi)容區(qū)域（content area ）是包含元素真實(shí)內(nèi)容的區(qū)域。
  • 內(nèi)邊距區(qū)域（padding area） 延伸到包圍padding的邊框。如果content area設(shè)置了背景、顏色或者圖片，這些樣式將會(huì)延伸到padding上。
  • 邊框區(qū)域（border area ）是包含邊框的區(qū)域，擴(kuò)展了內(nèi)邊距區(qū)域。
  • 外邊距區(qū)域（margin area）用空白區(qū)域擴(kuò)展邊框區(qū)域，以分開相鄰的元素。

通過CSS屬性（width、height、padding、border和margin）來控制它們的尺寸。

二、box-sizing(css3屬性)

1.box-sizing的值

1 /* 關(guān)鍵字 值 */
2 box-sizing: content-box;/*默認(rèn)值*/
3 box-sizing: border-box;
4 
5 /* 全局 值 */
6 box-sizing: inherit;
7 box-sizing: initial;
8 box-sizing: unset;

2.box-sizing的作用

box-sizing的作用就是告訴瀏覽器，使用的盒模型是W3C盒模型，還是IE盒模型。

a.當(dāng) box-sizing 的值為 content-box(默認(rèn)值) 時(shí)，其尺寸計(jì)算公式為：

width = content-width;
height = content-height;

b.當(dāng) box-sizing 的值為 border-box 時(shí)，其尺寸計(jì)算公式為：

width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;

無論取何值，盒子尺寸是一樣的，改變的是盒子的容量（盒子內(nèi)部的width和height的計(jì)算方式）。

補(bǔ)充：IE6、7為W3C盒模型。

3.對(duì)于box-sizing屬性值的選擇

在項(xiàng)目里，究竟該使用哪種盒模型？我也不知道啊

在MDN上有這樣一句話：

Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.

一些專家甚至建議所有的Web開發(fā)者們將所有的元素的 box-sizing 都設(shè)為 border-box。

Twitter的開源框架Bootstrap3就全局設(shè)置了box-sizing: border-box，由此可見IE盒模型的是比較受歡迎的。

補(bǔ)充：

W3C在CSS3中，加入了 calc() 函數(shù)。

CSS函數(shù)calc()可以用在任何一個(gè)需要、, 、、、或的地方。有了calc()，你就可以通過計(jì)算來決定一個(gè)CSS屬性的值了。

/* property: calc(expression) */
width: calc(100% - 80px);

使用 calc() 函數(shù)，我們可以在 content-box 里實(shí)現(xiàn) border-box，相對(duì)的，在 border-box 里實(shí)現(xiàn) content-box 也是可以的。

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

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

相關(guān)文章

  • 標(biāo)準(zhǔn)盒模型與怪異盒模型 + box-sizing

    摘要：標(biāo)準(zhǔn)盒模型標(biāo)準(zhǔn)所有元素可以看作盒子，在中，這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。在標(biāo)準(zhǔn)盒模型中盒子占位高度與之一樣。不幸的是，和在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。 標(biāo)準(zhǔn)盒模型(w3c標(biāo)準(zhǔn)) 所有HTML元素可以看作盒子，在CSS中，box model這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。 showImg(h...

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

  • 盒模型的一些碎碎念

    摘要：盒模型的簡(jiǎn)介本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。 1. 盒模型的簡(jiǎn)介 本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問題 作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。 在我們編寫HTML時(shí)，網(wǎng)頁上的內(nèi)容幾乎都是被包在一個(gè)個(gè)元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div...

    王偉廷 評(píng)論0 收藏0

  • CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn)

    CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn) 盒模型分為哪幾種 - 標(biāo)準(zhǔn)盒模型 - IE盒模型 兩者區(qū)別在于 width 和 height 計(jì)算方式上的不同: 標(biāo)準(zhǔn)盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何來設(shè)置這兩種模型 box-sizing: border-box box-siz...

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

  • CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn)

    CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn) 盒模型分為哪幾種 - 標(biāo)準(zhǔn)盒模型 - IE盒模型 兩者區(qū)別在于 width 和 height 計(jì)算方式上的不同: 標(biāo)準(zhǔn)盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何來設(shè)置這兩種模型 box-sizing: border-box box-siz...

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

  • CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn)

    CSS盒模型以及與之相關(guān)的知識(shí)點(diǎn) 盒模型分為哪幾種 - 標(biāo)準(zhǔn)盒模型 - IE盒模型 兩者區(qū)別在于 width 和 height 計(jì)算方式上的不同: 標(biāo)準(zhǔn)盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何來設(shè)置這兩種模型 box-sizing: border-box box-siz...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<