【CSS】CSS 頁面布局：盒子模型（內容區、邊框、內邊距、外邊距）

盒子模型

頁面中所有元素都可以看做是一個盒子，包含“內容”、“邊框”（圖形邊框）、“內邊距”和“外邊距”四部分。

 

內容區

主要有三個屬性：

• width
• height
• overflow

當 content 中的信息太多，超出內容區所占范圍時，可通過 overflow 屬性來指定溢出內容的處理方式。

取值	描述
visible	默認值，溢出內容不會被裁剪，會呈現在元素框外。
hidden	溢出內容將不可見。
scroll	溢出內容會被裁減，但可通過滾動條查看隱藏部分。
auto	由瀏覽器決定如何處理溢出部分。

 

邊框

取值	描述
border-top : 1px solid #6699cc	上框線
border-bottom : 1px solid #6699cc	下框線
border-left : 1px solid #6699cc	左框線
border-right : 1px solid #6699cc	右框線
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color : #369	設置上框線top顏色
border-top-width :1px	設置上框線top寬度
border-top-style : solid	設置上框線top樣式
統一設置邊框樣式
border-color : #369	設置框線顏色
border-width : 1px（上下左右） border-width : 1px 2px（上下  左右） border-width : 1px 2px 3px（上  左右  下） border-width : 1px 2px 3px 4px（上  右  下  左）	設置框線寬度
border-style : solid	設置框線樣式

其中，邊框樣式有如下選擇：

取值	描述
solid	實線框
dotted	虛線框
double	雙線框
groove	立體內凸框
ridge	立體浮雕框
inset	凹框
outset	凸框

 

圓角邊框
border-top-left-radius : 8px（水平半徑=垂直半徑） border-top-left-radius : 8px 20px（水平半徑  垂直半徑）	邊框左上角樣式
border-top-right-radius : 8px（水平半徑=垂直半徑） border-top-left-radius : 8px 20px（水平半徑  垂直半徑）	邊框右上角樣式
border-bottom-left-radius : 8px（水平半徑=垂直半徑） border-bottom-left-radius : 8px 20px（水平半徑  垂直半徑）	邊框左下角樣式
border-bottom-right-radius : 8px（水平半徑=垂直半徑） border-bottom-right-radius : 8px 20px（水平半徑  垂直半徑）	邊框右下角樣式
統一設置圓角樣式
border-radius : 10px（左上.右上.右下.左下） border-radius : 10px 20px（左上.右下  右上.左下） border-radius : 10px 20px 30px（左上  右上.左下  右下） border-radius : 10px 20px 30px 40px（左上  右上  右下  左下）	水平半徑=垂直半徑
border-radius : 10px/11px（左上.右上.右下.左下） border-radius : 10px 20px/21px（左上.右下  右上.左下） border-radius : 10px 20px/21px 30px（左上  右上.左下  右下） border-radius : 10px 20px 30px/32px 40px（左上  右上  右下  左下）	水平半徑 / 垂直半徑

 

邊框陰影
box-shadow : 10px 6px 10px 5px gray insert	依次為： h-shadow  v-shadow [blur] [spread] [color] [inset]
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色
inset	可選。內側陰影

 

圖像邊框

取值	描述
border-image : source slice width outset repeat|initial|inherit;
以上是建議書寫方式,但也可以使用常規的方式 如下:
	指定邊框圖像的路徑
	對 border.jpg 進行裁剪，有 4 個值， 分別代表上，右，底，左 裁剪距離
	裁剪后的四周的八個切片會根據 border-image-width 設置的大小自動縮放， 顯示到 border 對應的位置
	邊框向外擴展的寬度。 邊框實際寬度不會變，只是向外擴展，所以就導致內容區面積擴大。
	用於設置圖像邊界是否拉伸（stretch）  重復（repeat）  鋪滿（round） round 會壓縮（或伸展）圖片大小使其正好在區域內顯示， 而repeat是不管三七二十一直接重復的，而且是居中重復。

 

 

內邊距

取值	描述
padding : 10px 10px 10px 10px	分別為 上、右、下、左 邊距
padding-top : 10px	上內邊距
padding-right : 10px	右內邊距
padding-bottom : 10px	下內邊距
padding-left : 10px	左內邊距

 

外邊距

取值	描述
margin : 10px 10px 10px 10px	分別為 上、右、下、左 邊距
margin-top : 10px	上外邊距
margin-right : 10px	右外邊距
margin-bottom : 10px	下外邊距
margin-left : 10px	左外邊距

 

外邊距合並問題

1. 當一個元素出現在 另一個元素上面時，第一個元素的下邊矩與第二個元素的上邊距將發生合並。

 2. 當一個元素包含在另一個元素中，父元素沒有內邊距和邊框，它們的上下外邊距會發生合並。

 

3. 空元素只包含外邊距而無邊框和填充時，上外邊距與下外邊距就會碰到一起，發生合並。

 

 合並后的外邊距再次遇到其他元素的外邊距時，還會發生合並操作。