資訊專欄INFORMATION COLUMN
摘要：概覽盒模型也叫框模型，規(guī)定了元素框處理元素內(nèi)容內(nèi)邊距邊框和外邊距的方式。不幸的是，和在使用自己的非標(biāo)準(zhǔn)模型。當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。如果缺少右外邊距的值，則使用上外邊距的值。
概覽
CSS 盒模型 (Box Model)也叫框模型，規(guī)定了元素框處理元素 內(nèi)容、 內(nèi)邊距、 邊框 和 外邊距 的方式。
元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距是透明的，因此不會(huì)遮擋其后的任何元素。
內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表（瀏覽器內(nèi)置樣式表）設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^(guò)將元素的 margin 和 padding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣式。
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
瀏覽器兼容性
大多數(shù)瀏覽器都會(huì)按照上面的圖示來(lái)呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE 5.X 和 6 在使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。
雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。
外邊距 margin圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。
可選值設(shè)置外邊距的最簡(jiǎn)單的方法就是使用 margin 屬性，該屬性接受任何長(zhǎng)度單位，可以是像素（px）、英寸（in）、毫米（mm）、em和auto。
在 h1 元素的各個(gè)邊上設(shè)置了 1/4 英寸寬的空白
h1 {margin : 0.25in;}
為 h1 元素的四個(gè)邊分別定義不同的外邊距
h1 {margin : 10px 0px 15px 5px;}
這些值的順序是從上外邊距 (margin-top) 開(kāi)始圍著元素順時(shí)針旋轉(zhuǎn)的：
margin: top right bottom left
等價(jià)于
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 15px;
}
為 margin 設(shè)置一個(gè)百分比數(shù)值
p {margin : 10%;}
百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的。
值復(fù)制值復(fù)制是指 margin 的四個(gè)方位屬性值部分缺省時(shí)的自動(dòng)填充。
四個(gè)值部分缺省，有如下三種情況：
1 個(gè)值，其他 3 個(gè)值都由這個(gè)值（上外邊距）復(fù)制得到
p {margin: 1px;} /* 等價(jià)于 1px 1px 1px 1px */
2 個(gè)值，第 3 個(gè)值（下外邊距）由第 1 個(gè)值（上外邊距）復(fù)制得到，第 4 個(gè)值（左外邊距）由第 2 個(gè)值（右外邊距）復(fù)制得到
h2 {margin: 0.5em 1em;} /* 等價(jià)于 0.5em 1em 0.5em 1em */
3 個(gè)值，第 4 個(gè)值（左外邊距）由第 2 個(gè)值（右外邊距）復(fù)制得到
h1 {margin: 0.25em 1em 0.5em;} /* 等價(jià)于 0.25em 1em 0.5em 1em */
歸納起來(lái)就是，上下對(duì)應(yīng)，左右對(duì)應(yīng)，第一個(gè)值是 top.
值合并外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：
外邊距甚至可以與自身發(fā)生合并，假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或內(nèi)邊距。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
外邊距合并既能夠節(jié)省頁(yè)面空間又能使頁(yè)面更加美觀。
注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
邊框 border元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
CSS 邊框有著豐富的內(nèi)容，為了避免此頁(yè)面過(guò)長(zhǎng)，特將其獨(dú)立出來(lái)介紹，傳送門。
內(nèi)邊距 padding元素的內(nèi)邊距是在邊框和內(nèi)容區(qū)之間。
CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。
內(nèi)邊距的使用與外邊距的使用類似。
給 h1 元素的各邊添加 10 像素的內(nèi)邊距
h1 {padding: 10px;}
您還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值
h1 {padding: 10px 0.25em 2ex 20%;}
同樣可以分別設(shè)置四個(gè)方位
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
內(nèi)邊距與外邊距一樣，遵循值復(fù)制的規(guī)則。
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111149.html
摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。從元素的布局特性來(lái)分，主要可以分為三類元素塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。行內(nèi)級(jí)元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們...
摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重...
摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...
摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...
摘要：最近工作中有機(jī)會(huì)復(fù)習(xí)一下的基本知識(shí)，那么先從的盒模型開(kāi)始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見(jiàn)鏈接描述常見(jiàn)的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。 最近工作中有機(jī)會(huì)復(fù)習(xí)一下css的基本知識(shí)，那么先從css的盒模型開(kāi)始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題：怎么把IE盒模型變成標(biāo)準(zhǔn)盒模型？嗯，有辦法，...
摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...
閱讀 988·2023-04-25 23:50
閱讀 2062·2021-11-19 09:40
閱讀 631·2019-08-30 13:50
閱讀 2754·2019-08-29 17:11
閱讀 1071·2019-08-29 16:37
閱讀 3020·2019-08-29 12:54
閱讀 2825·2019-08-28 18:17
閱讀 2676·2019-08-26 16:55
