码迷,mamicode.com
首页 > Web开发 > 详细

04:CSS(02)

时间:2021-06-02 19:21:22      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:hid   user   颜色   部分   字体   black   hidden   htm   用户   

溢出属性

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;

博客园页面搭建

04:CSS(02)

标签:hid   user   颜色   部分   字体   black   hidden   htm   用户   

原文地址:https://www.cnblogs.com/chijintao/p/14833519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!