css总结（4）

css总结（4）

盒子模型

盒子模型（Box Model）:就是把HTML页面中的元素看作是一个矩形的盒子，一个用来存放内容的容器。每个矩形都由元素的**内容(content)、内边距（padding）、边框（border）和外边距（margin）**组成。

特性：

​ 每个盒子都有：外边距、边框、内边距、内容 4个属性；

​ 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

一、外边距（margin）

margin属性用来设置盒子的外边距。外边距会创建元素与元素之间。通常外边距不能放在其他内容。

​ margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

二、边框（border）

border 属性来定义盒子的边框，该属性有3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。

例如，要设置一个宽度为20px，样式为solid，颜色为黑色的边框应该这样写：border:20px solid black;

在css中有很多边框样式，一下几种是常用样式：

属性值	说明
none	默认值，无边框
hidden	隐藏边框，IE 不支持
dotted	定义边框为点线
dashed	定义边框为虚线
solid	定义边框为实线

border 是一个复合属性，也可以把3个子属性分开定义。

三、内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

​ padding可以分别定义四个方向的边距：

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意： padding后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 10px; 表示上下左右都是10像素
2个值	padding: 上下边距 左右边距 比如 padding: 10px 5px; 表示 上下10像素 左右 5像素
3个值	padding：上边距 左右边距 下边距 比如 padding: 10px 5px 2px; 表示 上是10像素 左右是5像素 下是2像素
4个值	padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px

四、内容(content)

使用width(宽)和height(高)可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素在这里插入代码片的百分比%，实际工作中最常用的是像素值。

​ 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

 外盒尺寸计算（元素空间尺寸）
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  
  内盒尺寸计算（元素实际大小）
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）