盒子模型属性详解及案例

盒子模型

所谓盒子模型就是把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

案例：

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