1、static（静态定位）：
这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置， 不能使用top，bottom，left，right和z-index。 这种定位不脱离文档流；
2、relative定位（相对定位）：
该定位是一种相对的定位，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。这种定位不脱离文档流；
3、absolute定位（绝对定位）：
注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。（可能我没有描述的很清楚，建议自己写个示例看看效果）。在没有父元素的条件下，它的参照为body。
flex布局
Flex（Flexible Box）弹性布局:任何一个容器都可以指定为Flex布局,注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效,采用flex布局的元素，称为flex容器（flex container）
rem布局和vw布局的理解
rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。css3中引入了一个新的单位vw，与视图窗口有关，vw表示相对于视图窗口的宽度，除了vw，还有vmin和vmax两个相关的单位。
html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中，经常会遇到页面中需要悬浮效果，本文将介绍通过fixed的实现，以及通过原生Js实现滚动到一定位置，实现div的悬浮
css两端对齐——div+css布局实现2端对齐的4种方法总结
css两端对齐，通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。
Web布局：display属性
经过 CSS盒模型 和视觉格式化模型两个章节中的学习，我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）
rem布局原理
rem 是（根）字体大小相对单位，也就是说跟当前元素的font-size没有关系，而是跟整个body的font-size有关系，物理像素是硬件的一个实际像素；而逻辑像素是我们在网页设计中使用的像素
IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏，很容易导致页面布局错位（相对窗体的绝对定位元素）：明明按钮在这里，却要在上面一点儿点击屏幕才能点到它
移动端web自适应适配布局解决方案
100%还原设计图，要注意： 看布局，分析结构。感觉难点在于：1.测量精度（ps测量数据）；2.文字的行高。自动适应屏幕宽度 ：网页的宽度默认等于屏幕的宽度
css之定位
定位是css当中一种操作html元素布局的方案;属性position:static：默认值，无特殊定位，对象遵循HTML原则；absolute：绝对定位，将对象从文档流中完全拖离出来;fixed：类似于绝对定位的方式.
前端响应式布局
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。