国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 盒模型簡介

netmou / 1746人閱讀

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

一、盒子模型概述

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

二、border

1、border-width

指定邊框的寬度

2、border-style

指定邊框的樣式，border-style:none | dotted | solid | double | dashed;
dotted    定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed    定義虛線。在大多數瀏覽器中呈現為實線。
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區域在border與content之間；
padding（填充）,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。

1）用來調整內容在容器中的位置關系
2）用來調整子元素在父元素中的位置關系。padding屬性需要添加在父元素上。
3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性。
4）背景色和背景圖像會覆蓋padding和content組成的區域；
5）padding不可以為負值
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：在元素外邊的空白區域，被稱為邊距。

1）外邊距(margin)在border之外,margin區域不應用背景;CSS中margin默認值為0
2）可以為負數。

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
五、特別關注

1、行內元素

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

2、外邊距合并

1）、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖：

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117177.html

相關文章

  • 盒模型的一些碎碎念

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

    王偉廷 評論0 收藏0

  • 彈性盒子模型詳解

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

    rozbo 評論0 收藏0

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

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

    ky0ncheng 評論0 收藏0

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

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

    blankyao 評論0 收藏0

發表評論

0條評論

netmou

男|高級講師

TA的文章

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