本文详细介绍了HTML和CSS中的盒子模型，特别是外边距合并问题，以及解决办法，如添加内边距、overflow：hidden等。此外，还深入讨论了浮动的影响，提供四种解决方案，包括额外标签法、父级元素添加overflow属性、:after伪元素选择器和:after :before伪元素联合使用。最后提到了绝对定位的应用，并分享了一些开发小技巧，如利用内容撑开盒子以提高效率。
注意：
一.写的是黑马程序员跟着老师写的，有点小差别，主要看注释理解结构
二.以前学thml和css没有深入理解到盒子的坍塌问题，注意理解外边距的合并。有两种情况，一个是两个盒子紧挨着一起，会进行外边距合并，只保留较大的外边距，注意就行。一个是盒子的嵌套，造成合并解决办法有两个，一是为父元素添加1px的外边距或内边距（可能会将盒子变大），而是在父元素中添加overflow：hidden;
三.另外要深刻理解浮动，因为某些界面需要几个盒子进行元素的并列等排布时，需要定义为float:left; 但是会影响到，后面紧着的元素的排列。解决方法有四种：
1、额外标签法：接着浮动的元素后面写一个空元素并定义清除浮动。这样就将他作为一条分割线，接下来的元素不会受到影响。但是空元素的可读性不强，结构化较差。
2、父级元素添加overflow属性，选择一个想要的值（auto、hidden、scroll等），但是这样不会自动换行，当一个盒子满了的时候，可能将溢出的元素隐藏掉。
3、使用:after伪元素选择器
固定写法.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} //将需要清除浮动的元素类名添加clearfix
.clearfix{*zoom:1;} //这句话表示IE6/7触发hasLayout，zoom前面的*其他浏览器遇到时直接跳过，提升速度。
4、:after :before两个伪元素选择器联合使用
固定写法.clearfix:after,clearfix:before{content:"";display:table} //发出BFC，BFC可以清除浮动。
.clearfix:after{clear:both} .clearfix{*zoom:1}
四.在广告栏或者左右箭头等的布局，用到绝对定位时，一定要记住:”子决夫相”，子元素使用绝对定位时，如果父元素没有特殊定位的属性话不知道会以什么为自己的参考点。（一般以盒子的左上角点为基准点）。
五.开发时，在自己需要做模块可以先设置高度，完成后再删除，利用内容撑开盒子即可，可以提高开发效率。
六.开发是，有小套路多总结。如行高定义为字体高，即可将文字垂直居中，盒子平移的时候，往想要的方向上移动50%，然后在往回移动自己盒子移动方向上的宽度的一般即可。
HTML结构代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝之外另一个生态</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="inner">
<div class="logo">
<a href="#"><img src="img/logo.jpg"></a>
</div>
<!--顶部内容左边logo-->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">云道商城</a></li>
<li><a href="#">智慧门店</a></li>
<li><a href="#">销售平台</a></li>
<li><a href="#">媒体联盟</a></li>
<li><a href="#">关于云道</a></li>
</ul>
</div>
</div>
</div>
<!--导航栏部分-->
<div class="banner"><
最低0.47元/天 解锁文章
2176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
