HTML的盒子模型（border和css的3种布局）

盒子(盒子只针对块状元素而言)
分为4层，从里到外分别是：内容--》padding--》border-->margin;
讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。

一、border的属性：

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式，可以分开写：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

 

问题：css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

二、css布局模型
1、流动模型
　　流动（Flow）是默认的网页布局模式，在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
　　

类别	特征
块状元素	块状元素都会以行的形式在所处的包含元素内自上而下按顺序垂直延伸分布
内联元素	在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动模型（float）
　　①可以实现两个块状元素并排显示；
　　②任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动

3、层模型（有三种形式）

 positon有5中属性：

①static:即默认的标准流，和没有设置position一样

②absition：绝对定位

③relation：相对定位

④fixed:固定定位

⑤inherit:继承父元素的定位属性；（如果父元素中没有任何设置了position，那么子元素中即使设置了 position:inherit,top:20px,left:30px;都没有作用，他一定继承父元素position的属性），inherit自己没有实际的意义，

绝对定位(position: absolute)	将元素从文档流中拖出来（如果body中只有一个div，并且div的为绝对定位，那么body的height为0，这就是脱离文档流的意思），然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。(不管是什么定位)如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口（浏览器的窗口大小默认是电脑屏幕的大小，如bottom：0px，那么就是在电脑的底部，若top>电脑的高度，我们再设置bottom：0px的时候，就是body的底部，body可以无限拉升）。（如果left、right、top、bottom都没有设置时，即使设置了position：absolute,也是按照默认流的方式排列，只要设置了top等中的一个即使 top：0px，绝对定位也会起作用）
相对定位(position: relative)	相对于文档流中以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定；（相对于自己原来在流中的位置而言）偏移前的位置被一直被占着
固定定位(position: fixed)	固定定位的元素会始终位于浏览器窗口内视图的某个位置（指的是电脑屏幕的四条边，定位时和body无关），不会受文档流动影响； 固定定位参照对象永远都是浏览器的窗口，与父元素无关，例如：父元素绝对定位left:200px;top:100px;我们设置固定定位的时候，left：20px;top:20px，是相对浏览器而言(left:20px,top:20px)，与父元素无关（不是left：220px，top:120px）。

 z-index:层的概念：必须依赖于position，并且position的属性不能为static

在标准流中，后面元素的层级大于前面元素的层级，当我设置margin-top为负数的时候，就会覆盖上面元素。

在定位中，我们可以通过设置z-index 的值来决定元素的层级，数值越大，层级越高，越在上面；

z-index:的值，受限于父元素，值得比较都是相对父元素而言的，如果父元素的值很小，即使子元素的值很大，也要被其他父元素大的元素所覆盖。

补充：背景图片的使用

background：url("/") center top no-repeat;  //表示的是置顶、居中、不平铺；