1. 程式人生 > >第六章 盒子模型

第六章 盒子模型

idt padding 模型 pre 外邊距 true light borde 陰影

一.邊框
	
	1.邊框顏色		
		border-color	邊框顏色(可以設置上邊框,如:border-top-color,也可以整體設置,但是要註意順序)
		
	2.邊框粗細		
		border-width	邊框粗細(可以設置上邊框,如:border-top-width,也可以整體設置,但是要註意順序)
		
	2.邊框樣式		
		border-style	邊框樣式(可以設置上邊框,如:border-top-style,也可以整體設置,但是要註意順序)
		
二.外邊距
	1.margin   盒子距離瀏覽器的距離		(可以設置上外邊距,如:margin-top,也可以整體設置,但是要註意順序)
	
	2.居中	margin: 0px auto

三.內邊距	
	1.padding   內容到盒子的距離		(可以設置上內邊距,如:padding-top,也可以整體設置,但是要註意順序)
	

四.盒子模型的尺寸
	
	尺寸默認:padding+margin+wigth+border
	
	box-sizing	方便計算盒子模型尺寸(默認為content-box,border-box代表隨著內容的寬度高度變化而變化)

五.圓角
	
	border-radius	圓角(左上,右上,右下,左下)
	/*如果想要一個圓,那麽必須滿足寬和高一致,圓角取寬度或者高度的二分之一*/
	/*如果想要半圓,那麽必須滿足寬是高的2倍,圓角取寬度的二分之一*/
	/*如果想要四分之一圓,那麽必須滿足寬和高相等,圓角取寬度相等值*/
	
六.盒子陰影
	box-shadow	默認為外陰影,內陰影為inset
	box-shadow: 5px -5px 20px black;

  

第六章 盒子模型