目录
- css 盒模型的组成
- css盒模型的注意点
- 块级盒子（Block Box）：
- 内联盒子（Inline Box）：
- 块级盒子与内联盒子的区别：
- CSS中转换块级和内联显示：
- Content-box 盒模型（默认的盒模型,标准盒模型）
- Border-box 盒模型(怪异盒模型)
- 浮动样式详解
- 清除浮动方案
- 定位样式详解
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 会发生折叠，这是垂直外边距合并的效果。它通常出现在以下情况下：
- 相邻的块级元素：相邻块级元素的上下外边距合并。
- 空白块级元素：如果一个块级元素内没有其他内容，它的
margin-top和margin-bottom会合并。 - 父子元素关系：如果子元素是父元素中的第一个子元素，它的
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）：
块级元素默认生成块级盒子，这类盒子会占据其父容器的整个宽度，并且每一个块级元素都会独占一行。
特点：
- 独占一行：块级盒子总是从新行开始，其他元素会被排列到它的下面。
- 宽度自动填充：默认情况下，块级元素的宽度会自动填充其父容器的宽度，除非手动设置宽度。
- 可以包含块级和内联元素：块级盒子可以容纳其他块级元素，也可以包含内联元素。
- 可设置宽度和高度：块级盒子可以通过
width和height属性来定义其宽高。 - 常见的块级元素：
<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）：
内联元素生成内联盒子，通常用于包装文本或小的内容。内联盒子不会独占一行，它们会在一行内顺序排列，直到无法容纳更多为止。
特点：
- 不独占一行：内联元素在一行内排列，不会换行，除非内容溢出到父容器的宽度。
- 宽高由内容决定：内联盒子的宽度和高度由其内容决定，不能像块级元素那样通过
width和height设置尺寸。 - 只影响内容周围的区域：内联元素的
padding、margin和border只会影响元素的内容区域，不能影响元素上下的内容布局（即不会增加行高）。 - 常见的内联元素：
<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浮动需要注意的点
- 脱离文档流：浮动元素不占据父元素高度，导致高度塌陷。解决方法：
clear、clearfix、overflow: hidden;。 - 浮动后的元素行为：后续元素会围绕浮动元素。解决方法：使用
clear控制。 - 宽度问题：未指定宽度时，浮动元素会收缩到内容宽度。
- 父元素高度塌陷：使用
clearfix或overflow: hidden;解决。 - 布局复杂性：浮动适合小规模布局，推荐使用 Flexbox 或 Grid 进行复杂布局。
浮动用于局部布局，避免用于复杂的页面结构。
定位样式详解
css position属性用于指定一个元素在文档中的定位方式,其中top,right,bottom,left属性则决定该元素的最终位置
相对定位及特性
标签：块级,盒子,模型,元素,padding,内联,margin,css From： https://www.cnblogs.com/anyux/p/18450828