css盒模型

一.盒模型概念

1.css盒模型是css布局的基石，它定义了如何显示网页元素和元素之间的关系。指定所有元素都可以有类似于盒子和平坦空间的形状。这意味着它包含的内容空间和填充物，边界和边缘，这是盒子模型。下面展示的是盒模型的图例：
2.盒子模型的平面结构图

CSS盒模型由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

3.盒子模型的三维结构图
元素内容（content）、内边距（padding），两者同位于第二层
背景图（background-image），位于第三层
背景色（background-color），位于第四层
整个盒子的外边距（margin），位于第五层
盒模型–边框 - border
元素的边框 (border) 是围绕元素内容和内边距的
一条或多条线

二.盒模型–内边距- padding

CSS padding 属性定义元素边框与元素内容之间的空白区域
（padding就相当于盒子里面的泡沫 2、padding就是和边框之间距离）

1.【内边距设置值的方式】
padding:10px; 上下左右都加了10像素
padding:5px 10px;上下5像素 左右10像素
padding:5px 6px 7px;上5像素 左右为6像素 下为7像素
padding:5px 6px 7px 8px;上5px 右6px 下7px 左8px

2.【给单一方向设置padding】
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左

三.盒模型–外边距- margin

CSS margin 属性定义元素与元素之间的区域（margin在盒子的最外面）
**1.【margin设置值的方式】
一个值：margin:5px上下左右 都是5px
两个值：margin:5px 6px 上下5px 左右6px
三个值：margin:5px 6px 7px; 上5px 左右6px 下7px;
四个值：margin:5px 6px 7px 8px; 上5px 右6px 下7px 左8px
2、给单一方向设置margin
margin-top 上
margin-left 左
margin-right 右
margin-bottom 下

四.盒模型属性

1.overflow 属性规定当内容溢出元素框时发生的事情值 描述
2.visible 默认值。内容不会被修剪，会呈现在元素框之外
3.hidden 内容会被修剪，并且其余内容是不可见的
4.scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
5.auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
6.inherit 规定应该从父元素继承 overflow 属性的值

五.盒模型应用

CSS中的盒子模型是为了让我们充分理解div+css模型的定位功能，就是利用盒子模型这样的布局方式代替了传统的表格布局方式，所以盒子模型是在学习div+css布局方式中必须要学习的一个模型，通过这个模型能够明白网页中div和div之间的相对位置是如何布局的。