一、盒子模型
从内而外分别表示内容、内边距，边框宽度、外边距
。并且每一个属性都分为上下左右四个方向。
1.1.盒子的overflow属性
hidden：超出部分不可见
scroll：显示滚动条
atuo:如果有超出部分则显示滚动条
#footer{
height: 60px;
background-color: #6cf;
overflow: scroll;
}
1.2.盒子的border属性：
boder-width:px\thin\medium\thick
border-style:dashed（虚线）\dotted（虚线）\solid（实线）\double（双下划线）
border-color:颜色
定义的时候按width、style、color顺序定义。
定义方法有：
1.3.初始化盒子模型边距手应遵循从上右下左顺时针方向初始化。
如图可进行缺省定义：左右等价
margin:0 auto等价于居中对齐
1.4.两个盒子之间的边距等于设置的较大的哪一个边距，而非二者之和。
二、机制概述
2.1.文档流定位
bolck：独占一行可设置宽高属性
inline：可多个占一行，不能设置宽高属性，inline元素之间会存在间距。
inline-block上述两个结合的优点，最常用。
用display来定义元素特点，最常用为display:inline-block;
2.2.浮动流定位
方便实现盒子的按列排序：
用float来定义
观察下面代码进一步理解文档流定位和浮动定位相结合
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
body{
font-size: 14px;
}
#container{
margin:0 auto;
width: 1000px;
height: 700px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;
}
#main{
height: 500px;
/*background-color: #ccf;*/
margin-bottom:5px;
}
#aside{
float: left;
width:300px;
height: 500px;
background-color: #6cf;
margin-right: 5px;/*因为aside和content都是向左浮动定位，所以需要保留间隙需要用到盒子的整体结构*/
}
#content{
/*float: right;*/
float: left;/*开启浮动定位*/
width: 695px;
height: 500px;
background-color: #ccf;
}
#footer{
height: 60px;
background-color: #6cf;
overflow: scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="footer">
<p>aksjdh kjahsdkj haskdjh skah </p>
<p>aksjdh kjahsdkj haskdjh skah </p>
<p>aksjdh kjahsdkj haskdjh skah </p>
<p>aksjdh kjahsdkj haskdjh skah </p>
</div>
</div>
</body>
</html>
clear属性主要是单向清楚浮动。
footer清楚两侧浮动。clear:both;
2.3.层定位
用position来定义属性
fixed固定定位，不会随浏览器滚动而滚动
relative相对定位，原来位置依旧保留，相对于直接的父元素
absolute绝对定位，原来位置不进行保留，相对于上层定义为相对/绝对定位的父层，若无则直接相对于body层
还有z-index属性，用于设置值，值大的在最外层。
一般先用相对定位和绝对定位结合使用，先用相对定位，再用绝对定位，这样能使绝对定位的元素跟素相对定位的元素移动而移动。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
border:2px red solid;
color: #fff;
}
#box1{
width:170px;
height:190px;
position:relative; /*此为相对定位*/
}
#box2{
width:99%;
position:absolute; /*此为绝对定位*/
bottom:0;
}
</style>
</head>
<body>
<div id="box1">
<img src="2.jpg">
<div id="box2">一起享受咖啡带来的温暖吧</div>
<!--先相对定位，再绝对定位，这样子就可以让box2相对于box1移动-->
</div>
</body>
</html>
感谢阅读！
参考于中国大学慕课《web前端开发》北京林业大学，孙俏等老师。
