关于css中盒子模型的CSDN博客介绍

盒子模型是css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。

一、css盒子模型概念

1：盒子模型用来放网页中的各种元素
2：网页设计中内容，如文字，图片等元素都可以是盒子（div嵌套）
CSS盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
网页中的每个元素都可以看作一个盒子,盒子有外边距( margin)、边框( border)、内边距(pad
ding)、内容( content)这4个属性：

外边距( margin):是元素与元素之间的距离,或者是元素外面留出的一段空白
内边距( padding):元素里的内容与元素边框之间的距离
边框( border):元素本身
内容( content):元素中放置的东西,元素的宽和高指的是元素中内容的宽和高,并不是元素本身

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

其实讲了这么多还是很难理解盒子模型这个抽象的概念，为了便于大家理解，我从知乎上找来了一个比较生动一点的解释
在这里插入图片描述
可以类别生活中的盒子，就像寄快递时一样（拿快递杯子比喻），content 就是杯子，padding 就是杯子和快递箱子之间防碎的填充层，而 border 就是箱体，最后 margin 就是箱子与车厢的距离

关于高度和宽度的详解

width属性：

宽度：
width：长度值 | 百分比 | auto

最大宽度：
max-width：长度值 | 百分比 | auto

最小宽度：
min-width：长度值 | 百分比 | auto

height属性

高度：
height：长度值 | 百分比 | auto

最大高度：
max-height：长度值 | 百分比 | auto

最小高度：
min-height：长度值 | 百分比 | auto

auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。

关于盒子模型的padding属性介绍

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

Padding属性，可以有一到四个值。

padding 属性的书写格式总共有以下几种：

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下为 5px，左右为 10px */
padding:1px 2px 3px 4px;   /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
padding:5px 10px 7px;      /* 这种写法意思是：上为 5px，左右为 10px，下为 7px */
注意：padding 后面 4 个值定义的顺序分别为 -- 上 右 下 左，即顺时针方向从上开始。

而 padding-top 或者 padding-bottom 这种写法，只是单方面的定义了一个方向的值，这样写会增加 CSS 代码的长度，增加 CSS 样式的代码量，拖慢页面的加载速度。

所有的CSS填充属性

属性	说明
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-right	设置元素的右部填充
padding-left	设置元素的左部填充
padding-top	设置元素的顶部填充

边框border属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
border-color属性用于设置边框的颜色。可以设置的颜色：