CSS 盒子模型

繁星学编程

已于 2022-12-12 22:36:03 修改

阅读量182

点赞数

分类专栏： CSS 文章标签： css 前端经验分享

于 2022-11-26 10:45:11 首次发布

本文链接：https://blog.csdn.net/qq_45867247/article/details/128048992

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

盒子模型

什么是盒子模型？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

计算元素在页面所占据的空间

css规定，所有的元素都为框，所有的元素在页面都占据空间
框：矩形

空间：

内容	填充	边框	外边距
width	padding	border	margin
height

内容（content）

宽高
文本内容

padding（内边距）

padding的特征

位于内容content和边框border之间
padding是加给父元素的，调整子元素或者内容的位置
padding是会撑大盒子的
padding没有颜色，背景色会覆盖到padding区域
谷歌F12中盒子模型的颜色为绿色
padding不支持负值

padding的属性

单边的内边距
padding - 方位词（top/right/bottom/left）

单边的内边距

padding-top: 30px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 60px;

1-4边的内边距 padding

四边

```css
padding: 10px;
```

1-上下 2-左右

```css
padding: 10px 60px;
```

1-上 2-左右 3-下

```css
padding: 10px 20px 30px;
```

1234 - 上右下左

```css
padding: 10px 20px 30px 40px; 
```

padding的注意点

不独占一行的元素只能添加左右内边距，不能添加上下内边距

margin（外边距或外间距）

margin的特征

位于边框border之外
margin值是添加给自身的，调整元素自身的位置或者调整元素与元素之间的位置
margin不会撑大盒子
margin在页面显示中没有颜色
在谷歌F12中显示橘黄色
margin支持负值

margin的属性

单边的外边距
margin方位词（top/right/bottom/left）

单边的外边距

margin-top: 30px;
margin-right: 40px;
margin-bottom: 50px;
margin-left: 60px;

1-4边的外边距 margin

四边
```
margin: 10px;
```
1-上下 2-左右
```
margin: 10px 60px;
```
1-上 2-左右 3-下
```
margin: 10px 20px 30px;
```
1234 - 上右下左
```
margin: 10px 20px 30px 40px; 
```

margin的问题—外边距溢出

父元素里面的第一个子元素添加 margin-top，会把父元素带下来

原因：父元素和子元素共用了 margin-top
解决：

给父元素添加1px的border: 1px solid transparent;或者 1px的 padding-top:1px;

会撑大盒子，影响布局
给父元素添加 overflow: hidden; (触发了BFC)

margin的问题—外边距合并

相邻的上下两个元素，上面有margin-bottom,下面有margin-top,垂直外边距相遇，间距发生了重叠，数值以大的为准

解决：间距写单方向即可

外边距相加

左右两个兄弟元素之间，外边距相遇会以相加的为准

margin的注意点

不独占一行的元素只能添加左右外边距，不能添加上下外边距

元素水平居中

独占一行的元素水平居中

给自身设置 margin: auto
margin: 0 auto (auto：平分空间)

不独占一行的元素水平居中

给父元素设置 text-align: center;

margin和padding的取值

margin支持

数值
负值
auto
百分比（参考父元素的宽度）

padding支持

数值
百分比（参考父元素的宽度）

去除内外边距

很多元素自带内外边距，会影响到布局

/* 重置样式 */
*{
    padding: 0;
    margin: 0;
}

两种盒模型

标准盒子模型默认

box-sizing: content-box

盒子的总宽度: width（元素内容的宽度）+左右的padding+左右的border+左右的margin

width（元素自身的宽度）=width（内容的宽度content）
盒子的总高度: height（元素内容的宽度）+上下的padding+上下的border+上下的margin

height（元素自身的高度）=height（内容的高度）

怪异盒子模型 IE盒子模型（元素加了padding和border会自动压缩盒子内内容）

box-sizing: border-box

padding和border不会撑大盒子
盒子的总宽度=width（元素自身的宽度）+左右的margin

width（元素自身的宽度）=width（元素内容的宽度）+左右的padding+左右的border
盒子的总高度=height（元素自身的高度）+上下的margin

height（元素自身的高度）=height（元素内容的高度）+上下的padding+上下的border

知识拓展：

标准盒模型和怪异盒模型之间的转换：

box-sizing : content-box/boeder-box/inherit;

当为content-box时，将采取标准模式进行解析计算;
当为border-box时，将采取怪异模式解析计算;
当为inherit时，将从父元素来继承box-sizing属性的值;

两个盒模型的区别

标准盒模型

标准盒模型就是W3C的标准盒子模型
内盒尺寸（大小）=width+padding+border
外盒尺寸（空间尺寸）= width+padding+border+margin

怪异盒模型

怪异盒模型就是IE盒模型
内盒尺寸（大小）=width
外盒尺寸（空间尺寸）= width+ margin

两者的效果图对比：
请添加图片描述

盒子模型综合案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 2.右边 */
            .right {
                width: 798px;
                height: 593px;
                background-color: cyan;
                float: left;
            }
            /* 3.右边小盒子 */
            .box {
                width: 192px;
                height: 292px;
                background-color: yellow;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
            }
            /* 4.48的右外边距 */
            .margin0 {
                margin-right: 0;
            }
            /* 5.5678的下外边距 */
            .margin-bottom0 {
                margin-bottom: 0;
            }
        </style>
    </head>
    <body>
        <!-- <div class="left"></div> -->
        <div class="right">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box margin0">4</div>
            <div class="box margin-bottom0">5</div>
            <div class="box margin-bottom0">6</div>
            <div class="box margin-bottom0">7</div>
            <div class="box margin0 margin-bottom0">8</div>
        </div>
    </body>
</html>