盒模型屬性-width height-padding-border-margin

時間 2020-12-07

標籤瀏覽器 spa blog bfc 渲染自適應方法 d3 margin 欄目 CSS 简体版

原文原文鏈接

寬度 width：瀏覽器

做用：設置能夠添加元素內容的區域的寬度。 spa

屬性值：blog

特殊應用：bfc

• 若是一個元素不添加width 屬性，默認屬性值爲auto，不一樣的元素瀏覽器會根據其特色自動計算出實際寬度，例如渲染

<div>元素等獨佔一行的，其 width 屬性的值會自動撐滿父元素的 width 區域，若是是<span>元素等不須要獨佔一行的，其 width 屬性的值是內部元素內容自動撐開的寬度。

• <body>元素比較特殊，不須要設置 width 屬性，寬度會自動適應瀏覽器窗口的寬度。

高度 height:

做用：設置能夠添加元素內容的區域的高度。

屬性值：

特殊應用:自適應

若是一個元素不添加 height 屬性，默認屬性值爲auto，瀏覽器會自動計算出實際高度，也就是是內部元素內容自動撐開的高度。元素的高度自適應內部內容的高度。方法

內邊距 padding:im

做用：設置的是元素的邊框內部到寬高區域之間的距離。d3

特色：能夠去加載背景，不能書寫嵌套的內容。margin

屬性值：經常使用px爲單位的數值。

padding 是一個複合屬性，能夠根據內邊距的方向不一樣劃分爲四個方向的單一屬性。

單一屬性:

書寫四個方向單一屬性時，通常是按照順時針規律書寫：上、右、下、左。

簡寫:

有時爲了化簡書寫，通常習慣將四個方向的單一屬性進行合寫成 padding 屬性。 padding 屬性值：能夠有 1-4 個值，值之間用空格進行分隔。根據四個方向屬性值不一樣，padding 有多種值的書寫表示方法。根據 padding 的屬性值的個數不一樣，區分了四種表示法：

四值法:設置四個屬性值，分配方向上、右、下、左。

三值法:設置三個值分配給上、左右、下。

二值法:設置兩個值，分配給上下、左右。

單值法:設置屬性值只有一個，分配方向上右下左，四邊的值相同。

案例:

製做三邊內邊距相同，一邊不一樣。

方法①：使用四值法、三值法，進行屬性值設置。

方法②：利用綜合屬性和單一屬性之間的層疊，對綜合屬性設置單值法，將四邊內邊距設置相同，在後面使用單一屬性寫法，再次定義某個方向的屬性值不一樣，能夠實現單一屬性層疊綜合屬性的一部分。

其中第二種用法更加靈活，推薦使用，使用過程當中注意書寫順序，單一屬性必須書寫在後，才能層疊掉綜合屬性中重複的部分。

邊框 border:

做用：設置的是內邊距外面的邊界區域，做爲盒子的實體化的最外層。

屬性值：由三個值組成，分爲線的寬度、線的形狀、線的顏色。

border 屬性是一個複合屬性，根據劃分依據不一樣能夠有兩種單一屬性的劃分方式。

按照屬性值的類型劃分:

線寬：border-width

線型：border-style

顏色：border-color

線寬 border-width:

做用：設置邊框線的寬度。

屬性值：經常使用px形式的數值，四個方向都有邊框，屬性值相似於 padding，也有四種值的寫法。

線型 border-style:

做用：設置邊框的線條形狀。

屬性值：形狀的單詞，整體也是相似 padding 的綜合屬性寫法。

屬性值的單詞可能性：

邊框顏色 border-color:

做用：設置邊框的顏色。

屬性值：顏色名或顏色值，總體相似 padding 綜合屬性寫法。

根據邊框的方向劃分:

上邊框：border-top

右邊框：border-right

下邊框：border-bottom

左邊框：border-left

每一個單一屬性都必須與複合屬性 border 一致，設置三個屬性值。

根據方向和類型，進一步細分:

相似 border-top 的單一方向屬性，也能夠根據屬性值類型繼續進行單一屬性劃分。

單一屬性寫法：border-方向-類型。

注意：細分時必須先寫方向劃分再寫類型劃分，不然屬性名錯誤。

外邊距 margin:

做用：設置的是盒子與盒子之間的距離。

特色：不能渲染背景。

屬性值：經常使用 px 爲單位的數值。

外邊距的設置方式與內邊距 padding 如出一轍的。

單一屬性:

margin‐top: 20px;

margin‐right: 20px;

margin‐left: 20px;

margin‐bottom: 10px;

複合屬性的四種值的寫法:

margin: 10px 20px 30px 40px;

margin: 10px 20px 30px;

margin: 10px 20px;

margin: 10px;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。