2.對於盒子模型來說，通常是由：內容模組、內邊距、邊框、外邊距四部分組成，對應現實生活中的蛋糕盒，我們可以發現：蛋糕盒裡面的蛋糕就相當於內容模組，蛋糕和包裝盒之間的距離我們可以認為是內邊距，包裝盒那層薄薄的紙可以認為是邊框，蛋糕盒和其他蛋糕盒的距離可以認為是外邊距。
css盒子模型
3.所以對於盒子模型來說，它的組成就有：內容
border
padding
margin
4.首先介紹盒子模型中的border：
盒子模型的border（邊框）是由：
border-style:(邊框的樣式) solid(實線)、dotted(點線)、dashed(虛線)
border-width:(邊框的粗細) 1px...
border-color:(邊框的顏色) red/#rgb/rgba()
注意border的屬性是復合屬性，我們在使用的時候可以這樣：
border: 1px solid red;
border:none;
5.盒子模型中的內邊距padding:
盒子模型的padding是由：
padding-top:
padding-bottom:
padding-left:
padding-right:
注意：padding也是復合屬性，使用的時候可以這樣：
padding:0 0 0 0(後面四個數值分別代表：上 右 下 左)。並且在使用padding
的時候會影響盒子本身的寬和高。
6.盒子模型中的外邊距margin:
盒子模型的margin是由：
margin-top:
margin-bottom:
margin-left:
margin-right:
注意：margin也是復合屬性，使用的方法和padding的方式是一樣的。
margin:0 0 0 0(順序仍然是：上 、右 、下 、左)。但是在使用margin的時候我們需要注意一些問題：
如果我們對父元素的第乙個子元素設定margin-top，那麼父元素也會受到影響即也會使外上邊距移動相同的距離。
如果想要消除這種影響，最常見的方法是：
1.對父元素設定padding
2.對父元素設定overflow:hidden
6. 行內元素沒有上下外邊距屬性
塊級元素的上下外邊距取最大值
行內塊級元素上下邊距是累加的
7.乙個盒子的實際大小：
width+padding+border
乙個盒子的占用空間：
width+padding+border+margin
8.在css中我們常常遇到設定水平居中的情況：
1.對於定寬塊級元素，設定他們的居中可以這樣：margin:0 auto來實現。
注意這樣的情況要有兩個前提條件：
1.定寬 2.塊級元素
2.如果要對元素內部的文字或者設定居中，可以通過text-align:center來實現。
9.同樣的我們也會遇到設定豎直方向居中的情況：
1.對於父元素的高度確定的情況，可以設定：line-height:height;來實現
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS屬性 盒子模型 border屬性
border 表示盒子的邊框 分為四個方向 top 上面 right 右面 bottom 下面 left 左面 取值方式 border top border right border bottom border left 每個邊都包含三種屬性 color 顏色 width 粗細 style 樣式 寫...
CSS盒子模型相關屬性
在css屬性中，boder style屬性用於設定邊框樣式 語法結構 border style 上邊 右邊 下邊 左邊 在設定邊框樣式時既可以針對四條邊分別設定，也可以綜合設定四條邊的樣式。boder style屬性的常用屬性值有4個，分別用於定義不同的顯示樣式，具體如下。使用boder style...