黑马程序员云道页面—巩固html和css（新特性没有使用）

最新推荐文章于 2023-11-19 17:52:36 发布

原创

最新推荐文章于 2023-11-19 17:52:36 发布 · 3.8k 阅读

19 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML和CSS中的盒子模型，特别是外边距合并问题，以及解决办法，如添加内边距、overflow：hidden等。此外，还深入讨论了浮动的影响，提供四种解决方案，包括额外标签法、父级元素添加overflow属性、:after伪元素选择器和:after :before伪元素联合使用。最后提到了绝对定位的应用，并分享了一些开发小技巧，如利用内容撑开盒子以提高效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

一.写的是黑马程序员跟着老师写的，有点小差别，主要看注释理解结构

二.以前学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>