css的盒子模型与定位机制解读随记

一、盒子模型

从内而外分别表示内容、内边距，边框宽度、外边距
。并且每一个属性都分为上下左右四个方向。

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来定义