09-CSS定位装饰

 <style>
        .box{
            /* 标准流用margin-auto居中 定位用left-50%居中  */

            position: absolute;
            /* left: 50%; 整个盒子i东到浏览器中间偏右的位置 */
            left: 50%;
            /* 将盒子向左侧移动，自己宽度的一般来居中 */
            margin-left: -150px;

            top: 50%;
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: yellow;
        }

transfrom: translate( );

实现位移：自己高度宽度的一半

（改变width / height时，自动计算，减少重复改代码的工作量）

    <style>
        .box{
            /* 标准流用margin-auto居中 定位用left-50%居中  */

            position: absolute;
            /* left: 50%; 整个盒子i东到浏览器中间偏右的位置 */
            left: 50%;
            /* 将盒子向左侧移动，自己宽度的一般来居中 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%, -50%);

            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>

5）案例banner

（底部半透明遮罩效果）

注意点：定位的元素会脱标（如:绝对定位），脱标后的元素宽高默认由内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner{
            position: relative;
            margin: 0 auto;

            width: 1226px;
            height: 600px;
        }

        .mask{
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位的盒子显示模式具备行内块特点
               加宽度高度生效 如果没有宽度也没有内容 盒子的宽度尺寸为0 */
            width: 1226px;
            height: 150px;
            background-color: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="../bg.jpg" alt="">
        <div class="mask"></div>
    </div>

</body>
</html>

6）固定定位

（相对于浏览器进行定位移动）

position:fixed;

特点：

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置——已经脱标

7）元素的层级关系

元素层级问题

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素（后来者居上）

z-index:整数；

取值越大，显示顺序越靠上

默认值为0 必须配合定位才生效

二、装饰

1）垂直对齐方式

1.认识基线

基线：浏览器文字类型元素排版中存在用于对齐的基线

2.垂直对齐方式

属性名：vertical-align

baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

注意：

浏览器把行内和行内块标签当作文字处理，默认基线对齐。

所以另外还有解决方法：转为块级元素

2）光标类型

（设置鼠标光标在元素上时显示的样式）

属性名：cursor

default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

3）边框圆角

（让盒子四个角变得圆润，增加页面细节，提升用户体验）

属性名：border-radius

数字+px、百分比

常见应用：

正圆（头像…）——正方形盒子宽高的一半（border-radius: 50%;）
胶囊按钮——长方形盒子（border-radius: 盒子高度的一半;）

4）overflow溢出部分显示效果

溢出部分：盒子 内容部分 所超出盒子范围的区域

属性值：overflow

visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

5）元素本身隐藏

常见应用：子菜单

常见属性：

visibility: hidden(占位)

display:none（不占位）

6）案例-二维码显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    ul li .app {
      position: relative;
    }

    .code {
      position: absolute;
      left: 50%;
      top: 41px;

      /* 隐藏二维码 */
      display: none;

      transform: translate(-50%);
    }

    /* 鼠标悬停a 显示二维码图片 */
    .nav li a:hover img {
        display: block;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所 <img src="../code.jpg" alt="" class="code"> </a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

三、选择器(拓展)元素整体透明度

（让某元素整体-包括内容一起变透明）

属性名：opacity

属性值：0~1数字

0：完全透明

1：完全不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;

            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="../cat.gif" alt="">
        文字透明吗
    </div>
</body>
</html>