屬性：border-width、border-style、border-color
簡寫：border:1px solid red; ※
注意：邊框在盒子外部，會影響盒子的大小
合併相鄰邊框：border-collapse:collapse
內容：可以放文字，也可以放盒子
內邊距：邊框與內容的距離
屬性：padding-left、padding-right、padding-top、padding-bottom
屬性簡寫（復合寫法）：
padding:10px; //上下左右都有10畫素內邊距
padding:10px 20px; //上下10畫素，左右20px
padding:10px 20px 30px; //上10畫素，左右20畫素，下30畫素
padding:10px 10px 10px 10px; //上右下左順時針
注意：會將盒子撐大，影響盒子大小 ※
好處：盒子內字數不同，用padding可以很好的控制盒子大小與字型間隔，設定導航欄就非常合適。
外邊框：盒子和盒子間距離
屬性：margin-left、margin-right、margin-top、margin-bottom
屬性簡寫（復合寫法）：同padding
典型應用：
※ 塊級盒子水平居中（margin:0 auto;）
※ 行內元素或行內塊元素水平居中方法，給其父元素新增 text-align:center 即可。
6.1 相鄰塊元素垂直外邊距合併（上下兄弟）
例：上盒子：margin-bottom:100px;
下盒子：margin-top:200px;
現象：兩個盒子間隔並不是300px，而是200px，這種現象稱之為外間距合併問題。（取較大值）
解決方案：盡量只給乙個盒子定義外邊距。
6.2 巢狀塊元素垂直外邊框的塌陷（父子）
例：子盒子：margin-top:100px;
現象：父盒子並沒新增 margin-top 屬性，父元素卻會與子元素一同 margin-top:100px。
解決方案：
1）父元素指定上邊框：border:1px solid transparent;（透明）
2）父元素定義上內邊距：padding:1px;
3）父元素新增：overflow:hidden
4）浮動
5）固定
6）絕對定位
語法：border-radius:10px;
圓角矩形：用圓形擷取矩形四個角之後，形成圓角矩形。
border-radius: 左上角，右上角，右下角，左下角；//同時設定對個值
做圓：width:100px; height:200px;
border-radius:50px; // 50%也可以 高度的一半
做心：
.left
.right
h-shadow
必需。水平陰影位置。允許為負
v-shadow
必需。垂直陰影位置。允許為負
blur
可選。模糊距離。（虛實）
spread
可選。陰影的尺寸。
color
可選。陰影的顏色。請參閱css顏色值。
inset
可選。將外部陰影（outset）改為內部陰影。
注意：1）陰影不占用空間，即對布局沒有影響。
2）預設是**影（outset），但是不可以寫這個單詞，否則會導致陰影無效。
相關補充：文字陰影（text-shadow:h-shadow v-shadow blur color）
1）清除缺省內外編劇
缺省內外邊距存在原因是，不同瀏覽器自帶缺省內外邊距，且數值不同。
解決方案： *
2）行內元素不設上下邊距
行內元素盡量只設定左右內外邊距，上下邊距設定也不會有效果。
盒子模型（CSS重點）
其實，css就三個大模組 盒子模型 浮動 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。border...
盒子模型（CSS重點）
大致了解盒子模型 把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都是由 元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成 2.1盒子邊框 border 語法 border border width border style bord...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...