1、盒子模型
下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。
盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。
標準模型中，盒模型的寬高只是內容(content)的寬高，預設正是w3c標準盒模型。
而在ie模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。
/* 標準模型 */
box-sizing:content-box;
/*ie模型 */
box-sizing:border-box;
box-sizing:content-box padding和border都會撐開盒子，改變盒子的寬度高度
box-sizing:border-box padding和border都不會撐開盒子，不會改變盒子的寬度，盒子的內容會相應縮小。
2、盒子模型屬性
(1)border
border:width style color
style屬性
none 沒有邊框
solid 邊框為實線
dashed 邊框為虛線
dotted 邊框為點線
double 邊框為雙實線
**的細線邊框合併：border-collapse:collapse
圓角邊框(css3)：border-radius:左上角 右上角 右下角 左下角
(2)padding
可以分開設定：padding-left padding-top padding-right padding-bottom
也可以放在一起設定：padding:10px 20px 30px 40px;
順序為↑→↓←
如果設定1個值，表示四個方向是同乙個值
如果設定兩個值，表示上下 右左
如果設定三個值，表示上 右左 下
(3)margin
設定方法和padding相同，可以分開設定也可以放在一起設定。
行內元素只有左右外邊距，沒有上下外邊距。在ie6等低版本中是沒有內邊距的。
外邊距可以實現盒子居中，必須滿足兩個條件：
1． 必須是塊級元素
2． 盒子必須指定寬度
然後設定左右外邊距為auto，就可以實現水平居中
清除元素缺省內外邊距
padding: 0;
margin: 0;
外邊距合併
場景一：
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有margin-bottom，下面的元素有margin-top，則他們之間的垂直間距不是margin-bottom和margin-top的和，而是取兩者中的較大的值作為兩個元素的邊距，這種現象稱為相鄰塊元素垂直外邊距的合併。
解決方法：
避免！(如此羞澀的解決方案)
場景二：
對於兩個巢狀關係的塊元素，如果父元素沒有padding-top和border，則父元素的margin-top會與子元素的margin-top發生合併，合併後的外邊距為兩者中的較大者。
解決方法：
1． 為父元素設定1px的border或padding-top
2． 為父元素新增overflow:hidden
3、盒子陰影
box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸 陰影顏色 內/**影
h-shadow 必選，水平陰影的位置，允許負值
v-shadow 必選，垂直陰影的位置，允許負值
blur 可選，模糊距離
spread 可選，陰影的尺寸(影子大小)
color 可選，陰影的顏色
inset 可選，將外部陰影改為內部陰影(**影為預設屬性，不需要寫，沒有outset屬性)
本文參考自
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
前端入門 CSS盒子模型
屬性描述 padding 設定所有內邊距 padding left 設定左內邊距 padding right 設定右內邊距 padding top 設定上內邊距 padding bottom 設定底部內邊距 描述屬性 邊框樣式 border style 單邊框樣式 上 border top styl...