CSS 框模型概述

元素內是要展示的內容，里面的padding、margin、border都會參與計算盒子的大小，例如：有一個盒子大小為100px，外邊距10px，內邊距5px，實際要展示的內容只有70px

為了更方便地控制網頁中的元素，最好清除元素的默認內外邊距：

* {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
}

content寬度和高度計算

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以為不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。

大多數瀏覽器，如Firefox、IE6及以上版本都采用了W3C規范，符合CSS規范的盒子模型的總寬度和總高度的計算原則是：

/*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height為內容高度）
  Element Width = content width + padding + border （Width為內容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標簽和 input除外）。

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合並的情況。

3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子邊框（border）

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框為單實線(最為常用的)

dashed：邊框為虛線  

dotted：邊框為點線

double：邊框為雙實線

盒子邊框寫法總結表


設置內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度樣式顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度樣式顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度樣式顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度樣式顏色;
樣式綜合設置	border-style:上邊 [右邊下邊左邊];	none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設置	border-width:上邊 [右邊下邊左邊];	像素值
顏色綜合設置	border-color:上邊 [右邊下邊左邊];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設置	border:四邊寬度四邊樣式四邊顏色;

表格的細線邊框

表格線變粗原因是因為邊框重疊

table{ border-collapse:collapse; } collapse 單詞是合並的意思

border-collapse:collapse; 表示邊框合並在一起。

圓角邊框(CSS3)

語法格式：

border-radius: 左上角  右上角  右下角  左下角;

案例:

<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		div:first-child {  /* 結構偽類選擇器 選親兄弟 */
			border-radius: 10px;  /*  一個數值表示4個角都是相同的 10px 的弧度 */ 
		}

		div:nth-child(2) {
			/*border-radius: 100px;    取寬度和高度 一半  則會變成一個圓形 */
			border-radius: 50%;   /*  100px   50% 取寬度和高度 一半  則會變成一個圓形 */
		}

		div:nth-child(3) {
			border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 對角線 */
		}
		
		div:nth-child(4) {
			border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
		}
		div:nth-child(5) {
			border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
		}
		div:nth-child(6) {
			border-radius: 100px;  
			height: 100px; 
		}
		div:nth-child(7) {
			border-radius: 100px 0;  
		}	
        </style>

內邊距（padding）

padding屬性用於設置內邊距。是指邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

值的個數	表達意思
1個值	padding：上下左右邊距比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距左右邊距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3個值	padding：上邊距左右邊距下邊距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4個值	padding:上內邊距右內邊距下內邊距左內邊距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 順時針

外邊距（margin）

margin屬性用於設置外邊距。設置外邊距會在元素之間創建“空白”，這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距右外邊距下外邊距左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

必須是塊級元素。
盒子必須指定了寬度（width）

然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁布局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

文字水平居中是 text-align: center
盒子水平居中左右margin 改為 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改為 auto 就闊以了 */

插入圖片我們用的最多比如產品展示類
背景圖片我們一般用於小圖標背景或者超大背景圖片

section img {  
		width: 200px;/* 插入圖片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入當圖片也是一個盒子 */
	}

aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
	
		background-size: 200px 210px; /*  背景圖片更改大小只能用 background-size */
		background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
	}