两种盒子模型

一.什么是盒子模型？

盒子，和我们生活中的事物的‘盒子‘意思是一样的，所以以此来比喻，称为盒子模型。

盒子模型是css基础很重要的一个知识。只有了解学习盒子模型，才能做网页布局，盒子的排列，从外到内，从大到小，从左到右，就组成了一个完整的大盒子，也就是网页。

二.盒子的组成和作用

一个盒子也叫作一个容器，是由盒子的内容（content），padding（内边距），border（边框），margin（外边距）组成。

用来布局做网页

三.标准盒模型

box-sizing：content-box（默认）

  div {

                box-sizing: content-box;

                margin: 50px;

                padding: 40px;

                border: 10px solid pink;

                width: 200px;

                height: 200px;

                background-color: skyblue;

        }

此时的正常的盒模型。宽高分别是200px。但块的总宽度是300px =  内容的宽度+padding左右+border左右+margin左右。

工作中，标准盒模型，需要自己计算，减去border和padding

四.内减盒模型（怪异盒模型） c3新增盒模型

 

 

 

 div {

                box-sizing: border-box;

                margin: 50px;

                padding: 40px;

                border: 10px solid pink;

                width: 200px;

                height: 200px;

                background-color: skyblue;

        }

此时是自减模式的盒模型。定义的宽包括了 width+border+padding 在+如果有margin。块的总宽度还是200px。

工作中，不需要计算，border-box自己计算，设置多少显示块总宽度多少。