1.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
2.border，設定元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是通常border屬性值的書寫順序（非嚴格要求）
單獨書寫：border-width（寬度，默認3px）、border-style（樣式，默認none）、border-color（顏色，默認黑色）
border-style屬性值：dotted（點狀）、solid（實線）、double（雙實線）、dashed（虛線）、無邊框（none）
3.padding，設定元素內容與邊框之間的距離，增加內邊距會擴大元素邊框所占用的區域
書寫格式：padding:value（四邊設定，可多值）、padding-top/right/bottom/left:value（單邊設定），value取值可以為像素、百分比，但不能為負數
4.margin，設定元素邊框外周圍的空白區域，外邊距是透明的
書寫格式：margin:value（四邊設定、可多值）、margin-top/right/bottom/left:value（單邊設定），value取值可以為像素、百分比、auto、負數
外邊距合并，當兩個垂直外邊距相遇時，他們將形成一個外邊距，即外邊距合并
合并后的外邊距的高度等于發生合并的兩個外邊距中高度較大者
兩個塊級元素是包含關系時，要設定被包含元素的相對邊距，需要增加父元素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 >
<div ></div>
<div ></div>
<div ></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（子專案在容器基線）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4008.html
標籤：Html/Css
上一篇：HTML其他概念
下一篇：CSS基礎-03