08-CSS定位+装饰

孙小明的测试修炼手册

已于 2023-06-25 17:41:54 修改

阅读量35

点赞数

文章标签： css html 前端

于 2023-06-25 17:23:03 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131382282

版权

1、网页常见的布局方式

1、标准流

块级元素独占一行垂直布局
行内元素/行内块元素一行可以显示多个

2、浮动

可以让垂直布局的块级元素变成水平布局

3、定位

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

2、定位常见的场景问题

可以解决盒子与盒子之间的层叠问题
1. 定位之后的元素层级更高，可以层叠在其他的盒子上

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

3、定位

1、定位的方式

定位方式	属性值	说明
静态定位	position:static	默认定位方式，无定位的意思
相对定位	position:relative	1、相对定位是元素相对于它在标准流中的位置来说（自恋型） 2、原来在标准流的区域继续占有，后面的盒子任然以标准流的方式对待他
绝对定位	position:absolute	绝对定位是元素以带有定位的父级元素来移动位置(拼爹型) 1. 完全脱标，不占位置 2. 父元没有定位，则以浏览器为准定位
固定定位	position:fixed	固定定位是绝对定位一种特殊形式（认死理型） 1. 完全脱标不占位置 2. 只认浏览器的可视窗口，来设置属性

2、偏移值

偏移设置分为两个方向，水平和垂直方向各使用一个即可
选取的原则一般是就近原则（离那边近就选择那个）

1、相对定位-relative

相对定位是元素相对于它原来在标准流中的位置来说

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box{
        width: 150px;
        height: 150px;
        background-color: red;
      }
      .box1{
        width: 150px;
        height: 150px;
        background-color: green;
        position: relative;
        left: 50px;
        top: 80px;
      }
      .box2{
        width: 150px;
        height: 150px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

2、绝对定位

绝对定位是元素以带有定位的父级元素来移动位置
完全脱标不占位置
如果父类没有定位则以浏览器为准定位

案例一、绝对定位居中

<!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>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
  
            left: 50%;


            top: 50%;

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

            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>
</body>
</html>

3、子绝父相

场景：让子元素相对于父元素进行自由移动，就要使用到子绝父相
优点：父元素是相对定位，则对网页的影响较小
案例一子绝父相居中案例

<!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>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
  
            left: 50%;


            top: 50%;

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

            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            width: 120px;
            height: 120px;
            background-color: yellow;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

4、固定定位-fixed

死心眼定位类型，相对于浏览器进行定位移动
特点：

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

应用场景：

让盒子固定在屏幕的某个位置

展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: fixed;
            right: 0;
            top: 50%;
            width: 40px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <div></div>
</body>
</html>