阅读 53

css笔记-简述盒模型

提要:

  1. 概念
  2. 构成
  3. box-sizing
  4. margin合并

一. 概念

  • 在CSS中,所有的元素都被一个个的“盒子”包着,我们通过这些“盒子”来实现布局。
  • 两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。
  • 不同元素产生的盒子类型可能不同,产生什么样的盒子,取决于它的dispaly属性。
  • 完整的盒模型概念应用于块级盒子 (block box)。

二. 构成

由外到内:

  1. margin
  2. border
  3. padding
  4. content

image.png

三. box-sizing

  1. content-box:盒模型的宽/高是只包含 content 的宽/高
  2. border-box:盒模型的宽/高是包含 border + padding + content 的宽/高

(推荐使用border-box)

四. (上下)margin合并

两个盒子的margin相接,会产生margin合并,margin值取决于较大值。

1. “兄弟”margin合并

1) 举例

HTML:

<div class="child1">
    child1
</div>
<div class="child2">
    child2
</div>
复制代码

CSS:

.child1{
    border:2px solid blue;
    margin-bottom:30px;
}
.child2{
    border:2px solid green;
    margin-top:20px;
}
复制代码

结果:child1、child2之间的合margin=30px,而不是想象中的30px+20px=50px。

2) 消除“兄弟”margin合并的方法

display:inline-block;

2. “父子”margin合并

1) 举例

HTML:

<div class="parent">
    <div class="child1">
        child1
    </div>
    <div class="child2">
        child2
    </div>
</div>
复制代码

CSS:

.parent{
    margin:10px;
.child1{
    border:2px solid blue;
    margin:30px;
}
.child2{
    border:2px solid green;
    margin:20px;
}
复制代码

结果:child1的margin-top与parent的margin-top重叠 (合并),值为30px;
child2的margin-bottom与parent的margin-bottom重叠 (合并),值为20px。

2) 消除“父子”margin合并的方法

① margin之间添加border
② margin之间添加padding
display:flex;

文章分类
前端
文章标签