定位
css布局：盒模型、浮动、定位 、这些都是最重要的布局属性。
辅助功能属性：a、文本、背景等等，为了让页面更加美观。
定位：相对定位、绝对定位、固定定位。
概念：元素位置相对于某一参考物进行的位置的偏移。
脱标：浮动、绝对定位、固定定位。
1、相对定位
相对定位：元素相对于自身进行的位置偏移。
position：定位属性。
属性值：relative，相对的。
偏移的数据量：方向属性控制，top、right、bottom、left。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background-color: pink; margin-bottom: 10px; } .box{ background-color: skyblue; position: relative; left: 100px; top: 110px; } </style> </head> <body> <div>1</div> <div class="box">2</div> <div>3</div> <div>4</div> </body> </html>
未添加相对定位前效果图↓
添加相对定位后效果图↓
有一个相对定位属性↓
position: relative;
left: 100px;
top: 110px;
元素偏移方向与属性方向是相反的(属性值为正)，我写的属性left100px 其实就是元素向右偏移，top110是以为我加了个10px的下边距。
方向判断：如果属性值为正，偏移方向与属性方向相反↓
right: 100px; 向左偏移100px
left: 100px; 向右偏移100px
top: 100px; 向下偏移100px
bottom: 100px; 向上偏移100px
如果属性值为负值，偏移方向与属性方向相同↓
right: -100px; 向右偏移100px
left: -100px; 向左偏移100px
top: -100px; 向上偏移100px
bottom: -100px; 向下偏移100px
水平和垂直方向可以选择任何一个方向属性进行搭配。
特点：显示的位置是偏移后的位置，原位置保留，没有被其他元素给占有，类似灵魂出窍，肉体在原位，灵魂脱离。
相对定位不会让元素脱离标准流，标准流的位置还是他自己的。
用途不是很多，但是也有自己的特殊用途：
①结构比较稳定，常拿来做绝对定位的参考元素，子绝父相。
②微调↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ font-size: 18px; } div span{ font-size: 12px; position: relative; bottom: 8px; } </style> </head> <body> <div>相对定位微调<span>[1]</span>哈哈哈哈哈哈 </div> </body> </html>
效果图↓
可以看到“后面的文字”依然在[1]后面排列，常见于百度百科。
微调练习案例
... ... ...