CSS盒模型总结

今天来总结一下关于CSS盒模型的一些相关知识，简单来说CSS盒子模型就只是一个形象的比喻，把每一个可见的HTML元素都可以说成是一个盒子，以下通过两个方面来简单总结一下。

1.盒子的组成

盒子一般是指块级元素，一个盒子由外边距（margin）、内边距（padding）、边框（border）以及内容区域（content）组成，我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。如同所示例：

 1.1盒子的属性

margin（外边距 ）：代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

border（边框）：设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding（内边距）：内间距 在任何定义的边界内的元素内容周围生成空间

除此之外，还会给设置width & height（宽高），这里的宽高是设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

需要注意的是：边框属性，外边距属性和内边距属性如果上下左右的值不相同的时候需要按照顺时针方向编写，即上右下左。

2.css的两种盒模型

2.1W3C盒子

W3C盒子也叫默认盒子、内容盒子、标准盒子。

在编写代码的时候，使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。要注意的是如果是W3C盒子，此时定义的宽高仅仅表示盒子内容区所占的宽高。

 那么，W3C盒子的属性如下：

width 属性仅表示盒子内容所占的宽度

height 属性仅表示盒子内容所占的高度

盒子的宽=width+左右边框+左右内边距

盒子的高=height+上下边框+上下内边距

盒子所占屏幕的高=盒子的高+上下外边距

盒子所占屏幕的宽=盒子的宽+左右外边距

2.2IE盒子

IE盒子也叫边框盒子、怪异盒子，box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。要注意的是如果是IE盒子，此时宽高仅仅表示盒子的宽高。

那么，IE盒子的属性如下：

内容区的宽=width-左右内边距-左右边框

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高=height-上下内边距-上下边框

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽=width+左右外边距

width+marginLeft+marginRight

所占屏幕空间的高=height+上下外边距

height+marginTop+marginBottom

2.3两种盒子模型的区别

内容盒子：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

边框盒子：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

3盒子背景样式设置

3.1盒子的背景样式属性

 background-color 背景颜色：专门用来设置标签的背景颜色的 ​

background-image 背景图片：专门用于设置背景图片的 ​

注意点: ​ 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址 ​ 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充 3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

background-repeat 背景平铺属性：专门用于控制背景图片的平铺方式的

background-position 背景定位属性：专门用于控制背景图片的位置

3.2关联方式

关于背景的关联方式，默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么 我们就可以修改背景图片和滚动条的关联方式：

在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

格式 ​ background-attachment：scroll;

取值： ​ scroll 默认值， 会随着滚动条的滚动而滚动 ​ fixed 不会随着滚动条的滚动而滚动

3.3背景图片和插入图片的区别

​1.背景图片仅仅是一个装饰, 不会占用位置 ​ 插入图片会占用位置

2.背景图片有定位属性, 所以可以很方便的控制图片的位置 ​ 插入图片没有定位属性, 所以控制图片的位置不太方便