css塌陷是怎么产生的？怎么解决塌陷？

最新推荐文章于 2024-01-07 09:54:37 发布

前端每日三省

最新推荐文章于 2024-01-07 09:54:37 发布

阅读量775

点赞数

分类专栏： dairy 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_42560424/article/details/128908970

版权

dairy 专栏收录该内容

100 篇文章 13 订阅

订阅专栏

一省：HTML

8. link和@import的区别？

区别：

link是xhtml标签，无兼容性问题，而@import是css2.1提出，低版本浏览器不支持。
link标签和页面同时加载，而@import等到页面加载完成后加载。
link标签除了css文件外，还可以引入其他资源文件，而@import只能引入css。
link标签的权重大于@import的权重。

二省： CSS

8. css塌陷是怎么产生的？怎么解决塌陷？

css塌陷一般分为高度塌陷和外边距塌陷两种。

高度塌陷：原因是父元素没有设置高度，子元素设置浮动属性之后，父元素的高度为0。如下：

<html lang="en">
<head>
  <style>
    body {
      background: gray;
    }
    .father {
      background: blue;
    }
    .son {
      width: 200px;
      height: 200px;
      background: tomato;
      float: left;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

父盒子高度为0

高度塌陷解决方式：

给父元素设置高度
触发BFC(见上篇触发BFC方式)
给父元素加一个有高度且没有浮动的子元素
使用伪元素清除浮动，如下：

.father::after {
  content: '';
  display: block;
  clear: both;
}

外边距塌陷：外边距塌陷分为相邻元素塌陷和嵌套盒子塌陷。相邻元素塌陷如下：

<html lang="en">
<head>
  <style>
    body {
      background: gray;
    }
    .son {
      width: 200px;
      height: 200px;
      background: tomato;
      margin-bottom: 20px;
    }
    .brother {
      width: 200px;
      height: 200px;
      margin-top: 50px;
      background: skyblue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="brother"></div>
  </div>
</body>
</html>

上盒子设置margin-bootom:20px;

下盒子设置margin-top:50px;

效果是外边距合并并且以较大的为主。
相邻元素塌陷解决方式：

只给一个盒子设置margin
用padding代替margin实现效果
把其中一个盒子设置为行内块元素

嵌套盒子塌陷如下：

<html lang="en">
<head>
  <style>
    body {
      background: gray;
    }
    .father {
      background: blue;
    }
    .son {
      width: 200px;
      height: 200px;
      background: tomato;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>