CSS基础之盒子模型

---

前言

css页面布局三大重点： css 盒子模型 、 浮动 、 定位

---

1.盒子模型的组成

• border(边框)
• content(内容)
• padding(内边距)
• margin(外边距)

2.边框(border)

• CSS 边框属性允许你指定一个元素边框的样式和颜色
• 边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

    <style>
        border:border-width | border-style | border-color;
    </style>

①border-style

边框样式的样式如下：

• none:没有边框即忽略所有边框的宽度（默认值）
• solid :边框为单实线（最为常用的）
• dashed: 边框为虚线
• dotted: 边框为点线

②边框会影响盒子实际大小
边框会额外增加盒子的实际大小，对此我们有两种解决方法：

• 测量盒子大小的时候，不量边框
• 如果测量的时候包含了边框，则需要 width/height 减去边框宽度

3.内边距(padding)

padding 属性用于设置内边距,即盒子边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding -top	上内边距
padding-bottom	下内边距

padding的简写属性：

值的个数	表达意思
padding : 1px;	上下左右内边距为1px
padding :1px 1px;	上下内边距是1px ，左右内边距是1px
padding: 1px 1px 1px;	上内边距1px，左右内边距1px，下内边距1px
padding :1px 1px 1px 1px;	上内边距，右内边距，下内边距，左内边距都是1px

注意点：

• 当我们给盒子指定 padding 值之后，发生了2件事情：
  ① 内容和边框有了距离，添加了内边距
  ②padding影响了盒子实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
  ③ 解决方式：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可
• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

4.外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写方式与 padding 完全一致，具体可参考上文padding写法

①外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件:
1.盒子必须制定了宽度(width)
2.盒子左右的外边距都设置为 auto

<style>
    div {
        width: 300px;
        margin: 0 auto;
    }
</style>

Tips:
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。

②外边距合并

使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况：

1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷

①相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

②嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方法：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow: hidden

③清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

<style>
    body {
        padding: 0;
        margin: 0;
    }
</style>