CSS复习之盒子的浮动和定位

亦凉 2022-05-25 10:12 303阅读 0赞

#### 今日目录 ####

1、盒子的浮动float

2、使用clear消除浮动的影响

3、盒子定位postion

4、z-index空间位置

5、盒子的display属性

#### 一、盒子浮动 float ####

Float 属性：  
默认是 none ，按照标准流来定位；  
Left：左悬浮；  
Right：右悬浮；

![70][]

#### 二、使用 clear 清除浮动的影响 ####

Clear 属性：  
默认是 none，允许两边都可以有浮动对象；  
Left： 不允许左边有浮动对象  
Right：不允许右边有浮动对象  
Both：不允许有浮动对象

![70 1][]

#### 三、盒子定位postion ####

Position 属性：  
默认是 static，按照标准流来定位；  
Relative：相对定位，相对于原本的标准位置偏移指定的距离；  
Absolute：绝对定位，以它的包含框为基准进行偏移；  
Fixed：固定定位，以浏览器窗口为基准进行定位；

![70 2][]

#### 四、z-index空间位置 ####

Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

![70 3][]

#### 五、盒子的display属性 ####

Display：  
Inline：把元素变成内联元素；

Block：把元素变成块级元素；

![70 4][]

添加小编微信可以获取免费资源，二维码

![70 5][]

要用到的工具，关注 公众号直接免费获取：

![70 6][]

[70]: /images/20220525/380764a383e5454db8cbe480035d7f3b.png
[70 1]: /images/20220525/ed9604beb0504da083cdd8166187cc52.png
[70 2]: /images/20220525/94345fb0dd3540c5bd907c22c00d8413.png
[70 3]: /images/20220525/87994d87f5204f079353fc737c34d82d.png
[70 4]: /images/20220525/5b5550f1a4a140248fa39e2e9fa77212.png
[70 5]: /images/20220525/07fe89d147af474fb67b1bcbb91ada22.png
[70 6]: /images/20220525/d5571b7e049d4135834e03494882164f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS浮动、定位

这是一个基础知识，也是面试多多少少会问到的。下面我带大家梳理一下！一、文档流的概念指什么？有哪种方式可以让元素脱离文档流? 文档流，指的是元素排版布局过程中，元素会自动从

本是古典何须时尚/ 2023年03月13日 09:26/ 0 赞/ 70 阅读

相关 CSS基础复习之定位

如题定位定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。流定位浮动定位相对定位绝对定位固

￡神魔★判官ぃ/ 2022年09月26日 02:00/ 0 赞/ 226 阅读

相关 css定位和浮动

1.static定位默认的定位方式，元素出现在正常的流中。静态定位不会受到top，bottom，left，right影响。 2.fixed定位元素的位置相对于浏

Bertha 。/ 2022年09月21日 05:35/ 0 赞/ 186 阅读

相关 CSS基础之浮动定位、显示、光标、定位

1、浮动定位 1、定位简单点说，定位就是改变元素在页面上的默认位置 2、定位的分类按照定位的效果，可以分成以下几类： 1

￡神魔★判官ぃ/ 2022年07月13日 12:42/ 0 赞/ 468 阅读

相关 CSS中的浮动和定位

浮动和定位一直是让我焦头烂额，一直搞不懂，今天就来消除下盲点…… 在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 > 标准流的默认特性 1、分行、

爱被打了一巴掌/ 2022年06月11日 08:50/ 0 赞/ 238 阅读

相关 CSS复习之盒子的浮动和定位

今日目录 1、盒子的浮动float 2、使用clear消除浮动的影响 3、盒子定位postion

亦凉/ 2022年05月25日 10:12/ 0 赞/ 304 阅读

相关 CSS之——盒子模型、盒子的定位与浮动

一、CSS盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元

我就是我/ 2022年05月19日 10:36/ 0 赞/ 234 阅读

相关 CSS浮动、定位

这是一个基础知识，也是面试多多少少会问到的。下面我带大家梳理一下！一、文档流的概念指什么？有哪种方式可以让元素脱离文档流? 文档流，指的是元素排版布局过程中，元素会自动从

港控/mmm°/ 2022年05月16日 09:10/ 0 赞/ 338 阅读

相关【CSS】【9】CSS盒子的浮动

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会有所不同了。 CSS有一个

雨点打透心脏的1/2处/ 2022年04月25日 05:26/ 0 赞/ 247 阅读

相关 CSS核心内容：标准流、盒子模型、浮动、定位

目录一、标准流块级元素行内元素与HTML元素之间的区别二、盒子模型三、浮动(Float) 四、定位(Position) --------------

Dear 丶/ 2021年09月24日 16:58/ 0 赞/ 364 阅读