css的盒子模型有哪些

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

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

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)見過(guò)IE5的瀏覽器。

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

css的盒子模型有哪些
所有的文檔元素（標(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é)表


設(shè)置內(nèi)容	樣式屬性	常用屬性值
上邊框	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:寬度樣式顏色;
樣式綜合設(shè)置	border-style:上邊 [右邊下邊左邊];	none無(wú)（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線
寬度綜合設(shè)置	border-width:上邊 [右邊下邊左邊];	像素值
顏色綜合設(shè)置	border-color:上邊 [右邊下邊左邊];	顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設(shè)置	border:四邊寬度四邊樣式四邊顏色;

表格的細(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ù)值表示的意思是不一樣的。

值的個(gè)數(shù)	表達(dá)意思
1個(gè)值	padding：上下左右邊距比如padding: 3px; 表示上下左右都是3像素
2個(gè)值	padding: 上下邊距左右邊距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3個(gè)值	padding：上邊距左右邊距下邊距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4個(gè)值	padding:上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 順時(shí)針

大致理解順序：
css的盒子模型有哪些

外邊距（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è)條件：

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

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

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

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

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

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

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

插入圖片我們用的最多比如產(chǎn)品展示類
背景圖片我們一般用于小圖標(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)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

css的盒子模型有哪些

解決方案：避免就好了。

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

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

css的盒子模型有哪些

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。
可以為父元素添加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)定性

開始學(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

原因：

margin 會(huì)有外邊距合并還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
padding 會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用。
width 沒(méi)有問(wèn)題（嗨皮）我們經(jīng)常使用寬度剩余法高度剩余法來(lái)做。

盒子陰影

語(yǔ)法格式：

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

css的盒子模型有哪些

前兩個(gè)屬性是必須寫的。其余的可以省略。
外陰影 (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:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  內(nèi)/外陰影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			}

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

css的盒子模型有哪些

 <!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)航欄案例※

css的盒子模型有哪些

 <!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)容布局美化案例※

css的盒子模型有哪些

<!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)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站標(biāo)題：css的盒子模型有哪些
鏈接分享：http://chinadenli.net/article32/jpsjpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、Google、App開發(fā)、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css的盒子模型有哪些

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

盒子模型（Box Model）

盒子邊框（border）

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

表格的細(xì)線邊框

圓角邊框(CSS3)

內(nèi)邊距（padding）

外邊距（margin）

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

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

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

外邊距合并

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

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

content寬度和高度

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

盒子陰影

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

導(dǎo)航欄案例※

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