网页布局之CSS浮动与定位

绝地灬酷狼 2023-03-12 12:23 1阅读 0赞

### 网页布局之CSS浮动与定位 ###

*  网页布局之CSS浮动与定位
 *   *  1.浮动的用法
     *   *  1.1浮动的定义
         *  1.2浮动的特点
         *  1.3浮动的应用
     *  2.清除浮动
     *   *  2.1清除浮动的本质
         *  2.2清除浮动的方法
         *   *  1).额外标签法(隔墙法)
             *  2).父级添加overflow属性方法
             *  3).使用after伪元素清除浮动
             *  4).使用双伪元素清除浮动
         *  2.3清除浮动总结
     *  3.定位
     *   *  3.1定位的用法
         *  3.2定位的分类
         *   *  3.2.1静态定位（static）
             *  3.2.2相对定位(relative)
             *  3.2.3绝对定位(absolute)
             *  3.2.4固定定位(fixed)
             *  3.2.5定位口诀--子绝父相
         *  3.3定位总结
     *  4.定位扩展
     *   *  4.1绝对定位的盒子居中
         *  4.2堆叠顺序（z-index）
         *  4.3定位改变display属性

# 网页布局之CSS浮动与定位 #

CSS 提供了 **3 种机制**来设置盒子的摆放位置，分别是**普通流**（标准流）、**浮动**和**定位**。其中：

1.  **普通流**（**标准流**）  
    可以让盒子上下排列 或者 左右排列的
2.  **浮动**  
    让盒子从普通流中**浮**起来 —— **让多个盒子(div)水平排列成一行**。  
    可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3.  **定位**  
    将盒子**定**在某一个**位**置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。  
    定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

## 1.浮动的用法 ##

**浮动**是让盒子从普通流中**浮**起来,主要作用让多个块级盒子一行显示。

### 1.1浮动的定义 ###

在 CSS 中，通过 `float` 属性定义浮动，语法如下：

选择器 { float: 属性值; }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>none</strong></td> 
   <td>元素不浮动（<strong>默认值</strong>）</td> 
  </tr> 
  <tr> 
   <td><strong>left</strong></td> 
   <td>元素向<strong>左</strong>浮动</td> 
  </tr> 
  <tr> 
   <td><strong>right</strong></td> 
   <td>元素向<strong>右</strong>浮动</td> 
  </tr> 
 </tbody> 
</table>

### 1.2浮动的特点 ###

**float** —— **浮漏特**

<table> 
 <thead> 
  <tr> 
   <th>特点</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>浮</td> 
   <td>加了浮动的盒子<strong>是浮起来</strong>的，漂浮在其他标准流盒子的上面。</td> 
  </tr> 
  <tr> 
   <td>漏</td> 
   <td>加了浮动的盒子<strong>是不占位置的</strong>，它原来的位置<strong>漏给了标准流的盒子</strong>。</td> 
  </tr> 
  <tr> 
   <td>特</td> 
   <td><strong>特别注意</strong>：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙</td> 
  </tr> 
 </tbody> 
</table>

### 1.3浮动的应用 ###

**1.实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。**  
**2.浮动(float)的扩展**  
1). 浮动元素与父盒子的关系

*  子盒子的浮动参照父盒子对齐
 *  不会与父盒子的边框重叠，也不会超过父盒子的内边距

2). 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果**前一个兄弟盒子**是：

*  **浮动**的，那么**当前盒子**会与前一个盒子的顶部对齐；
 *  **普通流**的，那么**当前盒子**会显示在前一个兄弟盒子的下方。

## 2.清除浮动 ##

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

*  准确地说，并不是清除浮动，而是**清除浮动后造成的影响**

### 2.1清除浮动的本质 ###

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

### 2.2清除浮动的方法 ###

在CSS中，clear属性用于清除浮动。

*  语法：

选择器{clear:属性值;}   clear 清除

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>不允许左侧有浮动元素（清除左侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>不允许右侧有浮动元素（清除右侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>同时清除左右两侧浮动的影响</td> 
  </tr> 
 </tbody> 
</table>

但是我们实际工作中， 几乎只用 clear: both。

#### 1).额外标签法(隔墙法) ####

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

*  优点： 通俗易懂，书写方便
 *  缺点： 添加许多无意义的标签，结构化较差。

#### 2).父级添加overflow属性方法 ####

.one { 
    			width: 500px;
    			/*background-color: pink;*/
    			border: 1px  solid red;
    			/*给父级添加 overflow 就可以清除浮动*/
    			overflow: hidden;
    		}

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

#### 3).使用after伪元素清除浮动 ####

**:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了**

使用方法：

*  优点： 符合闭合浮动思想 结构语义化正确
 *  缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
 *  代表网站： 百度、淘宝网、网易等

#### 4).使用双伪元素清除浮动 ####

使用方法：

*  优点： 代码更简洁
 *  缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
 *  代表网站： 小米、腾讯等

### 2.3清除浮动总结 ###

以后什么时候用清除浮动呢：

1.  父级没高度
2.  子盒子浮动了
3.  影响下面布局了，我们就应该清除浮动了。

<table> 
 <thead> 
  <tr> 
   <th>清除浮动的方式</th> 
   <th align="left">优点</th> 
   <th align="left">缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>额外标签法（隔墙法）</td> 
   <td align="left">通俗易懂，书写方便</td> 
   <td align="left">添加许多无意义的标签，结构化较差。</td> 
  </tr> 
  <tr> 
   <td>父级overflow:hidden;</td> 
   <td align="left">书写简单</td> 
   <td align="left">溢出隐藏</td> 
  </tr> 
  <tr> 
   <td>父级after伪元素</td> 
   <td align="left">结构语义化正确</td> 
   <td align="left">由于IE6-7不支持:after，兼容性问题</td> 
  </tr> 
  <tr> 
   <td>父级双伪元素</td> 
   <td align="left">结构语义化正确</td> 
   <td align="left">由于IE6-7不支持:after，兼容性问题</td> 
  </tr> 
 </tbody> 
</table>

后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面学完伪元素再讲。

## 3.定位 ##

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。  
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）

### 3.1定位的用法 ###

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

> `定位 = 定位模式 + 边偏移`  
> 简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 `top`、`bottom`、`left` 和 `right` 属性定义元素的**边偏移**：（方位名词）  
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：

选择器 {  position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">语义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>static</code></td> 
   <td align="center"><strong>静态</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>relative</code></td> 
   <td align="center"><strong>相对</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>absolute</code></td> 
   <td align="center"><strong>绝对</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>fixed</code></td> 
   <td align="center"><strong>固定</strong>定位</td> 
  </tr> 
 </tbody> 
</table>

### 3.2定位的分类 ###

#### 3.2.1静态定位（static） ####

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

#### 3.2.2相对定位(relative) ####

**相对定位的特点：（务必记住）**

*  相对于 自己原来在标准流中位置来移动的
 *  原来**在标准流的区域继续占有**，后面的盒子仍然以标准流的方式对待它。
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]

#### 3.2.3绝对定位(absolute) ####

**绝对定位的特点：（务必记住）**

*  绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
 *  不保留原来的位置，完全是脱标的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

#### 3.2.4固定定位(fixed) ####

**固定定位**是**绝对定位**的一种特殊形式：

*  **完全脱标** —— 完全不占位置；
 *  只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；跟父元素没有任何关系；单独使用，不随滚动条滚动。

#### 3.2.5定位口诀–子绝父相 ####

**子级**是**绝对**定位，**父级**要用**相对**定位。  
**原因**：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

### 3.3定位总结 ###

**与浮动的对比**：

*  **绝对定位**：脱标，**利用边偏移指定准确位置**；
 *  **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。

<table> 
 <thead> 
  <tr> 
   <th>定位模式</th> 
   <th>是否脱标占有位置</th> 
   <th align="left">移动位置基准</th> 
   <th>模式转换（行内块）</th> 
   <th>使用情况</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>静态static</td> 
   <td>不脱标，正常模式</td> 
   <td align="left">正常模式</td> 
   <td>不能</td> 
   <td>几乎不用</td> 
  </tr> 
  <tr> 
   <td>相对定位relative</td> 
   <td>不脱标，占有位置</td> 
   <td align="left">相对自身位置移动</td> 
   <td>不能</td> 
   <td>基本单独使用</td> 
  </tr> 
  <tr> 
   <td>绝对定位absolute</td> 
   <td>完全脱标，不占有位置</td> 
   <td align="left">相对于定位父级移动位置</td> 
   <td>能</td> 
   <td>要和定位父级元素搭配使用</td> 
  </tr> 
  <tr> 
   <td>固定定位fixed</td> 
   <td>完全脱标，不占有位置</td> 
   <td align="left">相对于浏览器移动位置</td> 
   <td>能</td> 
   <td>单独使用，不需要父级</td> 
  </tr> 
 </tbody> 
</table>

**注意**：

1.  **边偏移**需要和**定位模式**联合使用，**单独使用无效**；
2.  `top` 和 `bottom` 不要同时使用；
3.  `left` 和 `right` 不要同时使用。

## 4.定位扩展 ##

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

> **注意**：**绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中**。  
> 在使用**绝对定位**时要想实现水平居中，可以按照下图的方法：

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

1.  `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2.  `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。

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

在使用**定位**布局时，可能会**出现盒子重叠的情况**。

加了定位的盒子，默认**后来者居上**， 后面的盒子会压住前面的盒子。

应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**。  
**`z-index` 的特性如下：**

1.  **属性值**：**正整数**、**负整数**或 **0**，默认值是 0，数值越大，盒子越靠上；
2.  如果**属性值相同**，则按照书写顺序，**后来居上**；
3.  **数字后面不能加单位**。

**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，其他**标准流**、**浮动**和**静态定位**无效。

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

前面我们讲过， display 是显示模式， 可以改变显示模式有以下方式:

*  可以用 inline-block 转换为行内块
 *  可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
 *  绝对定位和固定定位也和浮动类似， 默认转换的特性转换为行内块。

所以说， 一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/ae156c1e0bae495286afcef404026375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/fcee8d465cbc4f9bbdc3234b9a3440d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/ce48ea4095d3416cb38e50db009771b8.png