html5+css3学习（四）之CSS盒子模型

html5+css3学习（四）之CSS盒子模型

块元素的盒模型

1、内容区（content）
设置内容区的宽高

width:
height:

2、内边距(内容与盒子的距离)（padding）
四个方向的距离，内边距会影响可见框大小，元素背景会延伸到内边距

padding:
padding-left:
padding-top:
padding-right:
padding-bottom:

3、边框（border）:设置边框必须同时指定三个样式
width,color,style(填充方式)
//设置1个值，则四边相同
设置4个值，则分别赋值给 上 右 下 左
设置3个值，则分别赋值给 上 左右 下
设置2个值，则分别赋值给 上下 左右
用空格分隔
并且还有 border-position(bottom)-attribute(color)可以分别设置边框样式

//一起设置，按照宽度 样式 颜色顺序设置
border:1px solid #000

4、外边距（margin）:当前盒子和其他盒子的大小，恩外边距也可以指定负值，元素会像反方向移动，不会影响可见框大小，会影响盒子位置
margin的值可以设置为auto，一般只用于水平方向，只给左右某一个设置auto，外边距会变成最大值，左右两边都设置为auto则会使子元素在父元素中居中，

//相当于阔外边距
margin:
margin-top:
margin-left:
margin-right:
margin-bottom:
//上下边距为0 左右为相同边距，左右居中
margin:0 auto

垂直外边距重叠

网页中垂直方向的相邻外边距会发生重叠。
兄弟元素之间相邻的垂直外边距会取最大值。
如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素
如果想要单单想改变内部子元素在父元素的位置，可以设置父元素的padding或者通过设置border等使子元素和父元素不相邻（方式有很多）

内联元素的盒模型

1、内联元素不能设置宽高
2、可以设置水平方向的内边距，也可以设置垂直方向的页边距，但是垂直方向不会影响页面的布局，即不会改变块元素等元素的位置。
3、内联元素可以设置边框，水平方向会影响布局，垂直方向不会
4、可以为内联元素设置外边距，但只支持水平方向的外边距，并且水平相邻元素的外边距不会重叠，不支持垂直方向的外边距

浏览器默认样式

许多元素浏览器有默认的margin和padding
所以要去掉浏览器的默认样式

*{
    margin:0;
    padding:0;
}