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

观察下面代码进一步理解文档流定位和浮动定位相结合

<<!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前端开发》北京林业大学，孙俏等老师。