成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 盒模型簡介

netmou / 1749人閱讀

摘要：左右和會起作用。外邊距合并當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

一、盒子模型概述

盒子模型是CSS的基石,指定標(biāo)簽如何顯示；
頁面上的每個元素都被當(dāng)成一個矩形盒子,占據(jù)一定的頁面空間,這個盒子由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊界（margin）組成；

二、border

1、border-width

指定邊框的寬度

2、border-style

指定邊框的樣式，border-style:none | dotted | solid | double | dashed;
dotted    定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
dashed    定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
solid     定義實線。
double    定義雙線。雙線的寬度等于 border-width 的值。

3、border-color

指定邊框的顏色

4、border-top|bottom|left|right

border-top-style
border-top-width
border-top-color

三、padding

padding：padding區(qū)域在border與content之間；
padding（填充）,在設(shè)定頁面中一個元素內(nèi)容到元素的邊緣(邊框) 之間的距離。

1）用來調(diào)整內(nèi)容在容器中的位置關(guān)系
2）用來調(diào)整子元素在父元素中的位置關(guān)系。padding屬性需要添加在父元素上。
3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性。
4）背景色和背景圖像會覆蓋padding和content組成的區(qū)域；
5）padding不可以為負(fù)值
1、padding-top|bottom|left|right    
2、padding:10px;
所有四個填充都是 10px
3、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
4、padding:10px 5px 15px;
 上填充是 10px 右填充和左填充是 5px 下填充是 15px

5、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px
四、margin

margin：在元素外邊的空白區(qū)域，被稱為邊距。

1）外邊距(margin)在border之外,margin區(qū)域不應(yīng)用背景;CSS中margin默認(rèn)值為0
2）可以為負(fù)數(shù)。

1、margin-top|bottom|left|right    
2、margin:10px 5px 15px 20px;
上邊距是 10px 右邊距是 5px 下邊距是 15px 左邊距是 20px
3、margin:10px 5px 15px;
上邊距是 10px 右邊距和左邊距是 5px 下邊距是 15px
4、margin:10px 5px;
上邊距和下邊距是 10px 右邊距和左邊距是 5px
5、margin:10px;
所有四個邊距都是 10px
五、特別關(guān)注

1、行內(nèi)元素

不要給上下的margin 和padding，上下margin和padding會被忽略。左右margin和padding會起作用。

2、外邊距合并

1）、當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：

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

3）應(yīng)用：這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

4）合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117177.html

相關(guān)文章

  • 盒模型的一些碎碎念

    摘要：盒模型的簡介本文簡單的總結(jié)了一些基本概念，知識點以及細(xì)節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。 1. 盒模型的簡介 本文簡單的總結(jié)了一些基本概念，知識點以及細(xì)節(jié)問題 作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。 在我們編寫HTML時，網(wǎng)頁上的內(nèi)容幾乎都是被包在一個個元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div...

    王偉廷 評論0 收藏0

  • 彈性盒子模型詳解

    摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標(biāo)準(zhǔn)文檔彈性盒模型在過去幾年間制定了三版草案規(guī)范。給子元素直接添加屬性即可七后話以上是本文所有內(nèi)容，以下是小白我的感慨。 一、前言 由于W3C在制定彈性盒模型內(nèi)容有多版草案，在網(wǎng)上瀏覽了很多視頻和文章，版本有新有舊，所以準(zhǔn)備寫一篇關(guān)于彈性盒模型的文章，一是輔助自己學(xué)習(xí)，二是幫忙其他前端學(xué)習(xí)者更容易地彈性盒模型。 二、彈性盒...

    rozbo 評論0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們...

    ky0ncheng 評論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重...

    blankyao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<