【快速入門系列】CSS盒模型基礎

Code4App 發布于2019-08-29 15:20 / 1646人閱讀

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

引言

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

一、什么是盒模型

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

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

二、W3C標準盒模型

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




  盒模型內部元素

最終呈現的效果如下圖：

W3C盒模型各部分取值：

三、IE盒模型

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

四、box-sizing

以下是MDN對 box-sizing 屬性的說明：

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

我們可以簡單的理解，當box-sizing為content-box時，我們使用的是W3C盒模型，當box-sizing為border-box時，我們使用的是IE盒模型。

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

結束語

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

云服務器 GPU云服務器 css快速入門盒模型盒模型html嗎簡述html盒模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113251.html

【快速入門系列】CSS盒模型基礎

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

LinkedME2016 2019-08-02 10:22 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

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

mrcode 2019-08-30 15:53 評論0 收藏0
前端技術博客文章、書籍積累

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

LiangJ 2019-08-30 12:58 評論0 收藏0
前端技術博客文章、書籍積累

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

codercao 2019-08-19 18:10 評論0 收藏0
前端技術博客文章、書籍積累

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

huayeluoliuhen 2019-08-01 15:13 評論0 收藏0