css总结五(定位)

小鱼儿 2023-01-03 12:49 287阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.定位
 *   *  1.1CSS 布局的三种机制
     *  1.2定位详解
     *   *  1.2.1边偏移
     *  1.3定位模式 (position)
     *   *  1.3.1静态定位(static) - 了解
         *  1.3.2 相对定位(relative) - 重要
         *  1.3.3绝对定位(absolute) - 重要
         *  1.3.4固定定位(fixed) - 重要
     *  1.4定位(position)的扩展
     *   *  1.4.1绝对定位的盒子居中
         *  1.4.2堆叠顺序（z-index）
         *  1.4.3定位改变display属性
     *  1.5定位总结
     *  1.6网页布局总结

--------------------

# 1.定位 #

## 1.1CSS 布局的三种机制 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

## 1.2定位详解 ##

定位也是用来布局的，它有两部分组成：

> 定位 = 定位模式 + 边偏移

### 1.2.1边偏移 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

## 1.3定位模式 (position) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

### 1.3.1静态定位(static) - 了解 ###

*  **静态定位**是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
 *  静态定位 按照标准流特性摆放位置，它没有边偏移。
 *  静态定位在布局时我们几乎不用的

### 1.3.2 相对定位(relative) - 重要 ###

**相对定位**是元素**相对**于它 原来在标准流中的位置 来说的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

### 1.3.3绝对定位(absolute) - 重要 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]  
**定位口诀 —— 子绝父相**  
刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？  
**子绝父相** —— **子级**是**绝对**定位，**父级**要用**相对**定位。  
**结论**：**父级要占有位置，子级要任意摆放**，这就是**子绝父相**的由来。

### 1.3.4固定定位(fixed) - 重要 ###

在这里插入图片描述

## 1.4定位(position)的扩展 ##

### 1.4.1绝对定位的盒子居中 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]

### 1.4.2堆叠顺序（z-index） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]

### 1.4.3定位改变display属性 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]

## 1.5定位总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]

## 1.6网页布局总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/4879d88f060745848c19530682f2e542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221119/ae7aff5e6e704269a0fcd854d7425d9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221119/51ee2ff6d1824cb39c69da9ee73d8cf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221119/e787dae93651407fb2a203515a13ae59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221119/8cb51186183a47db9ef1d2d6d1657f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221119/aaec0cef253e44b6a6f99bb301487e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221119/680e6ca0705d4e6cb94bb8d8b6986f7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221119/e8ab6b608c2b4ae0bdb533d88a3bbff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]: /images/20221119/9706212b4ac24fd1ab5720d5cb885da9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]: /images/20221119/3729955e78074858b9d94a8d5575fb72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]: /images/20221119/fa0ef29bff8749fa8ae4b593d4b40f02.png