欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css盒子模型 css margin 外邊框合并

  發(fā)布時(shí)間：2009-10-15 16:22:46   作者：佚名   我要評(píng)論
剛剛看了css教程覺得很形象就貼出來(lái)了。想學(xué)習(xí)的朋友可以參考下。

CSS 框模型概述

CSS 框模型

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。

內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^(guò)將元素的 margin 和 padding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：

* {
  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)看下圖：

CSS 框模型實(shí)例 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊。

提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。

瀏覽器兼容性

一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(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ì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

術(shù)語(yǔ)翻譯

  • element : 元素。
  • padding : 內(nèi)邊距，也有資料將其翻譯為填充。
  • border : 邊框。
  • margin : 外邊距，也有資料將其翻譯為空白或空白邊。

在 w3school，我們把 padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距。邊框內(nèi)的空白是內(nèi)邊距，邊框外的空白是外邊距，很容易記吧：）

外邊距合并

外邊距合并（疊加）是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是，在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局是，它會(huì)造成許多混淆。

簡(jiǎn)單地說(shuō)，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：

CSS 外邊距合并實(shí)例 1

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：

CSS 外邊距合并實(shí)例 2

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：

CSS 外邊距合并實(shí)例 3

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

CSS 外邊距合并實(shí)例 4

這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄?，形成了一個(gè)小的外邊距。

外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

CSS 外邊距合并的實(shí)際意義

注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

相關(guān)文章

  • CSS盒子模型是什么

    什么是CSS盒子模型？CSS盒子模型是為了讓我們充分理解div+css模型的定位功能，盒子模型在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個(gè)模型
    2016-05-10

  • css盒子模型圖解

    這篇文章主要介紹了css盒子模型的使用方法,需要的朋友可以參考下
    2014-04-22

  • css盒子模型詳解加示例

    這篇文章主要介紹了css盒子模型詳解加示例,W3C組織建議把所有的網(wǎng)頁(yè)上的對(duì)象都放在一個(gè)盒子中,在定義盒子寬高的時(shí)候，要考慮到內(nèi)填充，邊框，邊界的存在,這里講了一個(gè)盒子
    2014-04-15

  • CSS3盒子模型詳解

    本章將介紹CSS3中各種盒的知識(shí)點(diǎn)；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況
    2013-04-24

  • CSS3盒子模型詳解

    本章將介紹CSS3中各種盒的知識(shí)點(diǎn)；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況
    2013-04-24

  • CSS 理解盒子模型

    盒子模型，是XHTML+CSS布局頁(yè)面中的核心！要想學(xué)會(huì)用CSS布局頁(yè)面，就首先要理解盒子模型！
    2010-01-07

  • css的核心內(nèi)容 標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位等分析

    css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位（可以說(shuō)不理解這些概念絕做不出合適的網(wǎng)頁(yè)）
    2009-12-21

  • 深入理解CSS中的盒子模型

    下面小編就為大家?guī)?lái)一篇深入理解CSS中的盒子模型。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-25

最新評(píng)論