【css】常用布局

本当迷

2022 年 03 月 24 日

936 次浏览

暂无评论

1372字数

css

## 浮动布局：

### 浮动：

浮动是css布局的最佳利器，我们可以通过浮动来灵活的定位页面的元素，以达到布局网页的目的。

### 语法：

```css
#father{float:left;}
```

### 属性：

元素向左浮动：left

元素向右浮动：right

### 清除浮动：

浮动会影响周围元素，并且还会引发很多预想不到的问题，这是我们就需要在css中，使用clear属性来清除浮动带来的影响。我们一般都是在**浮动元素后面再添加一个空元素**，然后为这个空元素定义：**"clear:both"来清除浮动。**

#### 语法：

```css
.clear{clear:both;}
```

## 定位布局：

css定位可以将一个元素精确的放在页面指定的位置。定位布局共有4种方式：

1.固定布局（fixed）

2.相对布局（relative）

3.绝对布局（absolute）

4.静态布局（static）

以上4种方式都是通过position属性来实现的。

### 固定布局：fixed

所谓的固定布局，指的是被固定的元素不会随着滚动条的拖动而改变位置。

#### 语法：

```css
#fist{
	 position:fixed;
	 top:像素值;
	 bottom:像素值;
	 left:像素值;
	 right:像素值;
}
```

top，botton，left，right这4个属性一般只会用到两个。参考对象是浏览器的4条边。

### 相对布局：relative

再css中，我们可以使用“position:relative”；来实现相对布局。所谓的相对布局，指的是该元素的位置相当于它原始的位置计算而来的。

#### 语法：

```css
#fist{
	 position:relative;
	 top:像素值;
	 bottom:像素值;
	 left:像素值;
	 right:像素值;
}
```

#### 注意：

在默认的情况下，固定布局元素的位置是相对于浏览器而言，而相对布局是相对于原始位置而言。

### 绝对布局：absolute

在css中，我们可以使用"position:absolute"；来实现绝对定位。绝对定位在前几种定位中使用的最为广泛，一个元素变成了绝对定位元素，这个元素就完全脱离文档流，绝对元素的前面或者后面的元素会认为这个元素并不存在，此时这个元素浮与其他元素的上面，已经独立了出来。

#### 语法：

```css
#fist{
	 position:absolute;
	 top:像素值;
	 bottom:像素值;
	 left:像素值;
	 right:像素值;
}
```

#### 总结：

**固定布局和绝对布局**元素的位置是**相对于浏览器**而言，而**相对布局**是相对于**原始位置而言**。

### 静态布局：static

我们默认的浏览器布局就是静态布局。

最后修改：2022 年 03 月 24 日

如果文章有用，请随意打赏。

【css】常用布局

本当迷 • 2022 年 03 月 24 日

【css】常用布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【修仙之路】JAVA学习路线

对于异或运算的初步认识与auto用法

【JAVA经典例题】生产者/消费者问题

最近某音挺火的代码实现爱心形状

再见Swagger！拥抱smart-doc无侵入生成接口文档

ps-图层样式

解决Ubuntu 24.04 虚拟机克隆出多台造成的IP地址冲突的问题

C语言-指针数组

STL初识-list容器

双指针开辟数组

【css】常用布局

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【css】常用布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款