一、内边距(padding)
*padding简写属性:设置四个方向的内边距。
* padding-top - 上内边距
* padding-right - 右内边距
* padding-bottom - 下内边距
* padding-left - 左内边距
*作用:在实际开发中,可以利用a标签来做按钮的效果。
二、外边距(margin)
*margin简写属性:设置四个方向的外边距,也可以分别设置(同padding)。
*特点:
- margin-top和margin-left是影响自身的位置(自身移动)。
- margin-bottom和margin-right是影响相邻元素的位置(相邻元素动)。
*注意:不管是内边距还是外边距都可以设置负值。当外边距设为负值时可能会出现元素覆盖效果,还可能会移出页面。
*外边距重叠(只会出现在垂直方向上,不会出现在水平方向上):
当两个div元素,在垂直方向排列,并且为上一个div元素设置下外边距,
为上一个div元素设置上外边距时,结果会出现重叠现象。
1 两个边距的值都为正值时:结果是取两个外边距中的最大值。
2 当一个值为正一个值为负时,结果为两个外边距相加的结果。
*外边距的重叠性:
对于父子关系的两个元素,如果为子元素设置了上外边距,而父元素没有设置时,他会将此值传递给父元素。
结果是父子会一起向下移动。(相邻的垂直外边距重叠)
消除这个现象:
1 为父元素设置上内边距或者上边。
2 为父元素设置 overflow: hidden; 但是存在问题:如果父元素的子元素溢出时会被剪掉。
3 在父子元素之间添加一个空的table, 存在问题:添加了多余的代码
4 父元素设置样式:
.clearfix:before, .clearfix:after{
content:"";
display:table;
clear:both;
}
三、行内元素的盒子模型
*特点:
对于行内元素来说,边框和内边距都是有效的。
对于外边距来说,左右(水平方向)是有效的,而上下是无效的。
四、CSS3中关于 box-sizing属性
*属性值:
- content-box 默认的盒子模型
实际的宽度 = width + 左右border + 左右padding
内边距和边框是加在width外面,从而加大了盒子的显示宽度。
实际的宽度 = width
这种盒子,边框和内边距都是加在width里面。
*padding简写属性:设置四个方向的内边距。
* padding-top - 上内边距
* padding-right - 右内边距
* padding-bottom - 下内边距
* padding-left - 左内边距
*作用:在实际开发中,可以利用a标签来做按钮的效果。
二、外边距(margin)
*margin简写属性:设置四个方向的外边距,也可以分别设置(同padding)。
*特点:
- margin-top和margin-left是影响自身的位置(自身移动)。
- margin-bottom和margin-right是影响相邻元素的位置(相邻元素动)。
*注意:不管是内边距还是外边距都可以设置负值。当外边距设为负值时可能会出现元素覆盖效果,还可能会移出页面。
*外边距重叠(只会出现在垂直方向上,不会出现在水平方向上):
当两个div元素,在垂直方向排列,并且为上一个div元素设置下外边距,
为上一个div元素设置上外边距时,结果会出现重叠现象。
1 两个边距的值都为正值时:结果是取两个外边距中的最大值。
2 当一个值为正一个值为负时,结果为两个外边距相加的结果。
*外边距的重叠性:
对于父子关系的两个元素,如果为子元素设置了上外边距,而父元素没有设置时,他会将此值传递给父元素。
结果是父子会一起向下移动。(相邻的垂直外边距重叠)
消除这个现象:
1 为父元素设置上内边距或者上边。
2 为父元素设置 overflow: hidden; 但是存在问题:如果父元素的子元素溢出时会被剪掉。
3 在父子元素之间添加一个空的table, 存在问题:添加了多余的代码
4 父元素设置样式:
.clearfix:before, .clearfix:after{
content:"";
display:table;
clear:both;
}
三、行内元素的盒子模型
*特点:
对于行内元素来说,边框和内边距都是有效的。
对于外边距来说,左右(水平方向)是有效的,而上下是无效的。
四、CSS3中关于 box-sizing属性
*属性值:
- content-box 默认的盒子模型
实际的宽度 = width + 左右border + 左右padding
内边距和边框是加在width外面,从而加大了盒子的显示宽度。
盒子宽度 > width
实际的宽度 = width
这种盒子,边框和内边距都是加在width里面。