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