1.盒子模型都有哪些： 有標準盒子模型和ie盒子模型也叫怪異盒子模型包括flex彈性伸縮布局以及我們的column-ciunt多列布局
3. 標準盒子模型語法：
4.乙個盒子大小是由width+height+padding+border來定的
集合margin導致到子盒子在頁面位置改變
在實際面試官問的話不能教科書式背出來，得活學活用，比如這樣說：
其實我們最常用的是標準盒子模型也就是box-sizing中的content-box
它指向誰呢，是我們的width和height樣式，指的是內容的寬高，並不是說盒子最終寬高，盒子寬高是由我們內容寬高加上padding加上border最終組成，但這種東西在我們真實專案中可能會遇到乙個問題，就是假設我想構建乙個100x100的盒子，但是呢，之前我寫的width和height是100x100，後來我發現我要給他加個border，我只要加上border，我不改變width和height他一定會變大，這樣的話就會塌下來，這樣的話不好，怎麼辦呢，我還要每次改border，每次改border，都要手動改下width和height，還要重新計算，我認為這種方式比較麻煩，後來css提供了乙個方法box-sizing: border-box也就是怪異盒子模型，這樣的怪異盒子模型有乙個好處，它裡面的width和他的height指的是盒子大小不是內容大小，也就是我寫100x100盒子最終還是100x100，不管我怎麼調border和padding，他會自己縮放內容來實現這個盒子原本的寬高，這樣子樣式要方便，不用去每次去調寬高，所有我現在真是專案大部分都在應用我們的box-sizing: border-box這種盒子模型包括了boostrap以及各大ui元件，他們裡面的公共樣式大部分盒子都用了box-sizing: border-box，所以呢我認為這是我們開發和規範的一種方式
-面試回答思路（劇本式解答）
分析 ----- 思考 ----- 那個方式更nice ------ 結合專案實際開發
我看了什麼什麼 原始碼
聖杯布局
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
html,
body
.contaner
.left,
.tight
.enter
.left,
.enter,
.tight
.left
.tight
<
/style>
<
/head>
="contaner clearfix"
>
="enter"
>
<
/div>
="left"
>
<
/div>
="tight"
>
<
/div>
<
/div>
<
/body>
<
/html>這種是定位實現聖杯布局
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
html,
body
.contaner
.left,
.tight
.left
.tight
.enter
<
/style>
<
/head>
="contaner clearfix"
>
="enter"
>
<
/div>
="left"
>
<
/div>
="tight"
>
<
/div>
<
/div>
<
/body>
<
/html>這種是flex布局實現的，但是在ps端會有相容性問題，移動端是沒問題的
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
/* 聖杯布局
flex屬性設定的時專案在分配剩餘空間時所佔的分數
*/div
span
span:nth-
child(1
) span:nth-
child(3
) span:nth-
child(2
)<
/style>
<
/head>
10<
/span>
20<
/span>
30<
/span>
<
/div>
<
/body>
<
/html>使用calc實現
還有最後乙個雙飛翼布局
css盒子模型布局詳解
盒子模型是css裡的乙個重點內容，一般來講主要是w3c的盒子模型，不過ie原先也有自己的盒子模型，但是隨著發展ie也調整了盒子模型同步w3c，因此這裡就不講ie盒子模型了。標準w3c盒子模型 以下用乙個div的盒子模型作為範例進行解讀 可以看出這個div裡面只有範例的文字，而它的盒模型分為四部分 c...
css盒子模型，div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...
CSS布局控制 盒子模型
一 盒子模型 用於設定邊框的 盒子的邊框 border 用於設定距離的 內容與邊框 padding 盒子與盒子 margin 文字預設在盒子的左上方 padding border margin都是實體，會增加盒子的面積 盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高，盒...