盒子模型属性详解及案例

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型边框（border）

属性：border-width|border-style|border-color

         

边框样式如下：

边框有四条边，单独设置某条边（top|right|bottom|left）

如： border-top-width|border-top-style|border-top-color

<style type="text/css">

	div{
		height: 50px;
		background-color: #999;
		border-width: 5px;/*边框宽度*/
		border-style: solid;/*线型*/
		border-color: red;/*边框颜色*/	
	}
	</style>

<div>哈哈哈哈哈哈</div>

为了简写代码可以使用属性连写，效果一样

边框线型必写，与顺序无关。

border:red solid 5px;

border-top:red solid 5px;

表单控件案例

代码及效果如下：

<style type="text/css">
	.username{
		border:0 none;/*去掉表单边框*/
		outline-style: none;/*去掉轮廓线*/
		border:green dashed 1px;
		background: #ccc;
	}
	.username:focus{
		background: red;/*光标状态*/
	}
	.email{
		border:0 none;
		outline-style: none;
		border-bottom:red dotted 1px;
	}
	.search{
		border:0 none;
		outline-style: none;
		border:1px solid #999;
		background: url(search.png) no-repeat right;
	}
	</style>

几个需要注意的知识点：

盒子模型的内边距（padding）

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距

padding-left:左内边距

盒子模型会被内边距撑大

边框也会影响盒子模型的大小

盒子的大小=定义的大小+边框+内边距

内容水平居中的两种方式如下：

<style type="text/css">
	div{
		height:1000px;
		background: red;
		text-align: center;/*内容水平居中*/
		/*width:500px;
		padding-left: 250px;
		padding-right: 250px;内容水平居中*/	
	}
	</style>

<div><img src="邀约app图标.png"></div>

继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置内边距，不会撑大盒子。当设置的padding-left大于父盒子的宽度，子盒子宽度会大于父盒子。

<style type="text/css">
.father{
	width: 500px;
	height: 300px;
	background: #ccc;
}
.son{
	height: 100px;
	background: red;
	padding-left: 600px;
}
	</style>

<div class="father">
<div class="son"></div>
</div>

导航案例

<style type="text/css">
.nav{
	height: 40px;
	background: #eee;
	border-top:3px solid red;
	border-bottom: 1px solid #aaa;
}
.content{
	width: 1000px;
	height: 40px;
	margin: 0 auto;
	line-height: 40px;
}
a{
	font-size: 12px;
	height: 40px;
	display: inline-block;
	text-decoration: none;
	color:black;
	padding: 0 12px;
}
a:hover{
	background: #aaa;
}
	</style>

<div class="nav">
<div class="content">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</div>
</div>

盒子模型的外边距（margin）

用法与padding一样，但是margin对盒子宽度不会有影响

垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

下面两个盒子的外边距取100px。

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框（不推荐使用，麻烦）

                 2  给父盒子overflow:hidden

案例：

以上就是我对盒子模型的一些理解和做的一些案例练习，如有错误欢迎指出。