一、外边距
1. 外边距属性
margin属性用于设置内边距,也是复合属性,相关设置如下
margin-top:上内边距;padding-right:右内边距
margin-bottom:下内边距;padding-left:左内边距
margin:上内边距[右内边距下内边距左内边距]
2. 对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中,实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:
*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
3.注意:
行内元素不要给上下的margin和padding上下margin和padding会被忽略。
左右margin和padding会起作用。
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
二、盒子的宽和高
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。
大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意:
网友评论