标签：rip type tps input font box cti 问题： round
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } /*取消前面的点*/ ul{ list-style: none; } .nav{ width: 960px; overflow: hidden; margin: 50px auto; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ width: 160px; height: 40px; display: block; color: white; font-size: 14px; text-decoration: none; } .nav ul li a:hover{ background: yellow; color: green; text-decoration: underline; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> </ul> </div> </body> </html>
有3种方式：
相对定位
固定定位
绝对定位
相对自己原来的位置进行定位，自己原来的位置作为参考点
使用relative下的top,left进行定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ border: 1px solid green; } div{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 30px; } </style> </head> <body> <div></div> </body> </html>
使用相对定位可以来进行后续表单位置设计
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .t{ font-size: 30px; } .xiaoming{ position: relative; top: 4px; } </style> </head> <body> <div> <input type="text" class="t"> <input type="text" class="xiaoming"> </div> </body> </html>
一般情况下：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
以父辈盒子作为参考点：
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
2.如果父亲设置了定位，那么以父亲为参考点。
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 400px; height: 400px; padding: 100px; background-color: yellow; position: relative; } .container{ width: 500px; height: 500px; background-color: green; position: relative; padding: 20px; } .box1{ width: 200px; height: 200px; background-color: red; position: absolute; top: 100px; left: 50px; } </style> </head> <body style=‘height: 2000px;‘> <div class="wrap"> <div class="container"> <div class="box1"> </div> </div> </div> </body> </html>
绝对定位下盒子居中问题：
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中
设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .nav{ width: 960px; height: 49px; background-color: purple; position: absolute; left: 50%; margin-left: -480px; } </style> </head> <body> <div class="nav"> </div> </body> </html>
设置固定定位，用top描述，那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
固定定位，点击后返回顶部：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ width: 100px; height: 100px; background-color: red; position: fixed; bottom: 0; right: 50px; line-height: 100px; text-align: center; color: white; } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="wrap"> <p> <a href="#">回到顶部</a> </p> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> </div> <script> $(function(){ $(‘p‘).click(function(){ $(‘html‘).animate({ "scrollTop":0 },1000) }) }) </script> </body> </html>
z-index 值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能有z-index（浮动元素无法使用）
index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
也具有从父现象
例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 10; } .box3{ width: 200px; height: 200px; background-color: yellow; position: relative; z-index: 8; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> </body> </html>
z-index的应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } /*设置图片与固定栏间的距离*/ body{ padding-top: 40px; } .nav{ width: 100%; height: 40px; background-color: black; position: fixed; top: 0; left: 0; z-index: 99999; /*数值最大，谁也无法压盖住固定栏*/ } .wrap{ width: 960px; overflow: hidden; margin: 0px auto; background-color: purple; border-radius: 5px; } .wrap ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .wrap ul li a{ width: 160px; height: 40px; display: block; color: white; font-size: 14px; text-decoration: none; } .wrap ul li a:hover{ background: yellow; color: green; text-decoration: underline; } p{ position: relative; } </style> </head> <body style="height: 3000px"> <div class="nav"> <div class="wrap"> <ul> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> </ul> </div> </div> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <p>哈哈哈哈哈哈哈哈</p> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> </body> </html>
标签：rip type tps input font box cti 问题： round
原文地址：https://www.cnblogs.com/LearningOnline/p/9090761.html
