盒子模型

image.png

一个盒子的实际宽度、高度:content+padding+border+margin:

image.png

margin:

image.png

margin 合并（浏览器会合并）：

image.png

文档流

元素分类
block 独占一行 元素的height、width、margin、padding都可设置 <div>、<p>、<h1>...<h6>、
<ol>、<ul>、<table>、<form>
inline
inline-block

浮动流

层定位

image.png

固定定位：

image.png image.png

相对定位：

image.png image.png image.png

相对定位，与绝对定位一起使用

image.png