1. 程式人生 > >基礎篇—CSS3盒模型

基礎篇—CSS3盒模型

CSS3盒模型

CSS有一種基礎設計模式叫盒模型, 定義了Web頁面中的元素是如何看做盒子來解析的。 每一個盒子有不同的展示介面, 在 CSS 中 主要有以下幾種盒模型: inline、inline- block、block、table、absolute,position、float。 瀏覽器把每個元素看 一個盒模型, 每一個盒模型是由以下幾個屬性組合所決定的: display、position、float、width、height、margin、padding和border等, 不同型別的盒模型會產生不同的佈局。
什麼是盒模型?
CSS中每一個元素都是一個盒模型,包括HTML和body標籤元素。在平時設計中,大家對content、padding、margin、background和border來說一定不會陌生了, 因為盒模型都具備這些屬性。 其中width、height、border、background、padding和margin之間的層次關係和相互影響,可以 看出 padding、content、 background-image、background-color,它們四者構成了Z軸( 垂直螢幕的座標) 多重層疊關係。 但是border與margin、padding三者之間應該是平面上 的並級關係,並不能構成Z軸的層疊關係。
在CSS中盒模型被分為兩種:第 一種 是 W3C 的 標準 模型。另一種 是 IE 的 傳統 模型。
它們相同之處都是對元素計算尺寸的模型,具體說就是對元素的width、height、padding和border以及元素實際尺寸的計算關係,不同之處是兩者的計算方法 不一致。

1. W3C的標準盒模型。

http:/ /www.iis7.com/b/wzjk/
外盒尺寸計算(元素空間尺寸)
element空間高度=內容高度+內距+邊框+外距
element空間寬度=內容寬度+內距+邊框+外距內盒尺寸計算( 元素大小)
element高度=內容高度+內距+邊框(height為內容高度)
element 寬度=內容寬度+內距+邊框(width為內容寬度)

2. IE傳統下盒模型( IE6以下,不包含IE6版本或QuirksMode下IE5.5+)

外盒尺寸計算( 元素空間尺寸)
element空間高度=內容高度+外距(height包含了元素內容寬度、邊框、內距)
element寬間寬度=內容寬度+外距(width包含了元素內容寬度、邊框、內距)
內盒尺寸計算( 元素 大小)
element高度=內容高度( height 包含了元素內容寬度、邊框、內距)
element寬度=內容寬度( width包含了元素內容寬度、邊框、內距)
為了解決這種問題, CSS3增添 了 一個盒模型屬性box-sizing,能夠事先定義盒模型的尺寸解析方式,box- sizing 的 屬性 值 主要 有 以下 三個:
1· content-box: 預設值, 讓元素維持W3C的標準盒模型。元素的寬度和高度( width/ height) 等於元素邊框寬度( border) 加上元素內距( padding) 加上元素內容寬度或高度( content width/ height),也就是 element width/ height=border+padding+content width/ height。
2· border-box: 此值會重新定義CSS2.1中盒模型組成的模式,讓元素維持IE傳統的盒模型( IE6以下版本和IE6~7怪異模式)。元素的寬度或高度等於元素 內容的寬度或高度。 從盒模型介紹可知, 這裡的內容寬度或高度包含了元素的border、padding、內容的寬度或高度( 此處的內容寬度或高度=盒子的寬度或 高度-邊框-內距)。
3· inherit:此值使元素繼承父元素的盒模型模式。 box-sizing屬性主要用來控制元素的盒模型的解析模式, 其主要目的是控制元素的總寬度。 在W3C規範中, 元素的box-sizing預設屬性值是content-box 值, 如果不顯式重置box-sizing屬性值為border-box, 才能明確對元素設定一個總寬度。在這種情況之下會使 頁面佈局更加方便。

最後

為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為全棧工程師,乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進群交流討論,學習交流,共同進步。

當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們,祝福大家在往後的工作與面試中一切順利。