盒子模型

06-盒子模型:

块级元素可以设置四个方向，分别有

margin：

外边距(margin-top 、left、right、bottom)

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 内联对象可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
• 外延边距始终透明。
• 对应的脚本特性为margin。

padding:

内边距(top 、left、right、bottom)

检索或设置对象四边的内部边距。

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 内联对象可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
• 对应的脚本特性为padding。

border：

边框:(top right bottom left)

width: border-width

style: 样式

color：颜色

display属性

设置为none 不显示

块级元素(block)，可以设置宽高，行内元素(inline)不可以设置宽高，如果想对行内元素设置宽高，可以把元素变为行内块级元素(inline-block)，

<style>
.blockdiv{
	display: inline-block;
	border: solid 1px red;
	width: 200px;
	height: 100px;
}	
</style>

<div class="blockdiv">块1 </div><div class="blockdiv">块2 </div>