清明回来，学长让我看了个网站Single Div，里面的图片都是只用了一个div实现的，484好神奇~而且基本都是使用background-image和box-shadow这两个属性来实现。在看了一堆资料和动手实现了其中两个之后，来总结一下~

background-image

background-image属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。可以根据background-repeat属性来指定图像无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺，也可以根据background-position属性指定初始背景图像（原图像）放置的位置。

more >>

这是我动手实现的第一个页面Frontify，前后花了一个星期的时间，目前还没有考虑响应式页面。以下是我实现过程中遇到的一些问题，及我的一些思考总结。

CSS position 属性

1. static定位

   默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2. fixed定位

   生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
   整个页面的header就是fixed定位的.

   more >>

将窗体自上而下分成一行行，并在每一行中从左到右的顺序排放元素，即为文档流。有三种情况将使得元素脱离文档流，分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。CSS定位，就是元素的position不为static。而该元素将成为其亲子元素的offsetParent，也有机会成为其孙元素的offsetParent。

more >>