No.1.8

定位

网页常见布局

标准流（块级元素独占一行-->垂直布局，行内元素/行内块元素一行显示多个-->水平布局）

浮动（可以让原本垂直布局的块级元素变成水平布局）

定位（可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况）

定位的常见应用场景

1.可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

2.可以让盒子始终固定在屏幕中的某个位置

使用定位的步骤

设置定位方式（属性名：position）

常见属性值：　　定位方式　　　　属性值

　　　　　　　　静态定位　　　　static

　　　　　　　　相对定位　　　　relative

　　　　　　　　绝对定位　　　　absolute

　　　　　　　　固定定位　　　　fixed

设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪个近用哪个）

　　方向　　　　属性名　　　　属性值　　　　含义

　　水平　　　　left　　　　　 数字+px　　距离左边的距离

　　水平　　　　right　　　　   数字+px　　距离右边的距离

　　垂直　　　　top　　　　　 数字+px　　距离上边的距离

　　垂直　　　　bottom　　　  数字+px　　距离下边的距离

/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */

（1）/* 静态定位, 默认值, 标准流 */（position: static;）

如果 left 和 right 都有，以 left 为准；top 和 bottom 都有以 top 为准

（2）相对定位：自恋型定位，相对于自己之前的位置进行移动（position: relative;）

　　特点：（1）需要配合方位属性实现移动

　　　　　（2）相对于自己原来位置进行移动

　　　　    （3）在页面中占位置 -->没有脱标(仍然具有标签原有的显示模式特点)

应用场景：1.配合绝对定位组CP（子绝父相）2.用于小范围的移动

（3）绝对定位：拼爹型定位，相对于非静态定位的父元素进行定位移动（position: absolute;）

　　特点：（1）需要配合方位属性实现移动

　　　　　（2）默认相对于浏览器可视区域移动

　　　　　（3）在网页中不占位置 -->已经脱标

应用场景：1.配合绝对定位组CP（子绝父相）

具体行内块特点（一行共存，宽高生效）

子绝父相

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

先找已经定位的父级，如果有这样的父级就以这个父级伪参照物进行定位； 有父级，但父级没有定位，以浏览器窗口为参照物进行定位

子绝父相水平居中案例

需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

    .box {

      /* 1.绝对定位的盒子不能使用左右margin: auto; 居中 */

      position: absolute;

      /* margin: 0 auto; */

      /* left: 50%; 整个盒子移动到浏览器中间偏右的位置 */

      left: 50%;

      /* 把盒子向右左侧移动：自己宽度的一半 */

      top: 50%;

      /*margin-left: -150px;

      margin-top: -150px;*/

      transform: translate(-50%,-50%);

      width: 300px;

      height: 300px;

      background-color: pink;

    }

标准流盒子水平居中（margin: 0 auto;）

底部半透明遮罩效果

.banner {

      position: relative;

      width: 1226px;

      height: 600px;

      margin: 0 auto;

    }

    .mask {

      position: absolute;

      left: 0;

      bottom: 0;

      /* 绝对定位的盒子显示模式具备行内块特点：如果没有宽度也没有内容，盒子的宽度尺寸就是0 */

      /* width: 1226px; */

      /* 如果子级和父级相同 */

      width: 100%;

      height: 150px;

      background-color: rgba(0,0,0,.5);

    }

（4）固定定位：死心眼型定位，相对于浏览器进行定位移动（position: fixed;）

特点：　　1.需要配合方位属性实现移动

　　　　　2.相对于浏览器可视区域进行移动

　　　　　3.在页面中不占位置 -->已经脱标（具备行内块特点）

应用场景：1.在盒子固定在屏幕中的某个位置

元素层级问题：不同布局方式元素的层级关系：（标准流<浮动<定位）

　　　　　　　不同定位之间的层级关系：（相对、绝对、固定默认层级相同）（此时HTML中写在下面的元素层级更高，会覆盖上面的元素）

    /* 默认情况下，定位的盒子，后来者居上

    z-index: 整数; 取值越大，显示顺序越靠上 ,

    z-index的默认值是0

    注意：z-index必须配合定位才生效*/

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

文字对齐问题：解决行内/行内块元素垂直对齐问题（当图片和文字在一行显示时，其实底部不是对齐的）

垂直对齐方式：属性名：vertical-align

　　属性值　　　　效果

　　baseline　　默认，基线对齐

　　top　　　　 顶部对齐

　　middle　　  中部对齐

　　bottom　　  底部对齐

行内块和文字对齐，或者行内块和行内块对齐（居中：都是用vertical-align: middle;）

    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对齐 */

光标类型：场景：设置鼠标光标在元素上显示的样式（属性名：cursor）

常见属性值　　　　属性值　　　　　　效果

　　　　　　　　　default　　　　默认值，通常是箭头

　　　　　　　　　pointer　　　   小手效果，提示用户可以点击

　　　　　　　　　text　　　　　 工字型，提示用户可以选择文字

　　　　　　　　　move　　　　  十字光标，提示用户可以移动

边框圆角：场景：让盒子四个角变得圆润，增加页面细节，提升用户体验（属性名：border-radius）

常见取值：数字+px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

      /* 一个值：表示4个角是相同的 */

      /* border-radius: 10px; */

      /* 4值：左上  右上  右下  左下  ---从左上顺时针转一圈 */

      /* border-radius: 10px 20px 30px 40px; */

没有值的看对角

边框圆角的常见应用

画一个正圆：盒子必须是正方形；设置边框圆角为盒子宽高的一半 --> border-radius: 50%

胶囊按钮：盒子要求是长方形；设置-->border-radius: 盒子高度的一半

overflow溢出部分显示效果

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

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......

属性名：overflow

常见属性值：　　　　属性值　　　　　　效果

　　　　　　　　　　visible　　默认值，溢出部分可见

　　　　　　　　　　hidden　   溢出部分隐藏

　　　　　　　　　　scroll　　  无论是否溢出，都显示滚动条

　　　　　　　　　　auto　　   根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏：场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：1.visibility: hidden;

　　　　    2.display: none;

    /* 占位隐藏效果 */

      /* visibility: hidden; */

      /* ***不占位的隐藏 */

      display: none;

元素整体透明度：场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字（1：表示完全不透明  0：表示完全透明）

注意：opacity会让元素整体透明，包括里面的内容，如文字、子元素等......