一、关于postion。
1.static静态。
<div style="border: 1px solid black; width: 900px;height: 300px;">
<div class="i" style=" background: #4C92FC;"></div>
<div class="i" style=" background: #7FFFD4;"></div>
<div class="i" style=" background: #FFFF00;position:static;"></div>
</div>-->
style=“postion:static;”位置没啥变化,默认选项。
2.fixed:脱离文档流,相对于body进行定位。
<div style="border: 1px solid black; width: 900px;height: 300px;">
<div class="i" style=" background: #4C92FC;"></div>
<div class="i" style=" background: #7FFFD4;"></div>
<div class="i" style=" background: #FFFF00;position: fixed;bottom: 30px;right: 30px;"></div>
</div>
position: fixed;bottom: 30px;right: 30px;无论咋滑动鼠标,只定在网页面的固定位置。
3.relative:并不脱离文档流,相对于自身进行定位
<div style="border: 1px solid black; width: 900px;height: 300px;">
<div class="i" style=" background: #4C92FC;"></div>
<div class="i" style=" background: #7FFFD4;"></div>
<div class="i" style=" background: #FFFF00;position: relative;bottom: 30px;"></div>
</div>-->
position: relative;bottom: 30px;看,黄色边框就飘起来了。在这个<div></div>内黄色框定在左下角。
4.absolute:脱离文档流,相对于postion为非static的副标记定位。
<div style="border: 1px solid black; width: 900px;height: 300px;position: fixed;">
<div class="i" style=" background: #4C92FC;"></div>
<div class="i" style=" background: #7FFFD4;"></div>
<div class="i" style=" background: #FFFF00;position: absolute;bottom: 10px;right: 10px;"></div>
</div>
二、margin和padding
1.margin用于设置当前标记距离周围标记的距离,得是块级元素。
margin-bottom: 10px;(与下面标记距离)
margin-left: 5px;;(与左面标记距离)
margin-right: 5px;;(与右面标记距离)
margin-top: 10px;;(与上面标记距离)
也可以合并这几个项:
margin: 10px;/*一个值上下左右都是10px*/
margin: 10px 5px;/*两个值,上下 左右*/
margin: 5px 10px 5px;/*三个值,上 左右 下*/
margin: 10px 2px 10px 2px;/*四个值按顺时针,上 下 左 右*/
2.padding用于设置当前标记的框内字距框边的距离。
padding: 20px;/*上下左右内边距都是20*/
padding: 10px 20px;/*上下 左右*/
padding:10px 20px 10px;/*上 左右 下*/
padding: 10px 120px 10px 120px;/*顺时针,上,右,下,左,*/
跟margin性质差不多。