CSS基础：HTML5标签与边框合并问题.pdfVIP

第八天的内容

1.2边框合并问题：

约定：在制作网页的过程中，如果涉及到了页面的宽高的问题用width

和height去解决，才用padding,最后才考虑margin.

因为margin在布局中会存在兼容性的问题，

1）ie6的双边距bug。（使用了浮动，浮动用margin-left）

2）边距合并现象：（只出现块级元素：不包括行内元素以及行内块级

元素）

如果两个同级的div上下排序，上面div有下margin,下面的div有上

margin，就会出现边距的合并现象，两者之间的取值是按最大值来计算。

1styletype=text/css

2div{

3width:200px;

第八天的内容

1.2边框合并问题：

约定：在制作网页的过程中，如果涉及到了页面的宽高的问题，用宽

度和高度去解决，才用填充，最后才考虑边缘。

因为边距在布局中会存在兼容性的问题，

1）IE6的双边距bug。（使用了浮动，浮动用边缘左）

2）边距合并现象:(只出现块级元素：不包括行内元素以及行内块级：不

包括行内元素以及行内块级）

如果两个同级的Div上下排序，上面Div有下边缘，下面的Divdiv

有上边缘，就会出现边距的合并现象

1样式类型“

text/css”2div{3宽度：

200px;

4height:200px;

5background:red;

6}

7.tom{

8margin-bottom:50px;

9}

10.jerry{

11margin-top:100px;

12background:blue;

13}

14/style

15/head

16body

17divclass=tom/div

18divclass=jerry/div

100+50=100;

3）父子元前的边框合并现象：

如果父子元间没有边框，那么给子元素设置一个margin-top,那么父

元素也会拥有这个属性。

解决方法：

A)给父元素设置边框。

4高：200px;5背景：红色；6}7.

tom{8个边距底：50px;9}10.

Jerry{11个保证金顶：100px;12背

景：蓝色；13}14/style

15/head1616body