CSS盒子模型

組成：邊框、外邊距、内邊距、内容

邊框（border）：三部分組成“ 邊框粗細、邊框樣式、邊框顔色 ”

屬性

作用

border-width

定義邊框的粗細，機關是px

border-style

邊框的樣式 solid（實線） dashed（虛線）dotted（點線）

border-color

邊框顔色

簡寫<code>border:1px solid red;</code>沒有順序！！！

邊框的每一條邊都能定義樣式（ border-top / bottom / left / right ）

注意：這裡在定義不同邊的時候一定要注意層疊性！！！

表格的細線邊框：解決表格邊框粗細疊加的問題

<code>border-collapse： collapse;</code> 表示把相鄰的邊框合并在一起

内邊距（padding）：設定内邊距，即邊框與内容之間的距離

<code>padding-left / right / top / bottom</code> 分别定義四邊的内邊距

簡寫方式

值的個數

表達意思

padding: 5px;

代表4邊的内邊距都是5px

padding: 5px 10px ;

代表上下内邊距是5px，左右内邊距是10px

padding: 5px 10px 20px ;

代表上内邊距是5px，左右内邊距是10px，下内邊距是20px

padding: 5px 10px 20px 30px ;

代表上内邊距是5px，右10px，下20px，左30px，順時針

注意：

邊框會影響盒子的實際大小！！

盒子本身沒有寫 width或者height屬性時，不會撐開盒子

外邊距：用于控制盒子與盒子之間的距離

<code>margin-left / right / top / bottom</code> 分别定義四邊的外邊距

和padding文法基本相同

塊級盒子水準居中

保證左右的外邊距為"auto"

盒子必須指定寬度

常用寫法：margin: 0 auto;

行内元素或者行内塊元素水準居中給其父元素添加 text-align:center;即可

外邊距合并：在使用margin定義塊元素的垂直外邊距時，可能會出現外邊距合并

嵌套塊元素塌陷解決方法：

可以為父元素定義上邊框

為父元素定義上内邊距

為父元素添加overflow：hidden;

清除内外邊距：網頁元素很多都會帶有預設的内外邊距，而不同浏覽器的預設值不一緻，是以我們在布局前，首先要清楚内外邊距

注意：行内元素盡量隻設定左右内外邊距

清除無序清單的小圓點

很常用！加上這行代碼可以去掉小圓點

圓角邊框:把盒子變成圓角的

通過設定radius（半徑）的值來确定圓弧的大小，用該半徑的圓去與盒子的兩條相鄰邊切

是以數值越大弧度越明顯

要想要做出圓形的盒子，先設定一個正方形盒子，在讓半徑等于邊長的一半

圓角矩形：把半徑設為盒子高度的一半

注意：border-radius可以設定多個值，4個數值是從左上角開始，順時針的4個角的弧度

盒子陰影：用box-shadow來給盒子添加陰影

值

描述

h-shadow

必寫，水準陰影的距離

v-shadow

必寫，垂直陰影的距離

blur

模糊距離（虛實）

spread

陰影的尺寸

color

陰影顔色，一般用半透明的

inset

内陰影還是外陰影

注意：盒子陰影不占用空間，不影響其他盒子的排列

文字陰影：用text-shadow來添加陰影

和盒子陰影寫法一樣