css 盒模型

目录

• css 盒模型的组成
• css盒模型的注意点
  • 现象描述：
  • 原因：
  • 解决方案：
    • 1. 使用 padding 代替 margin：
    • 2. 使用 overflow: hidden; 或其他非 visible 的值：
    • 3. 使用 border 或 padding 阻止合并：
    • 4. 使用 display: flow-root;（CSS中的BFC）：
    • 5. 使用 position 定位：
• 块级盒子（Block Box）：
  • 特点：
  • 例子：
• 内联盒子（Inline Box）：
  • 特点：
  • 例子：
• 块级盒子与内联盒子的区别：
• CSS中转换块级和内联显示：
  • 例子：
• Content-box 盒模型（默认的盒模型,标准盒模型）
  • 总宽度计算公式：
  • 总高度计算公式：
• Border-box 盒模型(怪异盒模型)
  • 总宽度计算公式：
  • 总高度计算公式：
  • 总结对比：
• 浮动样式详解
• 清除浮动方案
  • 1. 使用清除浮动的伪元素（clearfix）
  • 2. 使用 overflow 属性
  • 3. 使用 clearfix 类
  • 4. 使用 Flexbox 布局
  • css浮动需要注意的点
• 定位样式详解

css 盒模型的组成

在css中,所有的元素都被一个个的盒子(box)包围着,理解这些盒子的基本原理,是我们使用css实现准确布局,处理元素排列的关键

盒子的组成:

• content内容
• padding内填充
• border边框
• margin外边距

box-model

css盒模型的注意点

• padding不能为负值,margin可以为负值
• 背景色会平铺到非margin的区域,包含border,padding,content
• margin-top传递的现象及解决方案
• margin 上下叠加的的现象及解决方案

现象描述：

• 当两个块级元素上下排列时，它们之间的 margin-top 和 margin-bottom 不会叠加，而是取其较大的值。
• 如果一个块级元素的 margin-top 和父元素的 margin-bottom 直接相邻，它们也会合并。
• 甚至一个元素的 margin-top 可能会与其父元素的 margin-top 合并，从而产生 “传递” 的效果，看起来像是子元素的 margin-top 影响了父元素。

原因：

CSS的标准规定，块级元素的垂直方向 margin 会发生折叠，这是垂直外边距合并的效果。它通常出现在以下情况下：

1. 相邻的块级元素：相邻块级元素的上下外边距合并。
2. 空白块级元素：如果一个块级元素内没有其他内容，它的 margin-top 和 margin-bottom 会合并。
3. 父子元素关系：如果子元素是父元素中的第一个子元素，它的 margin-top 可能会与父元素的 margin-top 合并。

解决方案：

1. 使用 padding 代替 margin：

padding 不会像 margin 一样合并，可以用 padding 代替来避免折叠。

.parent {
  padding-top: 50px;  /* 使用 padding 而非 margin */
}

2. 使用 overflow: hidden; 或其他非 visible 的值：

将父元素的 overflow 设置为 hidden 或 auto，可以防止子元素的 margin 传递到父元素。

.parent {
  overflow: hidden;
}

3. 使用 border 或 padding 阻止合并：

如果父元素没有 padding 或 border，margin 合并会发生。即使给父元素设置一个1px的边框或少量 padding，也可以阻止合并。

.parent {
  border: 1px solid transparent;  /* 设置一个透明的边框 */
}

4. 使用 display: flow-root;（CSS中的BFC）：

将父元素设置为 块格式化上下文（BFC） 可以阻止 margin 折叠。你可以通过设置 display: flow-root; 来创建一个新的 BFC。

.parent {
  display: flow-root;
}

5. 使用 position 定位：

如果元素的 position 设置为 absolute 或 relative，它的 margin 不会与其他元素合并。

.parent {
  position: relative;
}

块级盒子（Block Box）：

块级元素默认生成块级盒子，这类盒子会占据其父容器的整个宽度，并且每一个块级元素都会独占一行。

特点：

1. 独占一行：块级盒子总是从新行开始，其他元素会被排列到它的下面。
2. 宽度自动填充：默认情况下，块级元素的宽度会自动填充其父容器的宽度，除非手动设置宽度。
3. 可以包含块级和内联元素：块级盒子可以容纳其他块级元素，也可以包含内联元素。
4. 可设置宽度和高度：块级盒子可以通过 width 和 height 属性来定义其宽高。
5. 常见的块级元素：
   • <div>、<p>、<h1>-<h6>、<section>、<header> 等。

例子：

<style>
  .block-box {
    width: 50%;
    background-color: lightblue;
    margin-bottom: 20px;
  }
</style>

<div class="block-box">我是块级盒子1</div>
<div class="block-box">我是块级盒子2</div>

在这个例子中，每个 div 都是一个块级盒子，占据父容器50%的宽度，并且各自独占一行。

内联盒子（Inline Box）：

内联元素生成内联盒子，通常用于包装文本或小的内容。内联盒子不会独占一行，它们会在一行内顺序排列，直到无法容纳更多为止。

特点：

1. 不独占一行：内联元素在一行内排列，不会换行，除非内容溢出到父容器的宽度。
2. 宽高由内容决定：内联盒子的宽度和高度由其内容决定，不能像块级元素那样通过 width 和 height 设置尺寸。
3. 只影响内容周围的区域：内联元素的 padding、margin 和 border 只会影响元素的内容区域，不能影响元素上下的内容布局（即不会增加行高）。
4. 常见的内联元素：
   • <span>、<a>、<strong>、<em>、<img> 等。

例子：

<style>
  .inline-box {
    background-color: yellow;
    padding: 5px;
    margin: 10px;
  }
</style>

<p>
  这是一个段落中的 <span class="inline-box">内联盒子1</span> 和 <span class="inline-box">内联盒子2</span>。
</p>

在这个例子中，<span> 元素是内联盒子，它们不会独占一行，而是和文本混排在同一行。

块级盒子与内联盒子的区别：

特性	块级盒子 (Block Box)	内联盒子 (Inline Box)
布局行为	独占一行	与其他元素排列在同一行
宽度	默认占满父容器的宽度	宽度由内容决定
高度	可以手动设置 height	高度由内容决定，不能手动设置
可包含的内容	可以包含块级和内联元素	通常只包含文本或其他内联元素
常见元素	<div>, <p>, <section>, <header>, <h1>-<h6>	<span>, <a>, <strong>, <em>, <img>
影响布局的方式	会影响上下文的其他元素布局	不会影响上下文其他元素的布局
设置宽高	可以设置 width 和 height	width 和 height 无法生效

CSS中转换块级和内联显示：

通过 display 属性，块级元素和内联元素可以互相转换：

• 将内联元素转换为块级元素：

  .inline-to-block {
    display: block;
  }
  

• 将块级元素转换为内联元素：

  .block-to-inline {
    display: inline;
  }
  

例子：

<style>
  .block-to-inline {
    display: inline;
    background-color: lightblue;
  }

  .inline-to-block {
    display: block;
    background-color: yellow;
  }
</style>

<div class="block-to-inline">块级元素变为内联元素</div>
<span class="inline-to-block">内联元素变为块级元素</span>

在这个例子中，通过 display 属性的设置，可以改变元素的默认展示方式。

• 块级盒子用于占据整个行的布局，并适合结构化页面内容，如段落和容器。
• 内联盒子则用于在一行中排列小的内容，如文本或图标。
  通过 display 属性，块级盒子和内联盒子可以互相转换，根据页面设计的需要来灵活布局。

Content-box 盒模型（默认的盒模型,标准盒模型）

在 content-box 模型中，width 和 height 指的是内容区域的宽高，而 padding 和 border 是额外计算的部分。

总宽度计算公式：

总宽度 = 内容宽度 + 左右 padding + 左右 border + 左右 margin

总高度计算公式：

总高度 = 内容高度 + 上下 padding + 上下 border + 上下 margin

Border-box 盒模型(怪异盒模型)

在 border-box 模型中，width 和 height 包含了 padding 和 border，因此不需要额外加上这两个部分。

总宽度计算公式：

总宽度 = 设定的 width（包含 padding 和 border） + 左右 margin

总高度计算公式：

总高度 = 设定的 height（包含 padding 和 border） + 上下 margin

总结对比：

盒模型	总宽度计算公式	总高度计算公式
Content-box	总宽度 = 内容宽度 + 左右 padding + 左右 border + 左右 margin	总高度 = 内容高度 + 上下 padding + 上下 border + 上下 margin
Border-box	总宽度 = 设定的宽度 + 左右 margin	总高度 = 设定的高度 + 上下 margin

选择使用 content-box 还是 border-box 取决于你的布局需求。border-box 更适合自适应布局，因为你不需要手动调整宽度来考虑 padding 和 border 的影响。

浮动样式详解

当元素被浮动时,会脱离文档流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界上,是css布局中实现左右布局的一种方式

文档流: 文档流是元素在web界面上的一种显现方式,按照出现的先后顺序进行排列

清除浮动方案

清除浮动是解决父元素高度塌陷问题的常用方法

1. 使用清除浮动的伪元素（clearfix）

这种方法是通过在父元素中添加一个伪元素来清除浮动。伪元素会创建一个新的块级上下文，使父元素能够计算其高度。

.box {
    width: 400px;
    border: 1px solid black;
}

.box::after {
    content: "";  /* 创建伪元素 */
    display: table;  /* 设置为块级元素 */
    clear: both;     /* 清除浮动 */
}

2. 使用 overflow 属性

给父元素添加 overflow 属性（如 overflow: auto; 或 overflow: hidden;），这样父元素就会扩展以包含浮动子元素。

.box {
    width: 400px;
    border: 1px solid black;
    overflow: auto;  /* 清除浮动 */
}

3. 使用 clearfix 类

在项目中定义一个 .clearfix 类，以便于复用。可以将其应用于任何需要清除浮动的元素。

.clearfix::after {
    content: "";  
    display: table;  
    clear: both;     
}

4. 使用 Flexbox 布局

Flexbox 是现代布局技术，可以轻松处理浮动问题。它会自动调整父元素的高度，以包含所有子元素。

.box {
    display: flex;  /* 设置为 Flexbox 布局 */
    width: 400px;
    border: 1px solid black;
}

css浮动需要注意的点

1. 脱离文档流：浮动元素不占据父元素高度，导致高度塌陷。解决方法：clear、clearfix、overflow: hidden;。
2. 浮动后的元素行为：后续元素会围绕浮动元素。解决方法：使用 clear 控制。
3. 宽度问题：未指定宽度时，浮动元素会收缩到内容宽度。
4. 父元素高度塌陷：使用 clearfix 或 overflow: hidden; 解决。
5. 布局复杂性：浮动适合小规模布局，推荐使用 Flexbox 或 Grid 进行复杂布局。

浮动用于局部布局，避免用于复杂的页面结构。

定位样式详解

css position属性用于指定一个元素在文档中的定位方式,其中top,right,bottom,left属性则决定该元素的最终位置

graph TD; Position --> Static; Position --> Relative; Position --> Absolute; Position --> Fixed; Position --> Sticky;

相对定位及特性