CSS基础(part12)--盒子模型之外边距
學習筆記，僅供參考，有錯必糾
參考自：某不知名網課
文章目錄
- 盒子模型
- 外邊距
- 屬性設置
- 塊級盒子水平居中
- 文字居中以及盒子居中
- 插入圖片和背景圖片的區別
- 清除元素的默認內外邊距
- 外邊距合并(只存在垂直方向合并)
盒子模型
外邊距
margin屬性用于設置外邊距， margin就是控制盒子和盒子之間的距離：
屬性設置
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin值的簡寫形式代表意思和padding完全相同。
塊級盒子水平居中
如果想要讓一個盒子水平居中，必須指定盒子寬度(width)，然后就給左右的外邊距都設置為auto，比如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 600px;height: 400px;background-color: pink;margin: 0 auto;}</style> </head> <body><div></div> </body> </html>- 讓盒子居中的3種寫法
文字居中以及盒子居中
讓盒子內的文字水平居中可以使用 text-align: center， 該css代碼還可以讓行內元素和行內塊元素居中對齊，比如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 400px;height: 150px;background-color: pink;margin: 0 auto;text-align: center;}span {color: blue;}input {border: none;border-bottom: 1px dashed red; }</style> </head> <body><div>我是文字<span>我是span標簽</span><input type="text"></div> </body> </html>頁面：
插入圖片和背景圖片的區別
如果我們是以插入的形式展示圖片，那么移動位置只能靠調整盒模型的padding和margin屬性;
如果我們是將圖片作為背景的形式展示，那么只能通過 設置background-position屬性移動圖片位置。
- 舉個例子(插入圖片)
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.demo {width: 500px;height: 300px;border: 2px solid red;}.demo img {width: 100px;height: 100px;margin: 50px;}</style> </head> <body><div class="demo"><img src="image/TX.jpg" alt=""></div> </body> </html>頁面：
- 舉個例子(背景)
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.demo,.back {width: 500px;height: 300px;border: 2px solid red;}.demo img {width: 100px;height: 100px;margin: 50px;}.back {background: url(image/TX.jpg) no-repeat;background-position: 50px 50px;}</style> </head> <body><div class="demo"><img src="image/TX.jpg" alt=""></div><div class="back"></div> </body> </html>頁面：
清除元素的默認內外邊距
制作網頁時，我們需要將元素的默認內外邊距清除，css代碼：
* {padding:0; /* 清除內邊距 */margin:0; /* 清除外邊距 */ }對于行內元素，為了照顧兼容性，則 盡量只設置左右內外邊距， 不要設置上下內外邊距，例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>* {padding:0; /* 清除內邊距 */margin:0; /* 清除外邊距 */ }span {margin-left: 30px;/* margin-right: 50px; */background-color: pink;}</style> </head> <body><p>這里是安徽財經大學</p><span>統計與應用數學學院</span><span>應用統計</span> </body> </html>頁面：
外邊距合并(只存在垂直方向合并)
- 相鄰塊元素垂直外邊距的合并
當垂直方向的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是取兩個值中的較大者，這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）：
- 嵌套塊元素垂直外邊距的合并(塌陷)
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者：
如果我們不想出現塌陷的情況，可以采用以下3種解決方案：
-
可以為父元素定義上邊框
-
可以為父元素定義上內邊距
-
可以為父元素添加overflow:hidden
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 500px;height: 500px;background-color: pink;overflow: hidden;}.son {width: 200px;height: 200px;background-color: purple;margin-top: 100px;}</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part12)--盒子模型之外边距的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TP-Link TL-WDR6320 V
- 下一篇： CSS 基本样式