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