标签元素的display属性可以指定标签的显示方式，该属性可以设置多种不同值，比如block、inline、inline-block、none等，标签默认值是block。
block的意思是任意一个元素都占据满满一行，下一个元素出现的位置是下一行。下面是示例示图，每个矩形都是占据一行的位置：
inline-block的意思是每个元素还是看成一个整体，但是不是占据满满一行，而是从左到右依次排列，直到排不下才转到下一行。下面是示例图：
inline的意思是把所有的元素都排成一排，但是每个元素都不是block，每个元素都挨的比较近（codeacademy中的原话是： inline places all your elements on a single line. but it doesn't maintain their "box"ness: as you saw, all your <div>s got squished to the smallest possible width!）。下面是个截图：
2）采用margin属性调整标签外边界
margin属性用于设置标签距离网页上下左右边或者与其他标签的外边距离，类似于word中设置页边距。可以在margin属性中设置1-4个值，值的内涵是上边距、右边距、下边距和左边距。margin也可以分为四个子属性，分别是margin-top、margin-right、margin-bottom和margin-left，意义是上边距、右边距、下边距和左边距。下面是例子和示意图：
margin:10px 50px 10px 500px;
第一个标签的margin是距离网页几个边的距离，而第二个标签的margin是相对于第一个标签的设置。
3）采用padding属性调整标签内边距
padding属性用于设置标签内部内容距离标签边框的距离，可以统一设置，例如按照上边距、右边距、下边距和左边距的顺序依次设置padding值（padding=2px 3px 4px 5px，或者padding=2px，表示各个方向的边距都是2px），也可以分成4个子属性进行设置，分别是padding-top、padding-right、padding-bottom和padding-left，意义是上边距、右边距、下边距和左边距。下面是例子和示意图：
4）采用float属性和clear属性设置标签位置
float属性用于设置标签向网页的哪个方向靠拢，有点像C# winform中控件的dock属性，如果float属性取right时，则具有float属性的标签会依次从右到左排列，取left属性的时候类似。而clear属性用于设置标签的哪一侧不予许其他元素靠拢 。下面是例子和示意图。
position属性用于计算标签的实际位置，不同的取值计算得到的标签位置也不同。position属性常用取值有static、absolute、fixed、relative。static属性是指标签出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）；fixed属性是指采用top、bottom、left和right属性的值作为绝对坐标值对标签进行定位，起始点是网页的边框；absolute属性也是绝对坐标值，不过起始点是相对于 static 定位以外的第一个父标签；relative属性是指相对于static属性的标签的相对位置，也就是relative标签的实际位置是其取static值时的位置加上当前的top、bottom、left和right属性的值得到值。标签默认position取值为static。下面是例子和示意图。
CSS文件设置：
div
{ height: 75px; width: 75px; border-radius: 5px; border: 2px solid black; }
#fixed { top:100px; left:200px; position:fixed; }
#absolute { top:100px; left:100px; position:absolute; }
#relative { top:100px; left:100px; position:relative; }
HTML文件：
<body>
<div>正常static位置1</div>
<div>正常static位置2</div>
<div>正常static位置3</div>
<div id="relative">relative位置</div>
<div id="absolute">absolute位置</div>
<div id="fixed">fixed位置</div>
</body>
效果图：
参考文献：
4403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
