WEB前端第十二課——CSS盒子

時間 2020-07-25

標籤 web 前端第十二 css 盒子欄目 HTML 简体版

原文原文鏈接

1.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）html

2.border，設置元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是一般border屬性值的書寫順序（非嚴格要求）瀏覽器

　　單獨書寫：border-width（寬度，默認3px）、border-style（樣式，默認none）、border-color（顏色，默認黑色）佈局

　　border-style屬性值：dotted（點狀）、solid（實線）、double（雙實線）、dashed（虛線）、無邊框（none）flex

3.padding，設置元素內容與邊框之間的距離，增長內邊距會擴大元素邊框所佔用的區域flexbox

　　書寫格式：padding:value（四邊設置，可多值）、padding-top/right/bottom/left:value（單邊設置），value取值能夠爲像素、百分比，但不能爲負數spa

4.margin，設置元素邊框外周圍的空白區域，外邊距是透明的htm

　　書寫格式：margin:value（四邊設置、可多值）、margin-top/right/bottom/left:value（單邊設置），value取值能夠爲像素、百分比、auto、負數blog

　　外邊距合併，當兩個垂直外邊距相遇時，他們將造成一個外邊距，即外邊距合併文檔

　　　　　　　　合併後的外邊距的高度等於發生合併的兩個外邊距中高度較大者it

　　　　　　　　兩個塊級元素是包含關係時，要設置被包含元素的相對邊距，須要增長父元素border（邊框）或使用「 overflow：hidden」或「 padding」

　　外邊距特色：① 塊級元素的垂直相鄰外邊距外邊距會合並，② 行內元素不佔上下外邊距，且左右外邊距不會合並，③ 浮動元素的外邊距也不會合並，④ 容許指定負數外邊距值

5.怪異盒子，盒子模型分爲兩種，一種是符合W3C規範的標準盒子模型，另外一種是IE的盒子模型，也被叫作怪異盒子

　　IE盒子模型也包括margin、border、padding、content，不過IE盒子模型的寬（width）包含了border和padding

6.box-sizing，該屬性用於指定當前元素使用哪一種盒子模型，標準（W3C）或怪異（IE）

　　屬性值：

　　　　　content-box（標準），padding和border不會被包含在width和height內

　　　　　border-box（怪異），padding和border被包含在width和height內，即元素實際大小隻與width和height有關

7.flexbox，伸縮盒子模型（也叫彈性盒子）

　　它決定一個盒子在其餘盒子中的分佈，以及如何處理可用的空間。

　　該模型能夠輕鬆的建立「自適應」瀏覽器窗口的流動佈局。

　　傳統盒子模型基於HTML文檔流排列，彈性盒子模型能夠規定特定的順序。

　　經過設置 display屬性值爲 flex開啓彈性盒子模型。

　　設置了彈性盒子模型後，float、clear、vertical-align在 flex中不起做用。

8.flex

　　基本結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS選擇器</title>
    <style>
        .d0 {
            width: 100%;
            height: 600px;
            background-color: aliceblue;
            display: flex;
        }
        .d1 {flex-grow: 1; background-color: blue;}
        .d2 {flex-grow: 2; background-color: aquamarine;}
        .d3 {flex-grow: 1; background-color: coral;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>
</html>

　　display:flex，定義外層父容器 d0爲彈性佈局，默認爲水平佈局

　　flex-grow:value，該屬性表示當前子項目在父容器中的佔比，默認值爲0

　　flex-direction，定義靈活項目的佈局方向，屬性值：row（默認值，靈活項目水平排列）、row-reverse（靈活項目以相反的順序水平排列）

　　　　　　　　　　　　　　　　　　　　　　　　 column（靈活項目垂直排列）、column-reverse（靈活項目以相反的順序垂直排列）

　　justify-content，設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，使用該屬性以前必須先聲明父元素爲彈性盒子

　　　　　屬性值：flex-start（默認值，子項目位於容器的開頭）、flex-end（子項目位於容器的結尾）、center（子項目位於容器的中心）、

　　　　　　　　　space-between（子項目位於各行之間留有空白的容器內）、space-around（子項目位於各行以前、之間、以後都留有空白的容器內）

　　align-items，該屬性定義靈活子項目在flex父容器的側軸（縱軸）方向上的對齊方式

　　　　　屬性值：stretch（默認值，拉伸子項目以適應容器）、center（子項目在容器中心）、flex-start（子項目在容器開頭）、flex-end（子項目在容器末端）、baseline（子項目在容器基線）