box盒子
它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。
盒子模型的組成：盒子內容 + 盒子的內邊距(盒子內容到邊框的填充) + 盒子邊框 + 盒子外邊距
2.1 邊框
border-style 邊框樣式
/*border-style: solid;*/
/*border-style: dotted;*/
/*border-style: dashed;*/
border-style
: double;
/*border-color: green;*/
/*border-color: #008000;*/
border-color
:rgb
(255,0,0)
;
border-width
: 1px;
/* 所有的 */
/*border-color: red;*/
/* 上下 左右 */
/*border-color: red green;*/
/* 上 左右 下 */
border-color
: red green yellow;
/* 順時針：上右下左 */
/*border-color: red green black pink;*/
border-top-style
border-right-style
border-bottom-style
border-left-style
另外css還給提供了統一的邊框設定方式：
/* 可以同時設定顏色、粗細、樣式 */
border
: 1px solid red;
border-top：1px solid red;
border-bottom：***;
2.2 內邊距
padding(填充)：它可以調整邊框到元素內容的距離。
padding-top
padding-right
padding-bottom
padding-left
padding：它可以統一設定不同方向的距離
/*padding: 50px;*/
/* 上下 左右 */
/*padding: 50px 20px;*/
/* 上 左右 下 */
/*padding: 10px 20px 30px;*/
/* 上右下左 */
padding
: 10px 20px 30px 40px;
margin：設定元素的外邊距，也就是和其他元素之間的距離
margin-top
margin-ritght
margin-bottom
margin-left
margin
2.4 盒子尺寸
box-sizing：設定盒子模型尺寸計算規則的。
content-box(預設值)：計算盒子尺寸時，只計算盒子元素內容，不包括內邊距和邊框。
border-box：計算盒子尺寸時，不止計算盒子元素內容，還包括內邊距和邊框。(大小一共就那麼大，所以到時候會調整元素內容的空間)
2.5 標準文件流調整-display
預設情況下，在標準文件流中，元素是分為兩大類的。
塊元素：獨佔一行，擁有完整的盒子模型設定
行內/內聯元素：如果有多個內聯，會排在一行，且盒子模型不完整。它的大小主要由內容撐開。
實際上之所以出現這種效果，就是因為dispaly屬性，塊元素預設為block，而內聯元素預設為inline。
如果想將塊元素和內聯元素進行轉換，可以通過此屬性。
display：
none 隱藏
block 塊元素的預設值
inline 內聯元素的預設值
inline-block 行內塊元素 (但是有不可控的間隙)
float：能夠實現塊元素在一行並列布局展示。
none 預設值
left 左浮動
right 右浮動
當浮動出現後，會導致：
兄弟元素受到浮動影響，導致顯示錯亂
可以通過clear清除浮動，解除浮動影響。
如果都浮動了，父級元素會產生邊框塌陷
利用新增空子元素解決
在父級元素最後新增乙個子元素，然後將其清除兩側浮動。
```css
/* 表示在元素最後面設定資訊 */
.father:after
```
利用overflow(溢位)特性
當overflow設定的標籤沒有設定高度時，會自動跟隨溢位元素進行高度適應。
position：定位
static 預設的
relative 相對的
設定它，會保留原有的位置，然後通過方向調整可以定位位置，但是它的定位偏移是相對於原來的位置
absolute 絕對的
設定它之後，原有位置會消除，但是它缺省會保留在原有位置上方，它後面的元素會向上偏移。
使用方向調整，預設情況下會相對於瀏覽器邊框進行偏移，
當然如果它的某一級父元素設定過定位，則會相對於父級元素偏移。
往往它會結合著relative使用
fixed 固定的
「狗皮膏藥」 固定定位
CSS高階操作
box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1 邊框 例如 另外css還給提供了統一的邊框設定方式 可以同時設定顏...
CSS高階操作
box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過布局盒子資訊來進行 盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1邊框 border style solid border style...
CSS高階操作
css高階操作box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看作是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.掌握盒子模型的使用 2.1邊框 border syle邊...