css的定位笔记
2018-11-02 08:49:12来源:博客园 阅读 ()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相对定位</title> </head> <style> .A { background: yellow; height: 100PX; width: 100PX; } .B { background: red; height: 100PX; width: 100PX; position: relative; top: 20PX; margin-top: 20PX; margin-bottom: 20px; /* 相当于以前的位置先向20px;在top原来的位置20px; */ /* bottom: ; */ } .C { background:green; height: 100PX; width: 100PX; } span{ position: relative; top: 50px; } input{ width: 20px; height: 30px; } span{ position: relative; width: 100px; height: 100px; background: red; /* 行内元素不会影响宽高 */ } </style> <body> <!-- 相对定位就是相当于自己以前在标准流中的位置来移动 不会脱离自己的标准流,自己的位置不变 position:relative; top:20px; left:20px; 相对定位应用场景 用于对元素进行微调 配合后面的学习的绝对定位来使用 --> <div class="A"></div> <div class="B"></div> <div class="C"></div> <input type="text" class="D"> <span>输入</span> </body> </html>
李南江老师视频笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位</title> </head> <style> div { height: 100px; width: 100px; } .A { background: red; } .B { background: green; position: absolute; /* right: 0; */ /* /* top: 0; */ bottom: 0; /* 脱离流元素,相对于body的位置 */ } .C { background: blue; } span { position: absolute; width: 100px; height: 100px; background: yellow; /* 行内元素不会影响宽高 */ } </style> <body> <div class="A"></div> <div class="B"></div> <div class="C"></div> <!-- <span>我是span</span> --> </body> </html>
子绝父相
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> /* 如果用相对定位则不居中,如果使用绝对定位是按当前屏幕决定位置,会随屏大小移动 */ *{margin: 0; padding: 0; } ul{ list-style: none; height: 50px; width: 700px; margin: 0 auto; margin-top: 100px; } ul li{ float: left; text-align: center; width: 100px; line-height: 50px; background: RGB(184,184,184); } ul li:nth-of-type(4){ position: relative; background: #aad; } ul li img{ position: absolute; top: -13px; left: 42px; } </style> <body> <ul> <li>京东时尚</li> <li>美妆馆</li> <li>超市</li> <li>生鲜 <img src="./images/FAQa.gif" alt=""> </li> <li>闪购</li> <li>拍卖</li> <li>金融</li> </ul> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash