CSS盒模型、怪异盒模型

html零基础必看——CSS盒模型

前言

在我们使用css3进行网页布局时，往往会用到盒模型，一个大大小小的盒子就是来装内容的，可以说每一个标签元素都是一个盒子。本章将对盒模型展开讲述！

第四章：CSS盒模型

前言
一、盒模型的基本认识
二、盒模型的四大组成部分
三、怪异盒模型
- 3.1box-sizing属性
- 3.2标准盒模型和怪异盒模型的区别：
总结

一、盒模型的基本认识

1.1.什么是盒模型

CSS在处理网页时，它认为每个元素都包含在一个不可见的盒子里。盒子有内容区域、内容区域周围的空间（内边距padding）、内容边距的外边缘（边框border)和边框外面将元素与相邻元素隔开的不可见区域（外边距margin）。如下图

在这里插入图片描述

1.2.盒子的组成

一个盒子由内到外可以分成四个部分：content（内容）、padding（内边距）、border（边框）、margin（外边距）。
其中，content是HTML元素的内容，而padding、border、margin都是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。

1.3.盒子的大小

盒子的大小指的是：盒子的宽度（width）和盒子的高度（height）。而盒子的宽度和高度是由：内容、内边距、边框、外边距四个部分共同组成的。计算方式：

盒子的宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

width = content + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

height= content + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

二、盒模型的四大组成部分

2.1.内容区content

content = width + height

1.width 和 height 分别是元素内容区域的宽和高，内容区在未设置宽和高度时，盒子的高度默认是由内容撑开的，而宽度默认是和它父级元素的宽度一样。
2.可通过手动设置 width、 height 属性来指定固定的大小。
3.取值：像素px、百分比等
4.有些标签不能自己定义盒子的宽和高，如span、a、p、b、strong、i、em等一些行内元素

<head>
    <title>content内容</title>
    <style>
        .div1 {
      
      
            width: 800px;
            height: 200px;
            background-color: green;
        }

        .div2 {
      
      
            width: 900px;
            height: 300px;
            background-color: hotpink;
        }

        .p0 {
      
      
            background-color: blue;
        }

        .p1 {
      
      
            background-color: blue;
        }

        .p2 {
      
      
            width: 300px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <p class="p0">我是p0，我没有设置宽和高，我的宽度和我父级body一样宽，高度由我自己文字来撑开</p>

    <div class="div1">
        <p class="p1">我是p1，我没有设置宽和高，我的宽度和我父级div1一样宽，高度由我自己文字来撑开</p>
    </div>

    <div class="div2">
        <p class="p2">我是p2，我设置了宽和高</p>
    </div>
</body>

注意，内容区在未设置宽和高度时，盒子的高度默认是由内容撑开的，而宽度默认是和它父级元素的宽度一样。
看效果图：
在这里插入图片描述

2.2.内边距padding

内边距是在内容和边框之间的区域，也叫内填充，通过给padding属性指定值来设置元素上下左右内边距。

2.2.1padding属性值的写法：

使用一个值：这个值会作用于上下左右四个内边距

使用两个值：第一个值作用于上下，第二个值作用于左右

使用三个值：分别作用于：上、左右、下

使用四个值：顺时针依此作用于：上、右、下、左

单独一个个值：如padding-top、padding-right等

注意，内边距默认值是0，不允许有负值。

<head>
    <title>padding内边距</title>
    <style>
        .div1 {
      
      
            width: 500px;
            height: 100px;
            background-color: pink;
            /* 使用一个值来控制内边距，这个值作用于上下左右四个方向 */
            padding: 10px;

            /* 使用两个值来控制内边距，分别作用于：上下   左右 */
            padding: 5px 7px;

            /* 使用三个值来控制内边距，分别作用于：上 左右  下*/
            padding: 5px 8px 10px;

            /* 使用四个值来控制内边距，顺时针依此作用于：上 右 下 左*/
            padding: 5px 7px 9px 3px;

            /* 使用单方向单独一个一个的设置 */
            padding-top: 2px;
            padding-right: 3px;
            padding-bottom: 5px;
            padding-left: 6px;
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
</body>

我们可以在浏览器中打开控制台查看内边距
效果图：
在这里插入图片描述

2.3.边框border

border是元素的边框，边框可以应用于任何元素，包括图像。定义边框可以使用三个属性：border-style、border-width、border-color分别设置边框的风格、宽度和颜色。

2.3.1边框的风格

border-style属性的值常见的有：none、solid（实线）、dotted（点线）、dashed（虚线）、double（双线）等

2.3.2边框三个属性的值的写法

三个属性一起用，一般左到右是大小、风格、颜色属性

1. 三个属性一起混合用，如：
border: 5px solid red;
2. 单方向三个属性一起用，如：
border-top:2px solid red;
border-right:6px dotted yellow;
border-bottom:8px dashed blue;
border-left:9px double green;
3. 单个属性使用，支持一到四个值和单方向的写法，方法同padding
/* 单个属性一到四个值的*/，如：
border-width:10px;
border-width:10px 4px;
border-width:10px 3px 4px;
border-width:10px 2px 3px 4px;
border-style: solid;
border-style: solid double;
border-style: solid double dotted;
border-style: solid double dotted dashed;
border-color: red;
border-color: red yellow;
border-color: red yellow blue;
border-color: red yellow blue green;
/* 单方向单个属性 */，如：
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: blue;
以上1、2两种常用，3比较少用，感兴趣的可以自己尝试写写

2.4.外边距margin

margin外边距是元素（盒子）与相邻元素（盒子）之间的空间，通过给margin属性指定值来设置元素的上下左右外边距

2.4.1 margin属性值的写法：

可一到四个值，也可单独设置，规则同padding。

2.4.2 外边距的默认值

<head>
    <title>margin外边距</title>
    <style>
        div{
      
      
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>

我们给一个盒子设置高度和背景颜色，没有设置宽度，此时这个盒子的默认宽度应该是和他的父级body也就是和浏览器一样宽，但此时，我们发现盒子周围有空隙，这个因为盒子有默认外边距，默认是8px，我们打开控制台也可以看得到。
效果图：
在这里插入图片描述

外边距有默认值，为8px。一般可用通配符或是通过引入外部样式来清除默认外边距

2.4.3 auto属性值

使左右外边距参考父级元素宽度从而达到自适应居中，但对于高度无变化，因为涉及到外边距合并问题。

2.4.4 父子外边距合并问题（嵌套）

我们先来看一段代码：

<head>
    <title>Document</title>
    <style>
        div {
      
      
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        p {
      
      
            width: 100px;
            background-color: brown;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div>
        <p>我是p</p>
    </div>
</body>

我们在div盒子（设置宽和高都是200px）里面放了一个子元素p盒子（宽使100px，未设置高，则高度由文字默认撑开），给p盒子加了一个50px的上下外边距，auto左右自适应居中。可结果是，左右自适应居中了，上边距没出来是这两盒子都往下跑了。这就涉及到了上下外边距合并的问题。
效果图：
在这里插入图片描述

解决父子外边距合并问题：

1.给父级添加一个顶部边框，border-top:1px solid red;
2.给父级添加一个顶部内边距，padding：2px;

2.4.5 兄弟外边距合并问题（上下排列）

同样来看这段代码：

<head>
    <title>解决兄弟外边距合并问题</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1{
      
      
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .div2{
      
      
            width: 300px;
            height: 300px;
            background-color: green;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>我是盒子1</p>
    </div>
    <div class="div2">
        <p>我是盒子2</p>
    </div>
</body>

我们设置两个盒子div1（宽和高都是200px）和div2（宽和高都是300px，然后给盒子一加一个下外边距100px，给盒子2加一个上外边距200px，此时两盒子之间的外边距应该是300px，而实际只有200px，是因为有100px外边距涉及到兄弟外边距合并了。
解决兄弟外边距合并问题

给两盒子其中任意一个盒子添加：display: inline-block，使其变为行内块元素即可。（下张会讲到行内块元素）

三、怪异盒模型

3.1box-sizing属性

通过box-sizing属性制定盒模型类型，其属性值：

content-box 是默认值，表示标准盒模型

border-box 表示是怪异盒模型

3.2标准盒模型和怪异盒模型的区别：

根本区别是计算的内容区不同

标准盒模型

在标准和模型中：width指的就是内容区域content的宽度，height指的就是内容区域content的高度。

盒子实际的大小：width=content+border+padding+margin;

盒子实际的大小：height=content+border+padding+margin;

怪异盒模型

在怪异和模型中：width（height）指的就是content+border+padding+margin，也就是说给盒子设置的内边距和边框都要从原本设置的内容宽高里面挤出来，因此实际内容就被缩减了。
width=(content+border+padding)

<head>
    <title>怪异盒模型</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1{
      
      
            /* 这是一个标准盒模型 */
            /* 通过box-sizing属性来指定盒模型类型，它的默认值是content-box是标准盒模型 */
            /* box-sizing: content-box; */
            width: 300px;
            height: 200px;
            background-color: pink;
            padding:10px;
            border: 20px solid red;
            margin: 30px;
            /* 
            标准盒模型：
            内容宽度：还是width：300px
            内容高度：还是height：200px
            盒子总宽度：420=300+10+10+20+20+30+30
            盒子总高度：320=200+10+10+20+20+30+30
            */
        }
        .div2{
      
      
            /* 声明一个怪异盒模型 */
            box-sizing: border-box;
            width: 300px;
            height: 200px;
            background-color: pink;
            padding:10px;
            border: 20px solid red;
            margin: 30px;
            /* 
            怪异盒模型：
            内容宽度：width(300)-(10+10+20+20)=240
            内容高度：height(200)-(10+10+20+20)=140
            盒子总宽度：360=240+10+10+20+20+30+30
            盒子总高度：260=140+10+10+20+20+30+30
            */
            /* 
            标准盒模型中：
            它的内边距和边框是向外扩张，不占用内容部分，所以内容部分宽和高还是原内容设置的宽和高；
            它的最后总宽度（高度）是：原content+padding+border+margin
            
            怪异盒模型中：
            它的内边距和边框是向内缩减，要占用内容部分，所以内容部分宽和高还是原内容设置的宽和高减去内边距和边框部分；
            它的最后总宽度（高度）是：原content+margin；或新content+padding+border+margin
            */
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>我是标准盒模型</p>
    </div>
    <div class="div2">
        <p>我是怪异盒模型</p>
    </div>
</body>

我们在浏览器中打开控制台分别查看标准盒模型和怪异盒模型，
效果图：
在这里插入图片描述

标准盒模型中：

它的内边距和边框是向外扩张，不占用内容部分，所以内容部分宽和高还是原内容设置的宽和高；
它的最后总宽度（高度）是：原content+padding+border+margin

怪异盒模型中：

它的内边距和边框是向内缩减，要占用内容部分，所以内容部分宽和高还是原内容设置的宽和高减去内边距和边框部分；
它的最后总宽度（高度）是：原content+margin；或新content+padding+border+margin

总结

上述是小编为大家整理的一些CSS盒模型初步认识，并对内容、内边距、边框、外边距四个部分进行了一个比较详细的讲解，最后还介绍了怪异盒模型。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。