CSS(后篇)
溢出属性
p { height: 100px; width: 50px; border: 3px solid red; /*overflow: visible; !*默认就是可见 溢出还是展示*!*/ /*overflow: hidden; !*溢出部分直接隐藏*!*/ /*overflow: scroll; !*设置成上下滚动条的形式*!*/ /*overflow: auto;*/ }
定位
-
静态
所有的标签默认都是静态的static,无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数,只给了你一个父标签的参数,让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } #d1 { height: 100px; width: 100px; background-color: red; left: 50px; /*从左往右 如果是负数 方向则相反*/ top: 50px; /*从上往下 如果是负数 方向则相反*/ /*position: static; !*默认是static无法修改位置*!*/ position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了 */ } #d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; top: 100px; } #d4 { position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black; } </style> </head> <body> <!-- <div id="d1"></div>--> <!--<div id="d2">--> <!-- <div id="d3"></div>--> <!--</div>--> <div style="height: 500px; color: rgb(152, 26, 26);">></div> <div style="height: 500px; color: rgb(152, 26, 26);">></div> <div style="height: 500px; color: rgb(152, 26, 26);">></div> <div id="d4">回到顶部</div> </body> </html> ps:浏览器是优先展示文本内容的
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
""" 浮动 相对定位 绝对定位 固定定位 """ # 不脱离文档流 1.相对定位 # 脱离文档流 1.浮动 2.绝对定位 3.固定定位 <!--<div style="height: 100px;width: 200px;position: relative;left: 500px"></div>--> <!--<div style="height: 100px;width: 200px; color: rgb(152, 26, 26);">></div>--> <!--<div style="height: 100px;width: 200px;"></div>--> <!--<div style="height: 100px;width: 200px;position: absolute;left: 500px"></div>--> <!--当没有父标签做到位 就参照与body--> <!--<div style="height: 100px;width: 200px;"></div>--> <div style="height: 100px;width: 200px;"></div> <div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px"></div> <div style="height: 100px;width: 200px;"></div>
z-index模态框
eg:百度登陆页面 其实是三层结构 1.最底部是正常内容(z=0) 最远的 2.黑色的透明区(z=99) 中间层 3.白色的注册区域(z=100) 离用户最近 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style> </head> <body> <div>这是最底层的页面内容</div> <div class="cover"></div> <div class="modal"> <h1>登陆页面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>点我点我~</button> </div> </body> </html>
透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度 rgba只能影响颜色 而opacity可以修改颜色和字体 opacity: 0.5;
博客园页面搭建
愿君前程似锦,归来仍是少年