css的盒子模型有哪些

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

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

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

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

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

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

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

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

盒子模型（Box Model）

這里略過(guò) 老舊的ie盒子模型（IE6以下），對(duì)不起，我都沒(méi)見(jiàn)過(guò)IE5的瀏覽器。

首先，我們來(lái)看一張圖，來(lái)體會(huì)下什么是盒子模型。

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

盒子邊框（border）

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

語(yǔ)法：

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

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

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

none：沒(méi)有邊框即忽略所有邊框的寬度（默認(rèn)值）

solid：邊框?yàn)閱螌?shí)線(最為常用的)

dashed：邊框?yàn)樘摼€  

dotted：邊框?yàn)辄c(diǎn)線

double：邊框?yàn)殡p實(shí)線

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

表格的細(xì)線邊框

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

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

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

圓角邊框(CSS3)

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

語(yǔ)法格式：

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)邊距

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

大致理解順序：

外邊距（margin）

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

• margin-top:上外邊距

• margin-right:右外邊距

• margin-bottom:下外邊距

• margin-left:上外邊距

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

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

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

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

1. 必須是塊級(jí)元素。

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

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

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

.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. 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片

section img {  
		width: 200px;/* 插入圖片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
	}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 */
	}

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

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

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

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

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

外邊距合并

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

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

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

解決方案： 避免就好了。

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

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

解決方案：

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

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

content寬度和高度

使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。

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

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

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

注意：

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

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

3、如果一個(gè)盒子沒(méi)有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。

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

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

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

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

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

  width >  padding  >   margin

原因：

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

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

3. width 沒(méi)有問(wèn)題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來(lái)做。

盒子陰影

語(yǔ)法格式：

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

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

2. 外陰影 (outset) 但是不能寫 默認(rèn) 想要內(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)練案例

 <!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>盒子訓(xùn)練</title>
	<style type="text/css">
		/* 1. 盒子案例 */
		p {
			width: 300px;
			height: 300px;
			border-width: 10px;
			border-color: yellow;
			border-style: solid;/*實(shí)線*/			
			border-style: dashed;/*虛線*/			
			border-style: dotted;/*點(diǎn)線*/			
			/*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;  /*合并相鄰邊框*/
	}
	</style></head><body>
	<p> 盒子 </p>
	<p class="inputtest"> 
		表單 
		用戶名: <input type="text">
		<button>按鈕</button>
	</p>
		<table cellpadding="0" cellspacing="0">
		<tr>
			<td>天王蓋地虎</td>
			<td>天王蓋地虎</td>
			<td>天王蓋地虎</td>
		</tr>
		<tr>
			<td>小雞燉蘑菇</td>
			<td>小雞燉蘑菇</td>
			<td>小雞燉蘑菇</td>
		</tr>
	</table></html>

導(dǎo)航欄案例※

 <!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.nav {
		height: 50px;/* 高度是 50*/
		border-top: 3px solid #FF8500;  /*上邊框是 3像素*/  
		border-bottom: 1px solid #EDEEF0; /*下邊框是 1像素*/
		background-color: #FCFCFC; /*背景顏色*/
	}
	.nav a {   /*鼠標(biāo)正常時(shí)候的樣子*/
		height: 50px;
		line-height: 50px;
		/*background-color: pink;*/
		display: inline-block; /*轉(zhuǎn)換*/
		color: #4c4c4c;
		text-decoration: none;
		/*padding-left: 18px;
		padding-right: 18px;*/
		padding: 0 18px;
		font-size: 14px;

	}

	.nav a:hover {
		background-color: #edeef0;
		color: #ff8400;
	}


	</style></head><body>
	<p class="nav">
		<a href="#">首頁(yè)</a>
		<a href="#">新聞客戶端</a>
		<a href="#">設(shè)為首頁(yè)</a>
		<a href="#">極限挑戰(zhàn)</a>
	</p></body></html>

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

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*p {
		width: 100px;
		height: 100px;
		border: 2px solid red;
		padding: 20px;
		margin: 30px;
	}*/
	* {
		margin: 0;
		padding: 0;  /*清除內(nèi)外邊距*/
	}
	body {
		background-color: #eee;
	}
	.article {
		width: 380px;
		height: 263px;
		border: 1px solid #ccc;
		margin: 100px;
		padding: 20px 15px 0;  /*上 20  左右  15  下  0*/
	}
	.article h5 {
		color: #202026;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		/*margin-bottom: 12px;*/
	}
	li {
		list-style: none;   /*取消li 前面的小點(diǎn)*/
	}
	.article ul li {
		height: 38px;
		line-height: 38px;
		border-bottom: 1px dashed #ccc; /* 1像素的虛線邊框*/
		text-indent: 2em;
	}
	.article  a  {
		font-size: 12px;
		color: #333;
		text-decoration: none;
	}
	.article a:hover {
		text-decoration: underline;  /*添加下劃線*/
	}
	.article ul {
		margin-top: 12px;
	}
	</style></head><body>
  <p class="article">
  		<h5>最新文章/New Articles</h5>
  		<ul>
  			<li><a href="#">北京招聘網(wǎng)頁(yè)設(shè)計(jì)，平面設(shè)計(jì)，php</a></li>
  			<li><a href="#">體驗(yàn)javascript的魅力</a></li>
  			<li><a href="#">jquery世界來(lái)臨</a></li>
  			<li><a href="#">網(wǎng)頁(yè)設(shè)計(jì)師的夢(mèng)想</a></li>
  			<li><a href="#">jquery中的鏈?zhǔn)骄幊淌鞘裁?lt;/a></li>
  		</ul>
  </p></body></html>

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