牧佑oneZeroZeroDayDream--relative与absolute。fixed 以及鼠标样式讲解

xiaoxiao2021-02-28  87

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="muyou"> <meta name="Keywords" content="牧佑叔叔"> <meta name="Description" content="--牧佑"> <title>Document</title> <style> /* 去掉 浏览器的-外边距, 谷歌为8 IE为15*/ body { margin:0; } #box { height:200px; background:blue; } #div1,#div2 { width:100px; height:100px; margin-bottom:20px; border:1px solid red; margin-top:20px; margin-left:100px; background:red; } #div2 { position:absolute; left:100px; top:100px; } #div3 { width:100px; height:100px; background:#000; position:abs } #div4 { width:100px; height:100px; background:#230fba; position:fixed; left:500px; top:400px; cursor:pointer; /* 鼠标指针样式换成手指*/ /* 可以自定义 光标*/ cursor:url(qq.cur) ,default; /* url 里面 是要cur 格式的 不能png 然后最后需要默认样式 才能执行*/ } </style> </head> <body> <!-- position:fixed; 参照物相当于整个可视区。整个文档 IE 6.7.8不支持固定定位 手机端不支持 固定定位--> <!-- 定位元素有一个问题。就是如果自己父级元素设置了绝对定位, 然后子级设置了 定位之后,是根据父级来 定位。 如果父级没有设置定位 只是一个普通的父级,那子级去找 更高一级的元素。 比如说爷爷。如果爷爷没有定位。 那就根据 document 来定位。--> <!-- 相对定位 参照物是自己的原始位置--> <!-- 设置了绝对定位的层级。后面元素的层级比前面的元素层级要大--> <!--如果 不设置宽高的话,默认第一个div 会成为块级元素,里面的元素不能 设置宽高。会成为内联元素 内联元素的宽高会被内容撑大,如果想把内联元素 变成块级元素,display:block ;或者是 绝对定位 脱离文档流,就可以变成块级元素了 或者是 inline-block 内联快 如果把 块级元素变成内联元素 需要 display:inline--> <!-- 给元素顶一个位置 相对定位 元素不脱离文档流 position:relative; left:200px; right:100px;--> <div id="box"> <div id="div1"></div> <div id="div2"></div> </div> <div id="div3"> <div id="div4"></div> </div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-32918.html

最新回复(0)