怪異盒模型 彈性盒模型

標準盒模型

我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式

.box

.p-box

標準模式：box-sizing:content-box; 　　

怪異模式：box-sizing:border-box;

彈性盒模型

盒子陰影

box-shadow:

10px 10px 15px 3px black;

display

: flex;

justify-content:space-around;

flex-direction: column-reverse;

align-items: center;

flex-wrap: wrap;

！align-content 規定多行，必須為多行，對單行無效，去掉多於的行間距

！不同點： 該屬性必須多行的時候，對單行元素無效；同時，也可以去掉多餘的行間距

align-content: flex-start;

.main>div:nth-

child(2
).main>div:nth-
child(3
)

否則： 排序的元素和未排序的元素 將按照兩套排序規則走

.box:nth-

child(1
).box:nth-
child(2
).box:nth-
child(3
)

超出的部分 / 元素總個數 = 每個元素要收縮的面積

如果劃分的話，那麼所有的元素全部要設定比例

.main

.main>div
/* 自定義的收縮 */
.main>div:nth-
child(1
).main>div:nth-
child(2
).main>div:nth-
child(3
).main>div:nth-
child(4
).main>div:nth-
child(5
)/* 自定義的擴張 */
/* .main>div:nth-child(2) */
"main"
>
"box"
>
<
/div>
"box"
>
<
/div>
"box"
>
<
/div>
"box"
>
<
/div>
"box"
>
<
/div>
<
/div>

標準盒模型 怪異盒模型 彈性盒模型

box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...

怪異盒模型 彈性盒模型 多列

怪異盒模型 怪異盒模型 box sizing border box 怪異盒子包括了border 和 padding 新增邊框和內填充不會把盒子撐大 會保持原有大小彈性盒模型 彈性盒的特點 1 彈性盒的最近一層子元素可以設定大小 忽略元素型別 2 單個子元素在彈性盒垂直水平居中 margin auto...

彈性布局 怪異盒模型

怪異盒模型 由margin和content border padding 組成 盒模型轉換 box sizing content box 標準盒模型 boeder box 怪異和模型 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。...