【CSS】怪异盒子模型：相对定位、绝对定位、固定定位

博主： Fivk
发布时间：2022 年 06 月 10 日
1204 次浏览
2 条评论
1865字数
分类：代码笔记

### 1. 什么是盒子模型？

```html
   <div class="mydiv">
       就是一个盒子
   </div>
```

### 开启怪异盒子

```css
.mydiv {
        width: 300px;
        height: 300px;
        background-color: #f01;
        border: 2px solid #00f;
        padding: 5px;
        /*转换为怪异盒子*/
        box-sizing: border-box;
}
```

### 2. 怪异盒子属性

#### 2.1 相对定位:relative

```css
position: relative;
```

##### 2.1.1 左偏移量

```css
left: 200px;
```

##### 2.1.2 上偏移量

```css
top: 50px;
```

##### 2.1.3 案例

```html
<!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>标签</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

.mydiv {
            width: 300px;
            height: 300px;
            background-color: #f01;
            /**相对定位:relative*/
            position: relative;
            /**左偏移量*/
            left: 200px;
            /**上偏移量*/
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="mydiv">
        就是一个盒子
    </div>

</body>

</html>
```

#### 2.2 绝对定位:`子绝父相`

```html
<div class="mydiv">
    <div class="son">
        123
    </div>
</div>
```

```css
* {
    margin: 0;
    padding: 0;
}
.mydiv {
    width: 400px;
    height: 400px;
    background-color: #f01;
    margin: 200px;
    /**子绝父相*/
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: #00f;
    /**绝对定位*/
    position: absolute;
    /**偏移量*/
    left: 10px;
    top: 5px;
}
```

#### 2.3 固定定位

```css
* {
    margin: 0;
    padding: 0;
}
nav{
    height: 42px;
    width: 100%;
    line-height: 42px;
    background-color: #02d;
    /**固定定位*/
    position: fixed;
    top: 10px;
}
.big{
    height: 2000px;
}
.service{
    width: 50px;
    height: 50px;
    background-color: #f01;
    position: fixed;
    bottom: 30px;
    right: 20px;
}
```

```html
<div class="service">
    在线客服
</div>
<div class="big"></div> 
<nav>
    导航条
</nav>
```

最后修改：2022 年 06 月 10 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

小当迷 2
2022-06-10

推荐使用flex布局
https://coding.imweb.io/demo/flex/index.html

回复
1. Fivk
  2022-06-10
  
  @小当迷
  
  我另外一篇文章里面有，弹性盒子(๑•̀ㅁ•́ฅ)
  实践周老师教全栈
  
  回复