盒子模型（CSS重點）

其實，CSS就三個大子產品：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝内容的容器。每個矩形都由元素的内容、内邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁布局的本質

網頁布局中，我們是如何把裡面的文字，圖檔，按照美工給我們的效果圖排列的整齊有序呢？

行内元素比如文字類似牛奶，也需要一個盒子把他們裝起來，我們前面學過的雙标簽都是一個盒子。有了盒子，我們就可以随意的，自由的，擺放位置了。CSS 其實沒有太多邏輯可言，類似我們小時候玩的積木,我們可以自由的，随意的擺放出我們想要的效果。

看透網頁布局的本質：把網頁元素比如文字圖檔等等，放入盒子裡面，然後利用CSS擺放盒子的過程，就是網頁布局。

盒子邊框（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:四邊寬度四邊樣式四邊顔色;

表格的細線邊框

以前學過的html表格邊框很粗，這裡隻需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

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

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

圓角邊框(CSS3)

從此以後，我們的世界不隻有矩形。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，就可使塊級元素水準居中。

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

文字盒子居中圖檔和背景差別

文字水準居中是 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 */
	}

清除元素的預設内外邊距

為了更友善地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的預設内外邊距：

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

注意：行内元素是隻有左右外邊距的，是沒有上下外邊距的。内邊距，在ie6等低版本浏覽器也會有問題。

我們盡量不要給行内元素指定上下的内外邊距就好了。

外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。

相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

CSS學習之盒子模型盒子模型（CSS重點）

解決方案：避免就好了。

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關系的塊元素，如果父元素沒有上内邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。

CSS學習之盒子模型盒子模型（CSS重點）

解決方案：

可以為父元素定義1像素的上邊框或上内邊距。
可以為父元素添加overflow:hidden。

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 不會影響本盒子大小。

盒子模型布局穩定性

開始學習盒子模型，同學們最大的困惑就是，分不清内外邊距的使用，什麼情況下使用内邊距，什麼情況下使用外邊距？

答案是：其實他們大部分情況下是可以混用的。就是說，你用内邊距也可以，用外邊距也可以。你覺得哪個友善，就用哪個。

但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：

按照優先使用寬度（width）其次使用内邊距（padding）再次外邊距（margin）。

width >  padding  >   margin

原因：

margin 會有外邊距合并還有 ie6下面margin 加倍的bug（讨厭）是以最後使用。
padding 會影響盒子大小，需要進行加減計算（麻煩）其次使用。
width 沒有問題（嗨皮）我們經常使用寬度剩餘法高度剩餘法來做。

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其預設值，其讓元素維持W3C的标準Box Mode

2、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width裡面的

注：上面的标注的width指的是CSS屬性裡設定的width: length，content的值是會自動調整的。

div:first-child {
			width: 200px;
			height: 200px;
			background-color: pink; 
			box-sizing: content-box;  /*  就是以前的标準盒模型  w3c */
			padding: 10px;
			border: 15px solid red;
			/* 盒子大小為 width + padding + border   content-box:此值為其預設值，其讓元素維持W3C的标準Box Mode */
		}
		div:last-child {
			width: 200px;
			height: 200px;
			background-color: purple;
			padding: 10px;
			box-sizing: border-box;   /* padding border  不撐開盒子 */
			border: 15px solid red;
			/* margin: 10px; */
			/* 盒子大小為 width    就是說  padding 和 border 是包含到width裡面的 */
}

盒子陰影

文法格式：

box-shadow:水準陰影 垂直陰影 模糊距離 陰影尺寸 陰影顔色  内/外陰影；

前兩個屬性是必須寫的。其餘的可以省略。
外陰影 (outset) 但是不能寫預設想要内陰影 inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水準位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顔色  内/外陰影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

CSS學習之盒子模型盒子模型（CSS重點）

盒子模型（CSS重點）

看透網頁布局的本質

盒子邊框（border）

盒子邊框寫法總結表

表格的細線邊框

圓角邊框(CSS3)

内邊距（padding）

外邊距（margin）

外邊距實作盒子居中

文字盒子居中圖檔和背景差別

清除元素的預設内外邊距

外邊距合并

相鄰塊元素垂直外邊距的合并

嵌套塊元素垂直外邊距的合并

content寬度和高度

盒子模型布局穩定性

CSS3盒模型

盒子陰影

繼續閱讀

CSS的僞元素和僞類的差別

css僞類與僞元素差別

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”