CSS基础知识------CSS框模型（盒子模型）

css框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

一些基本属性

边框颜色

属性	说明
border-top-color	上边框颜色
border-right-color	右边框颜色
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-color	四个边框为同一种颜色
border-color：color1 color2	上下为color1 左右为color2
border-color：color1 color2 color3	上为color1 左右为color2 下为color3
border-color：color1 color2 color3 color4	上下左右分别为color1-color4

边框粗细

border-width：边框粗细
值可以是三个默认值：thin，medium，thick
也可以自定义px值
格式与边框颜色的定义方式一致

边框样式

border-style：边框样式
默认值：none，hidden，dotted，dashed，solid，double
格式同上

边框简写

同时设置边框的颜色，粗细和样式。例如

border:1px solid red;

css外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

css的margin属性

设置外边距的最简单的方法就是使用margin属性。
margin属性可以接受任何长度单位，可以是像素，英寸，毫米或em。
margin可以设置为auto。更常见的做法是为外边距设置长度值。
margin 的默认值是 0，所以如果没有为 margin声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

css内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。

css的padding属性

css padding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。

内外边距的格式都与边框颜色的格式一致