CSS之盒子模型

一.什么是盒子模型

一个HTML标签就是一个盒子。HTML中所有的盒子都是矩形的
专业一点的定义：CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。

二.盒子模型组成区域

一个网站就是一个个盒子堆起来的。一个盒子模型有如下几个部分组成：
    盒子中内容区域
    盒子的内填充区域
    盒子的边框区域
    盒子的外填充区域
    盒子的背景区域

三.盒子模型常见的属性

width： 表示内容区域的宽度
height：表示内容区域的高度
margin：用来设置盒子的外边距，指边框到另一个盒子外边距的距离
padding: 用来设置盒子的内边距，指内容与边框之间的距离
border：用来设置盒子的边框
background：设置盒子的背景

四.盒子模型中属性的基本用法

1.width 和 height的用法：

表示盒子内容的宽度和高度。不是指盒子的宽度和高度。
一个盒子在网页上占据的宽度：
        width+左右padding+左右border+左右的margin
一个盒子在网页上占据的高度：
        height+上下padding+上下border+上下的margin
在PC端一般都设置单位为px，如果要实现响应式，则可以使用百分比。
**注意细节：**
1）如果没有doctype，在ie6以下的浏览器，规则不太一样。
2）width它有默认值，是auto，对于块级元素和行内元素auto可以这样理解：对于块元素auto是贪婪性，占父元素100%，对于行内元素是懒惰性  宽度由内容撑起来
3）实际上，对于行内元素而言，其宽度是由内容本身决定，其高度是则是由font-size决定。
4）width和height可以设置百分比，相对于父元素人width和heigth而言的。
5）设置百分比，在移动端开发时会用到，PC端很少用到，当然PC端的咋响应式开发也会用到。
对于块级元素来说，width 和 height表示内容区域
对于行内元素来说，width 和 height无效

2.border的用法

border：
盒子的边框。通常在CSS中，设置盒子的边框需要设置边框的粗细，边框样式，边框颜色。
一个盒子的边框由border-widht（边框粗细）, border-style（）边框样式, border-color（边框颜色）组成。
这三个子属性没有固定顺序，一般约定为：粗细-->样式-->颜色 
边框也是有四个方向：
    border-top, border-right, border-bottom, border-left。
**border-width的设置**
表示边框的粗细，我们有两种方式设置：
具体的像素值，如5px, 推荐使用
使用英文单词，thin, thick, medium很少使用，不同的浏览器解析的大小一样的
***border-style的设置***
表示边框的样式，有如下几个属性值：
solid 实线
dotted 点画线
dash  虚线
none 没有
***border-color的设置***
用来设置边框的颜色，可以用三种方式表示：
颜色英文单词名称：
rgb函数；十六进制
最多的就是直接border:1px solid red;  如果一个盒子仅仅有一个边框，那么我们也会设置这一边框。

注意：

• 只设置边框的粗细，在谷歌浏览器中是没有效果的。
• 要让让边框显示出来，至少要设置边框的粗细和边框的样式，边框的颜色有默认值，是黑色。

3.padding的用法

padding:
    内边距，也叫补白，表示盒子内容区域到边框的距离。
padding也是有四个方向：
        padding-top
        padding-right
        padding-bottom
        padding-left
padding后面的跟的值可以是：
        1个值： padding:10px  表示这个盒子的上右下左的内边距都是10px。
        2个值： 第1个值表示上下，第2个值表示左右。
        3个值： 第1个值表示上，第2个值表示左右，第3个值表示下。
        4个值： 顺序是上，右，下，左
对于块级元素来说，padding在四个方向都可以设置。
对于行内元素来说，padding在垂直方向上是不影响网页空间的，水平方向还是影响网页的空间。
有些标签是有默认的padding:
        ul和ol标签的默认的padding是40px   ...
        所以说，上来直接去掉默认的padding  *{margin:0; padding:0;}

4.margin的用法

margin：
    外边距，使用margin表示盒子与盒子之间的距离。
margin也是有四个方向：
        margin-top
        margin-right
        margin-bottom
        margin-left
margin后面的跟的值可以是：
    1个值：  margin:10px  表示这个盒子的上右下左的外边距都是10px。
    2个值： 第1个值表示上下，第2个值表示左右。
    3个值： 第1个值表示上，第2个值表示左右，第3个值表示下。
    4个值： 顺序是上，右，下，左
很多标签有默认的margin：
        body的默认margin在谷歌浏览器下 上下左右都是8px 
        p的默认margin 上下是16px  左右是0
        h1的默认margin 上下是21px  左右是0
        ul的默认margin 上下是16px  左右是0
        ... 
有默认的Margin肯定是不利于布局与美化，所以一般情况下都会清除默认的marign:
        *{margin:0;}  如果是0的话，px可以不写。
margin的应用：
     1）可以让块级元素水平居中。  margin: 0 auto;
     2）让一个网页的版心居中。  w960 
元素之间的塌陷：
	1）兄弟元素之间的塌陷
	解决方法：尽量设置单边的Margin, 也就是说，设置上面元素的margin-bottom , 或者设置下面元素的margin-top
	2）父子元素之间的塌陷 
	解决方法：
	1）给father加上border-top就OK  可以设置边框是透明的  border-top: 1px solid transparent;
    2）给father加上padding-top就OK 
    3）给子元素设置成行内块
margin可以设置成负值，如margin-left:正值   表示远离left方向  
					  margin-left：负值  表示靠近left方向 
margin可以为负值，来增加一个容器的宽度。
解决1px边框问题：
    1）可以给son设置一个方向的边框，如就设置border-right，给最后一个盒子设置border-right是0
    2）可以使用margin为负值  margin-left:-1px   可以让两条边框重叠到一起

注意：

• margin也可以使用百分比，是相对于父元素的width而言
• 对于行内元素，margin在垂直方向上无效
• margin的重叠现象（margin塌陷）（取大优先）
• margin可以设置为负值

5.background的用法

background:
    用来设置盒子的背景：
        背景颜色
        背景图片
背景颜色： background-color
        背景颜色会填充一个盒子的内容区域和padding区域，以及边框。
背景图片：background-image
        url()函数，表示用来指定一个背景图片的路径的，()里面可以加"",也可以不加。
        默认情况下，一个盒子的背景图片，会平铺一个盒子，在水平和垂直方向上都会平铺。
        可以通过一个属性，来指定是否平铺，叫backgroud-repeat
        默认情况下，背景图片的左上角和盒子的padding的左上角是对齐。 
        可以通过一个属性，来指定背景图片的位置，叫background-position
background-repeat
作用：用来控制背景图片在元素中水平和垂直方向上是否重复
取值有如下四个：
repeat, 也是默认值，在水平和垂直方向上都平铺
no-repeat, 完全不重复， 有且只有一张图片
repeat-x, 在水平方向上平铺
repeat-y, 在垂直方向上平铺（向下为正）
background-position
作用：用来设置背景图片的位置
格式：background-position:position-x position-y
在具体设置时有三种方式：
1，使用关键字：top, left, right, bottom
2，使用百分比：0%, 50%, 100%(不常用)
3，使用像素值：25px, 100px

元素分类

在HTML，元素是进行分类的：
    块级元素（男标签）：
        表格标签
        div
        h1, h2, h3, h4, h5, h6
        p 
        ul li ol li dl dt dd  
        form 
    行级元素（行内元素   女标签）：
        span, a, em, strong, label, button, i...
    行内块元素 （人妖标签）：
        img input 
分三类的话：块级元素，行内元素，行内块元素。
盒子模型上的6大属性，对不性别的标签的作用是不一样的：
    对于块级标签来说，独占一行，盒子模型上的6大属性都是生效。
    对于行内元素来说，并排显示，width和height是不起作用，设置了也是白设置。margin和padding在水平方向上有效，在垂直方向上是没有效果。
    对于行内块元素来说，它可以并排显示，除了不独占一行外，其它的和块级标签一样。也就是盒子模型上的6大属性都是生效。