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。
css实现保持div的等宽高比
css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。这里以 4:3 为例，通过2种方式来实现
css之定位
定位是css当中一种操作html元素布局的方案;属性position:static：默认值，无特殊定位，对象遵循HTML原则；absolute：绝对定位，将对象从文档流中完全拖离出来;fixed：类似于绝对定位的方式.
你以为 CSS 只是个简单的布局？
本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。
浮动，定位，flex布局
正常的布局流是将元素放置在浏览器视口内的系统：块级元素（display:block）在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
html使用frame框架导航跳转至指定的节的用法
主要内容：左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
flex布局
Flex（Flexible Box）弹性布局:任何一个容器都可以指定为Flex布局,注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效,采用flex布局的元素，称为flex容器（flex container）
纯CSS完美实现垂直水平居中的6种方式
由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整
CSS三种布局模型是什么？
在网页中，元素有三种布局模型：流动模型（Flow） 默认的、浮动模型 (Float)、层模型（Layer）。下面我们来看一下这三种布局模型。
巧用CSS3的calc()宽度计算做响应模式布局
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度
css圣杯布局的实现方式
css圣杯布局思路：外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定，中间宽度自适应。中间栏优先渲染。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!