这几天重温了一下HTML，感觉css中这几个元素的使用有很多人会有点迷糊，下面我来总结一下我的整理成果。
position
看到这个元素，很多初学者会发现很陌生，感觉好像就没有用到过，不过这个元素也挺好用的。
position：static；这个属性是系统默认显示的，没有别的特殊定位，对象遵循正常的文档流，如果你使用top，right，bottom，left等属性都不会被应用。
position：relative；这个是相对的意思，就是相对于自己原来的位置，对象遵循正常的文档流，可以根据top，right，bottom，left等属性来改变自己的位置。
position：absolute；这是绝对，是相对于本元素的父元素来确定位置，对象脱离了正常的文档流，可以通过top，right，bottom，left等属性进行绝对定位，注意：层叠是使用这个属性和z-index属性来定义的，可以进行分层次的操作。
position：fixed；这个属性可能很多人没见过，不过这个属性很有用，一般的网页都能用的上。这个是相对于浏览器的窗口进行定位的，我们浏览一些网页通常左面或者右面就会有一些元素不会随着滚动条的滚动而滚动，一直固定在窗口的那个位置。例如：联系我们、联系客服等等。
display
display:none；这个元素就应该有很多人都用过了，比如不使用js、jquery实现二级菜单的隐藏与显示。这个属性就是隐藏的意思。
display:block；这个是显示的意思，是元素以块级元素的形式显示。
display:inline；这个是以行级元素的形式显示，（这个有可能你设置的宽高会无效）
display:inline-block；这个可以使一些元素不换行显示，能设置宽高。这个元素很好用，比如在做一级菜单的时候，我们用ul标签，我们还要清除点，还要使li元素浮动起来。而使用这个就可以一句话达到使ul中的li一行显示，然后就调边距就好了，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div ul li{
display: inline-block;
}
</style>
</head>
<body>
<!--上面css样式可以不用list-style-type和float浮动就可以去掉点并且自动排一行-->
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
float、clear
float：让元素浮动起来。常用属性是float：left;float：right;分别是向左、向右浮动。这些属性很常用，因为我们在做网页的时候会发现，如果用两个div，你想让这两个div一行显示，而如果你没用这个属性你会发现他们是一上一下显示，而你如果在css里面加入这两个属性的其中一个你就会发现他们就在一行显示了。
clear：清除浮动效果。这个我玩最常用的地方就是用一个选择器选中很多元素然后使之浮动效果，而你又想让其中某一个元素清除浮动效果，这样就可以选中那个这个元素，加上clear：both；这样就可以清除当前元素的浮动效果。
以上总结纯属我一个小白的个人理解，如有不当之处，还请大佬们多多指正。
3893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
