笔记一篇，备查。
盒模型：
margin：外边距
border：边框
padding: 内边框
元素的总width = margin-left + margin-right + padding-left +padding-right + 元素的width
元素的总height = margin-top + margin-bottom + padding-top +padding-bottom + 元素的height
这篇文章介绍的很详细，此处搬运大神写的教程地址：
盒模型的介绍传送门
块元素（block）
占行(自动换行， 可设置高宽)，例如：<div>，<p>,<h1>，<h1-h6>,<pre>,<label>,<table>,<form>,<li>,<ol>,<ul>等
行内元素（inline）
不占行(不自动换行，无法设置宽高)，例如：<span>，<a>，<img>，<i>，<em>，<sub>，<sup>等
行块级元素
拥有内在尺寸（可设置高宽，不会自动换行 )，例如：<button>，<input>，<textarea>，<select>，<img>
等
CSS基础概念
display的常见属性
none 隐藏元素
block 将元素设置为块级元素，元素前后会有换行符
inline 将元素设置为内联元素，元素前后没有换行符
inline-block 将元素设置为行内块元素。
inherit 从父元素继承 display 属性的值
position的定位属性
absolute
相对于 static 定位以外的第一个父元素进行绝对定位。
位置属性：“left”，“top”，“right” ， “bottom”
fixed
相对于浏览器窗口进行绝对定位。
位置属性：“left”，“top”，“right” ， “bottom”
relative
相对于其正常位置进行相对定位。
static
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
从父元素继承 position 属性的值。
文档流的概念
文档流：指的是文档中的对象在排列时所占用的位置。将窗体自上而下分成行，并在每行中按从左至右的顺序排列元素。
此处搬运大神写的教程
文档流的概念传送门
文档流的概念和position定位传送门