css布局

本篇文章需要对css布局技术进行汇总，以达到对布局技术的系统性认知

MDN对css布局的描述：

    CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置

css常见布局

css布局知识点

display属性值：

none：该元素不会被显示；

inline：块级元素，前后有换行符；

block：元素为内联元素；

注：完整display属性值

注：css布局方式：普通流，浮动，绝对定位

position属性：

static：默认值，没有定位；

relative：相对定位，相对本身的正常定位进行修改

absolate：绝对定位，相对于static元素外的第一个元素

fixed：绝对定位元素，相对于浏览器窗口进行定位

margin属性(设置元素外边距大小)：

auto：浏览器计算外边距，常使用于居中显示；

length：使用具体值计算外边距值；

%：使用百分比进行外边距计算；

padding属性(设置元素内边距)：

auto：浏览器计算内边距；

length：使用具体值计算内边距值；

%：使用百分比进行内边距计算；

float属性:

left：元素向左浮动；

right：元素向右浮动；

none：元素不进行浮动；

注意：浮动会自动转化为块级元素