布局学习之定位.docx

布局学习之定位对于定位而言，有广义和狭义之分。狭义定位：指的用position属性进行定位；广义定位：指的用标准流、浮动等各种方法完成网页元素的定位。position属性有四个值：static如果一个元素没有position属性，默认就是static静态定位的意思；relative相对定位absolute绝对定位fixed固定定位（IE6不兼容，IE7及以上版本开始兼容）首先我们来学习相对定位： 相对定位特性：1 相对定位不脱标任何一个元素，都可以进行相对定位。只需要给元素设置：position:relative;那么元素就是相对定位的元素了。新建一文件 div id=box1/div div id=box2/div div id=box3/divdiv{width:50px;height: 50px;}#box1{background-color:red ;}#box2{background-color:blue ;}#box3{background-color:green ;}原始状态给蓝色盒子加上position:relative 后 结论：页面没有任何改变，那么说明相对定位不脱标！接下来再给蓝色盒子添加：top:30px left:60px; 观察结果如下图2 相对定位可以根据偏移属性来确定位置，当标签设置了相对定位后，会使其从正常位置移走，但原来所占的位置并不会消失。 ---再来测试，给蓝色盒子添加 margin-bottom:100px, 相对定位的盒子，可以施加margin，不过都是在自己的本来的位置施加产生效果。接下来测试各种定位方向:Left:Top:Right:bottom3 任意的定位值要知道移动方向在相对定位中，可以任意选择定位的4个属性，并且属性的值可以为负数。下面四种方向的搭配都是合法的： top：15px； left：30px ； top：15px； right：30px bottom：15px； left：30px bottom：15px； right：30px 在使用这些组合的时候，你必须清楚知道这个盒子要怎么移动？【换算法】把所有都换算成top、left表示，你不就不晕了么？新建文件测试例如：bottom：-50pxright: -30px;等价于top:50px;left:30px;例如：bottom:60px;left:-50px;等价于：top:-60px;left:-50px;引言：前面我们了解到任何元素都可以进行相对定位，那么元素是否也可以进行相对定位呢？答案是可以的。4 浮动的元素可以进行相对定位浮动的元素可以进行相对定位，还是前面说的，就是微调元素的位置。新建文件测试：【借用经典导航代码】/*相對定位不會撐大盒子寬和高*/5 相对定位的用处由于相对定位的特点作用1：微调元素。最常见的作用，就是微调按钮和输入框的相对位置：但是注意:不要滥用相对定位，该用padding、margin都要正常使用！ 作用2：成为绝对定位的参考盒子子绝父相，父盒子要设置成为相对定位。接下来我们马上学习绝对定位。绝对定位新建一文件 运行结果如下图：说明：绝对定位脱标。再不写其他的情况下自己本身还是在老位置。1 绝对定位脱标现在，我们就学习了两种脱标的方式：浮动、绝对定位。接下来了解绝对定位的参考点2 绝对定位的参考点绝对定位中，采用top值进行定位，那么参考原点是页面的左上角（与left配合），或者右上角（与right配合）2.如果采用bottom值进行定位，那么一定是以第一屏显示器的左下角（与left配合），或者右下角（与right配合）。3.但是页面卷动的时候，能够卷动走盒子。 bottom定位是很复杂的，以前的百度的页面采用的就是bottom定位：接着为为蓝色盒子补充代码:position:absolute; top:30px; left:40px;为了更好的理解“页面”，接着往页面中添加内容，使浏览器窗口中出现垂直滚动条。移动滚动条观察。再测试 top: right:【不是以显示器，也不是以浏览器的左上角】绝对定位中，采用top值进行定位，那么参考原点是页面的左上角（与left配合），或者右上角（与right配合）。新建一页面：div{width:100px;height:100px;background:blue;position: absolute;/**bottom定位*/bottom:30px;left:50px;}运行如图:如果采用bottom值进行定位，那么一定是以第一屏显示器的左下角（与left配合），或者右下角（与right配合）。当你调整浏览器窗口的尺寸的时候，盒子会和浏览器的下边框产生稳定距离。但是页面卷动的时候，能够卷动走盒子。 bottom定位是很复杂的，以前