這篇文章主要講解了“css的盒子模型有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css的盒子模型有哪些”吧！

成都創(chuàng)新互聯(lián)公司2013年至今，先為林甸等服務(wù)建站，林甸等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為林甸企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。

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

看透網(wǎng)頁布局的本質(zhì)

網(wǎng)頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

行內(nèi)元素比如 文字 類似牛奶，也需要一個盒子把他們裝起來，我們前面學(xué)過的雙標簽都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網(wǎng)頁布局的本質(zhì)：把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。

CSS 其實沒有太多邏輯可言 ， 類似我們小時候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。

盒子模型（Box Model）

這里略過 老舊的ie盒子模型（IE6以下），對不起，我都沒見過IE5的瀏覽器。

首先，我們來看一張圖，來體會下什么是盒子模型。

所有的文檔元素（標簽）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。

語法：

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

邊框?qū)傩浴O(shè)置邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

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

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

dashed：邊框為虛線  

dotted：邊框為點線

double：邊框為雙實線

盒子邊框?qū)懛偨Y(jié)表

表格的細線邊框

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

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

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

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

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

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。

• padding-top:上內(nèi)邊距

• padding-right:右內(nèi)邊距

• padding-bottom:下內(nèi)邊距

• padding-left:左內(nèi)邊距

注意： 后面跟幾個數(shù)值表示的意思是不一樣的。

大致理解順序：

外邊距（margin）

margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。

• margin-top:上外邊距

• margin-right:右外邊距

• margin-bottom:下外邊距

• margin-left:上外邊距

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

取值順序跟內(nèi)邊距相同。

外邊距實現(xiàn)盒子居中

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

1. 必須是塊級元素。

2. 盒子必須指定了寬度（width）

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

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

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

文字盒子居中圖片和背景區(qū)別

1. 文字水平居中是 text-align: center

2. 盒子水平居中 左右margin 改為 auto

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

3. 插入圖片 我們用的最多 比如產(chǎn)品展示類

4. 背景圖片我們一般用于小圖標背景 或者 超大背景圖片

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 */
	}

清除元素的默認內(nèi)外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，可使用如下代碼清除元素的默認內(nèi)外邊距：

* {
   padding:0;         /* 清除內(nèi)邊距 */
   margin:0;          /* 清除外邊距 */}

注意： 行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。 內(nèi)邊距，在ie6等低版本瀏覽器也會有問題。

我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。

外邊距合并

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

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

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

解決方案： 避免就好了。

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

對于兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。

解決方案：

1. 可以為父元素定義1像素的上邊框或上內(nèi)邊距。

2. 可以為父元素添加overflow:hidden。

content寬度和高度

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

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

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

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

注意：

1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素?zé)o效（ img 標簽和 input除外）。

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

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

盒子模型布局穩(wěn)定性

開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

答案是： 其實他們大部分情況下是可以混用的。 就是說，你用內(nèi)邊距也可以，用外邊距也可以。 你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：

按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。

  width >  padding  >   margin

原因：

1. margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。

2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。

3. width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內(nèi)/外陰影；

1. 前兩個屬性是必須寫的。其余的可以省略。

2. 外陰影 (outset) 但是不能寫 默認 想要內(nèi)陰影 inset

p {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大?。?nbsp;陰影顏色  內(nèi)/外陰影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			}

盒子基本訓(xùn)練案例

 
	
	
	
		/* 1. 盒子案例 */
		p {
			width: 300px;
			height: 300px;
			border-width: 10px;
			border-color: yellow;
			border-style: solid;/*實線*/			
			border-style: dashed;/*虛線*/			
			border-style: dotted;/*點線*/			
			/*border: 1px solid blue;*/

			border-top: 10px solid green;
			border-bottom: 5px solid red;
			border-left: : 15px solid #daaa;
			border-right: : 30px dashed yellow;
		}
		
		/* 2.表單邊框 */
		.inputtest input 
		{
			border:5px 3px 10px 26px dotted	purple	;	
		}
		.inputtest button {

		width:50px;
		height: 100px;
		border: 1px solid purple;

		}

		/*  3. 表格邊框 */
		table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
			}
	td {
		border: 1px solid red;
		text-align: 	center;		
		}
	table, td {
		border-collapse: collapse;  /*合并相鄰邊框*/
	}
	
	
 盒子 
	 
		表單 
		用戶名: 
		按鈕
	

		
		
			天王蓋地虎
			天王蓋地虎
			天王蓋地虎
		
		
			小雞燉蘑菇
			小雞燉蘑菇
			小雞燉蘑菇
		
	

導(dǎo)航欄案例※

 
	
	
	
	
		首頁
		新聞客戶端
		設(shè)為首頁
		極限挑戰(zhàn)
	

新聞內(nèi)容布局美化案例※

	
	
	
  
  		
最新文章/New Articles
  		

  			
北京招聘網(wǎng)頁設(shè)計，平面設(shè)計，php
  			
體驗javascript的魅力
  			
jquery世界來臨
  			
網(wǎng)頁設(shè)計師的夢想
  			
jquery中的鏈式編程是什么
  		
  

感謝各位的閱讀，以上就是“css的盒子模型有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css的盒子模型有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！