css布局以及元素定位

position(定位)

static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或者多个框，置于其父元素中。

relative：元素框相对于之前正常的文档流中的位置发生偏移，并且原先的位置依旧被占据，发生偏移时，可能会覆盖其他的元素。

absolute：元素框不占有文档流的位置，并且相对于包含快进行偏移（这个包含快是指，最近一级外层元素position不为static的元素）。

fixed：元素框不占有文档流的位置，并且相对于视窗进行定位。

sticky：粘性定位，相当于relative和fixed的融合。

---

尺寸

%：百分比的参照物是父元素。

rem：相对于复杂的设计图相当有用。

em：是一个相对单位，相对于父元素的font-size。

---

盒子模型

每个元素都会形成矩形块。margin + border + padding + content

宽度默认的属性是auto，内部元素的长度自动充满父元素。

标准盒子模型：width = content的宽度

box-sizing：border-box时，width = border + padding + content

这里另外插入一个小小的居中内容，块级元素的水平居中只要将水平方向上的margin设置成auto就可以啦~垂直方向的居中就没有如此容易了，在后续的内容中，会有一篇关于居中的。

---

浮动

在我的理解中，浮动其实是为了实现文字的环绕特效，并不是为了布局而产生的。

这里介绍一些清除浮动的方法

1.将其的父级元素设置成：overflow:hidden;

2.after类：对于元素的after伪类进行设置；

3.写一个

,置于改浮动元素之下。

---

布局

两栏布局：一栏定宽，一栏自适应。

三栏布局：两边定宽，中间width:auto，再加上margin来进行设定。

比如两边使用position：absolute来定位，width：200px；中间栏使用margin：0 200px来进行定位。

---

媒体查询

既然讲到布局，就不得不提媒体查询了，这是区别不同设备显示不同的利器