定位
网页常见布局
标准流（块级元素独占一行-->垂直布局，行内元素/行内块元素一行显示多个-->水平布局）
浮动（可以让原本垂直布局的块级元素变成水平布局）
定位（可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况）
定位的常见应用场景
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会让元素整体透明，包括里面的内容，如文字、子元素等...... 标签：定位,盒子,父级,元素,position,No.8,属性 From： https://www.cnblogs.com/renzlllj/p/17155054.html