CSS盒模型

suosuopuo 發布于2019-04-23 13:06 / 1004人閱讀

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

一、什么是CSS盒模型？

　　CSS盒模型又稱CSS框模型，它規定了元素框處理元素內容、內邊距、邊框、和外邊距的方式。

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

　　內邊距、外邊距和邊框都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。

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

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

　　關于border的屬性：

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

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

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

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

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

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

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

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;
            }

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

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

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

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

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

ky0ncheng 2019-04-23 13:43 評論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

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

blankyao 2019-08-29 15:25 評論0 收藏0
【快速入門系列】CSS盒模型基礎

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

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

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

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

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

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

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

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