两种盒子模型
聊到盒子模型,终于可以给IE点个赞了。IE的怪异盒子模型给网页布局节省了很大的力气,个人觉得是一个很好的东西。
那么现在我们来详细了解一下:
盒子
盒子模型就是标签的结构。
一个盒子包含五个部分:margin(外边距)、border(边框)、padding(内边距)、width(实际宽度)、height(实际高度)。那么我们接下来详细了解一下。
先上一张盒子的图:
很清晰对吧。
margin:外边距
外边距是该盒子与其他盒子之间自己设定的间距,它除了一个距离之外,什么都不能设。
外边距有四个值,当然也可以混合写。同时,它不计算在内容宽度中。
分开写:
上边距 = x
margin-top:x;
右边距 = x
margin-right:x;
下边距 = x
margin-bottom:x;
左边距 = x
margin-left:x;
混合写:
margin:x x x x;
上 右 下 左
上边距 右边距 下边距 左边距
margin:x;
上边距 = 右边距 = 下边距 = 左边距 = x
margin:x y;
上边距 = 下边距 = x
左边距 = 右边距 = y
(对边相等)
margin:x1 x2 x3;
上边距 = x1
右边距 = 左边距 = x2
下边距 = x3
当然还可以这样写(不推荐):
margin:x;
margin-top:0px/none;
这样就将上边距去掉了,其他三个还在
先看一个小栗子:
这是一个上边距的例子,当然,另外三个边距也是同理
我用了一个border(边框)来圈出了盒子的内容区域,很明显,margin不在内容区域中。
margin值可以用像素也可以用百分比。
我将div变成行内块元素,来看看效果&