「CSS暴论💥」CSS“常识”回顾——上（你不会和我一样不记得吧🤡🤡）

Hi!这里是JustHappy不知道您是否和我一样在前端圈看遍花花草草之后，会对基本的、原生的技术感到陌生，比如原生CSS，这是很可怕的（比如说我🤡面试就翻沟里了），所以这次让我们回顾一下CSS！

本文试用于快速回顾CSS基础知识、坑点

布局！📦

盒子模型的宽度是？

标准盒模型（W3C标准）：

宽度 = 内容宽度 + margin左右和 + padding左右和 + border左右和
按照上图应该是：

宽度 = 300px + 50px + 50px + 20px + 20px + 10px + 10px = 460px

margin塌陷和负值？

margin存在纵向的塌陷

上方元素和下方元素的margin值不会像横向那样相加，而是取较大的那个

html 复制代码

<style>
      .container1 {
        background-color: #f0f0f0;
        margin: 20px;
        width: 100px;
      }
      .container1 p {
        margin-top: 20px;
        margin-bottom: 10px;
        background-color: rgb(114, 114, 225);
      }
</style>
<body>
    <!-- margin塌陷 -->
    <div class="container1">
      <p>margin塌陷</p>
      <p>margin塌陷</p>
      <p>margin塌陷</p>
    </div>
</body>

这里会是这样的情况

当margin为负值的时候其默认情况和top、bottom、left、right的情况是不同的

当设置margin:-20px时候: 如图会往左上靠

当设置margin-top:-20px时候：如图所示会往上靠

当设置margin-bottom:-20px时候：如图所示不会变化

当设置margin-left:-20px时候：如图所示会往左靠

当设置margin-right:-20px时候：如图所示不会变化

Float?

Float是传统页面开发中最为常见的布局，它可以使得元素脱离文本流向右或者向左浮动，但是浮动会带来以下的问题

父元素高度的塌陷

当子元素设置为float的时候，它会脱离文本流，致使父元素的高度无法被正确计算，如果父元素没有其他非浮动的元素，父元素的高度就有可能塌陷为0，就像下面这样

html 复制代码

<div class="parent" style="border: 1px solid black; width: 300px">
   <div style="float: left; width: 100px; height: 100px; background: red"></div>
   <div style="float: right; width: 100px; height: 100px; background: blue"></div>
</div>

可以看到parent的高度塌陷为0，只显示了边框

所以我们需要清除浮动，我们这里使用最常见的chearfix的方式清除浮动

css 复制代码

.clearfix::after {
  content: "";          /* 必须设置内容，即使为空 */
  display: block;       /* 创建一个块级元素 */
  clear: both;          /* 清除浮动 */
  height: 0;            /* 避免占据额外空间 */
}

加上后的效果就像下面这样

虽然 clearfix 方法是最常用的，但随着现代浏览器的普及，display: flow-root 也逐渐成为一种更简洁的替代方案。它通过创建一个新的块级格式化上下文（BFC），可以自动清除浮动，而不需要额外的伪元素。

css 复制代码

.parent {
  display: flow-root;  /* 创建一个新的块格式化上下文 */
}

效果也是一样的

你还记得BFC吗？

什么是BFC？

BFC(Block Formatting Context) ：块级格式化上下文

有关这个我翻到一篇古早文章2017年的，但是感觉还是不错的，大家可以去看看 [布局概念] 关于CSS-BFC深入理解

理解：所谓BFC就是页面上的一个隔离容器，容器里的子元素不会受外界元素的影响，也不会影响到外界的元素，我们可以利用BFC解决一些布局问题

创建BFC的方式如下

以下是将创建BFC（块级格式化上下文）的方法整理成表格的形式

方法	CSS 属性及值	说明
根元素 `<html>`	-	页面的根元素 `<html>` 默认会创建一个BFC。
浮动元素	`float: left/right/非none`	浮动元素会创建一个新的BFC。
绝对定位或固定定位	`position: absolute/fixed`	绝对定位或固定定位的元素会创建一个新的BFC。
行内块元素	`display: inline-block`	行内块元素会创建一个新的BFC。
表格相关元素	`display: table/table-cell/table-caption/table-row/table-row-group/其他表格值`	表格相关的显示值会创建BFC。
`overflow` 属性	`overflow: hidden/auto/scroll`（非 `visible`）	设置 `overflow` 为非默认值时，元素会创建一个新的BFC。
`display: flow-root`	`display: flow-root`	现代方法，创建BFC的同时不会引入浮动或定位的副作用。
弹性布局或网格布局	`display: flex/inline-flex/grid/inline-grid`	弹性布局或网格布局的直接子元素会创建一个新的BFC。
`contain` 属性	`contain: layout/content/paint`	设置 `contain` 属性时，元素会创建一个新的BFC。
多列布局	`column-count/column-width: 非默认值`	设置多列布局时，元素会创建一个新的BFC。

一个就是我们上面提到的清除浮动 另外则是实现 两栏布局 和解决 margin合并问题

我们都说一下

两栏布局：即实现左侧定宽，右侧宽度自适应

html 复制代码

    <!-- 两栏布局：左边固定宽度，右边自适应宽度 -->
    <div style="border: 1px solid black; width: 50%">
      <div
        style="
          float: left;
          width: 100px;
          height: 100px;
          background: red;
          margin: 5px;
        "
      ></div>
      <div
        style="
        overflow: hidden; 
        height: 100px; 
        background: blue; 
        margin: 5px;
        "
      ></div>
    </div>

margin合并问题

外边距合并（Margin Collapsing）是指当两个或多个相邻的外边距（margin）相遇时，它们会合并成一个单一的外边距，而不是简单地相加。

就像下面这样

html 复制代码

    <!-- margin合并问题 -->
    <div style="border: 1px solid black; width: 300px; margin-bottom: 50px">
      <div style="margin-bottom: 20px; height: 50px; background: pink"></div>
      <div style="margin-top: 20px; height: 50px; background: blue"></div>
    </div>
    <!-- 使用BFC解决margin合并问题 -->
    <div style="border: 1px solid black; width: 300px">
      <div style="overflow: hidden">
        <div style="margin-bottom: 20px; height: 50px; background: pink"></div>
      </div>
      <div style="margin-top: 20px; height: 50px; background: blue"></div>
    </div>

就是下面这样的

总之BFC就是让其外边距变成单纯的相加关系