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

資訊專欄INFORMATION COLUMN

【快速入門系列】CSS盒模型基礎(chǔ)

Code4App / 1658人閱讀

摘要：引言盒模型是頁面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。

引言

CSS盒模型是頁面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來形容，因此稱之為“盒模型”。

一、什么是盒模型

我們首先來看一下在HTML中盒模型的樣子：

我們可以清楚的看出，盒模型由content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）組成。

二、W3C標(biāo)準(zhǔn)盒模型

IE8以上瀏覽器默認(rèn)使用W3C標(biāo)準(zhǔn)盒模型
在W3C標(biāo)準(zhǔn)下，我們定義元素的width值即為盒模型中的content的寬度值，height值即為盒模型中的content的高度值，因此有：
元素占據(jù)的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素占據(jù)的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
這里給大家舉個(gè)栗子：





  盒模型內(nèi)部元素

最終呈現(xiàn)的效果如下圖：

W3C盒模型各部分取值：

三、IE盒模型

IE8及以下的瀏覽器默認(rèn)使用IE盒模型
IE盒模型又稱“怪異盒模型”，在該標(biāo)準(zhǔn)下，我們定義元素的width值為盒模型中的border-left + padding-left + content的寬度值 + padding-right + border-right的總和，height值為盒模型中的border-top + padding-top + content的高度值 + padding-bottom + border-bottom的總和
元素占據(jù)的寬度 = margin-left + width + margin-right
元素占據(jù)的高度 = margin-top + height + margin-bottom
上述同樣的代碼，在IE盒模型下會(huì)有如下效果：

四、box-sizing

以下是MDN對(duì) box-sizing 屬性的說明：

box-sizing 屬性可以被用來調(diào)整這些表現(xiàn):
content-box  是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。

我們可以簡單的理解，當(dāng)box-sizing為content-box時(shí)，我們使用的是W3C盒模型，當(dāng)box-sizing為border-box時(shí)，我們使用的是IE盒模型。

更多關(guān)于box-sizing屬性的使用，可以看這里：box-sizing | MDN

結(jié)束語

盒模型概念無論是在實(shí)戰(zhàn)中或者面試中都是非常重要且基礎(chǔ)的知識(shí)點(diǎn)，因此需要熟練掌握，此文章對(duì)盒模型概念做了基本介紹，希望能給你帶來幫助。

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

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

相關(guān)文章

  • 【快速入門系列】CSS盒模型基礎(chǔ)

    摘要：引言盒模型是頁面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來形容，因此稱之為盒模型。 一、什么是...

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

  • 【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（2） 盒模型

    摘要：盒模型，盒模型看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。盒子實(shí)際占用的大小是左左右右，屬性細(xì)節(jié)一個(gè)塊元素的默認(rèn)寬度是，表示它會(huì)自動(dòng)延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對(duì)和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。 2，五個(gè)屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...

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

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

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

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

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

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

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

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

0條評(píng)論

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