absolute

对盒子进行定位 定位方式分为三类：（1）文档流（2）浮动定位（3）层定位 文档流flow 默认的方式，相当于平常写字一样，从上到下，从左到右 浮动定位float 想要盒子并列排列一般采用浮动定位 层定位layer 使用position属性设定，像图层一样前后层叠在一起 一.文档流flow 文档元素分类 block,inline,inline-block 1.block元素 独占一行 元素的height、width、margin、padding都是可以设置的 常见的block元素： div、段落、列表、标题、表格、表单等 <div>div标签</div> <p>p标签</p> <h1>h标签</xmp></h1> <ul>ul标签</ul> <table>table标签</table> <form>form标签</form> 2.inline 不单独占一行 width、height不可设置 width是由元素里面的文字和图片的宽度决定的，不能改变 常见的inline元素：<span>、<a> <a>a标签</a> <span>span标签</span> 3.inline-block元素： 不单独占一行 元素的height、width、margin、padding都可以设置 常见元素：<image> display属性 二.浮动定位float 1.float属性 float属性

对于前端来说，最重要的莫过于用户体验了，这次我们聊一聊骨架屏 - Skeleton Screen 我们平常对于需要请求加载的内容，可能用的比较多的是loading动画，比如在内容区域放一个菊花图，当请求结束，并且render tree构造完成后，将菊花图移除，展示用户想看的内容。虽然这种方式没啥缺点，但是现在更多的网站开始使用骨架屏代替，因为它能带过来更好的用户体验。 我们看几个例子： facebook jira linkedin slack 上图展示中，我们可以看到每个site从骨架图到真实内容的一个变化。如果你细心一点你会发现，不同site对于骨架图的block位置是不一致的： facebook将用户固定的头像，author，日期和一小部分文字作为骨架主体 jira则是标题和logo对应的很整齐 linkedin可以说完全没有对齐，而是使用一种更加的展示骨架布局 slack则是使用混合的loading方式，有骨架图也有旋转圆，不仅如此，slack并没有全部使用同一种灰色值，不同的block的颜色代表的该区域的字体颜色，这又是一种切换顺滑度的提升。 不过他们都有一个共同点，就是采用简约的方式布局，我们可以以此为例，创造出独一无二的风格，来提高用户体验和加强品牌的风格，我想这会比一个loading logo带来更好的效果。 上面简单的介绍了一下骨架图，接下来我们来说一下具体实现吧。

（初级）css布局 一、单列布局 1、基础知识 块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示、无换行 2、盒子模型 盒子模型 （边框border、外边距margin、内边距padding、内容content） 盒子模型3维立体图：自上往下（边框、内容和内边距、背景图片、背景颜色、 外边距） 样式追求就近原则（行内样式>内部样式>外部样式） 3、自动居中 margin： 0px auto;实现自动居中（原理：外边距=（浏览器的宽度-外包含层的宽度）/2）（此时不能同时设置浮动和绝对定位） 一般情况下： 父层设置一宽度，子层设置100%就可以。（子层继承父层宽度） 4、css布局笔记 4-1 margin：auto #main { width: 600px; margin: 0 auto; } 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案。 4-2 max-width 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况