CSS盒模型

suosuopuo 發(fā)布于2019-04-23 13:06 / 1016人閱讀

摘要：一什么是盒模型盒模型又稱框模型，它規(guī)定了元素框處理元素內(nèi)容內(nèi)邊距邊框和外邊距的方式。二盒模型邊框邊框涉及到三個點，分別是邊框的粗細樣式顏色。關(guān)于的屬性三盒模型填充設(shè)置元素與邊框之間的距離，叫做填充。

一、什么是CSS盒模型？

　　CSS盒模型又稱CSS框模型，它規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框、和外邊距的方式。

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

　　內(nèi)邊距、外邊距和邊框都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。

二、盒模型--邊框（border）：邊框涉及到三個點，分別是邊框的粗細、樣式、顏色。

　如border: 2px solid red，意思為粗細為2px，樣式為實線，顏色為紅色。

　　關(guān)于border的屬性：

三、盒模型--填充（padding）：設(shè)置元素與邊框之間的距離，叫做填充。

　　padding? ?定義元素邊框與元素內(nèi)容之間的空白區(qū)域。可以設(shè)置長度值和百分比值，但是不允許使用負值。

padding也分四部分：上、下、左、右。這四個屬性可以連寫也可以分別設(shè)置。

td {
                padding: 20px 10px 50px 50px;
            }

上、下、左、右四個元素分開寫：

td {
                padding-top: 50px;
                padding-left: 20px;
                padding-bottom: 20px;
                padding-right: 50px;
            }

四、盒模型--邊界：元素之間的距離就是邊界，也就是外邊框，用margin設(shè)置。

margin也分為四部分，即上右下左（margin-top/margin-right/margin-bottom/margin-left）。

同樣margin的四部分也可以連寫。

p {
                margin: 20px 50px 60px 30px;
            }

上、下、左、右四個元素分開寫：

p {
                margin-top: 20px;
                margin-left: 30px;
                margin-bottom: 60px;
                margin-right: 50px;
            }

云服務(wù)器 GPU云服務(wù)器盒模型盒模型html嗎簡述html盒模型盒遙控

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

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

相關(guān)文章

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

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

ky0ncheng 2019-04-23 13:43 評論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 2019-08-29 15:25 評論0 收藏0
【快速入門系列】CSS盒模型基礎(chǔ)

摘要：引言盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

Code4App 2019-08-29 15:20 評論0 收藏0
【快速入門系列】CSS盒模型基礎(chǔ)

摘要：引言盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 評論0 收藏0
css1：盒模型

摘要：最近工作中有機會復(fù)習(xí)一下的基本知識，那么先從的盒模型開始吧，因為這是當(dāng)時進現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。最近工作中有機會復(fù)習(xí)一下css的基本知識，那么先從css的盒模型開始吧，因為這是當(dāng)時進現(xiàn)在這家公司筆試的第一題：怎么把IE盒模型變成標(biāo)準(zhǔn)盒模型？嗯，有辦法，...

TalkingData 2019-08-30 10:59 評論0 收藏0
十分鐘復(fù)習(xí)CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(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í)時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0