CSS进阶内容—浮动和定位详解
CSS进阶内容—浮动和定位详解
我们在学习了CSS的基本知识和盒子之后，就该了解一下网页的整体构成了
当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园
CSS的三种布局流派
网页布局的本质就是用CSS控制盒子的摆放来形成页面
CSS提供了三种流派来控制盒子：
- 普通流
- 浮动
- 定位
所谓普通流就是我们前面所学习的内容：
- 标签按照规定好的默认方式排序
- 块级元素独占一行
- 行级元素顺序排列，遇到父元素边缘换行
接下来让我们走进浮动和定位的世界
浮动
首先我们为什么需要浮动呢？
- 我们使用浮动当然是因为一些要求我们的标准流无法完成
- 我们使用浮动最常见的应用场景就是将多个块级元素div等并排放置
- （纵向排列标准流，横向排列找浮动）
初见浮动
那么我们来介绍一下浮动：
- 浮动的目的是创建浮动框，使浮动框移动至相应位置
- 浮动会紧贴着大盒子本身或是其他浮动盒子边缘
- float：left/right 用来控制盒子浮动在左侧还是右侧
我们给出简单的代码示例：
浮动
浮动特性
我们再来讲解一下浮动的特性：
- 浮动特性会脱离标准流
- 脱离标准流的位置，并且盒子不再保留原本的位置
- 当body中有两个div，一个div带有浮动，一个div不带有浮动，那么两个盒子会处于同一位置
- 但带浮动的盒子会在上面，不带浮动的盒子在下面
我们给出代码示例：
浮动特性
- 所有在同一父类的浮动元素都在一排显示且对上对齐，并且紧贴在一起（若当前页面不能完全显示，则另起一行）
- 浮动元素具有行内块元素的特性（有宽高，同一行，当不具备宽高时长度与内容一致）
浮动常用方法
浮动元素经常与标准流父级搭配使用：
- 我们先采用标准流父级控制纵向框架
- 再用浮动元素的子盒子控制这一框架内的布局
简单案例
我们通过一个简单案例展示浮动和标准流搭配产生的布局效果：
- 案例：我们通过一个大盒子装有两个小盒子，使两个小盒子左浮动并排排序（中间没有间隙）
图片展示效果：
案例
left
right
- 案例：我们通过一个大盒子装有四个小盒子，使四个小盒子左浮动并排排序（中间有间隙）
图片展示效果：
案例
- 1
- 2
- 3
- 4
- 案例：我们结合案例1和案例2来组合成案例3
图片效果展示：
案例3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意点
浮动布局的三个注意点：
- 浮动和标准流父亲搭配
- 一个元素浮动了，理论上其他兄弟元素也应该浮动
- 浮动的盒子只会影响后面的标准流盒子（即一个盒子浮动后，对前面标准流盒子不做影响，但后面的标准流盒子会压住浮动盒子，所以只对后面标准流盒子做影响）
浮动清除
首先我们介绍一下为什么要清除浮动：
- 因为内容不同可能导致父类盒子高度不确定，只能由子盒子来撑开父亲
- 但是父类盒子不给高度，内部元素又都是浮动状态的话，父类盒子高度为0，就会导致后面排版错误
下面给出代码示例：
Document
清除浮动的本质：
- 为了清除浮动所带来的影响
- 当我们清除浮动之后，父类盒子会根据子类盒子来控制高度
- 主要采用clear:left/right/both来清除其float性质
清除浮动方法：
-
额外标签法
-
在浮动末尾加上clear:both;属性
-
优点：通俗易懂
-
缺点：添加无意义标签，结构性差
-
我们给出代码展示：
Document
- 父级添加overflow
- 给父类添加overflow：hidden即可
- 优点：代码简便
- 缺点：无法显示溢出部分
我们给出代码示例：
Document
-
：after伪元素法
- 我们目前不需要掌握确切代码意思，这种情况相当于在最后创建一个盒子并实现clear方法
.clearfix { *zoom: 1; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }- 然后给父类的class里添加clearfix即可
我们下面给出代码示例：
Document
-
双伪元素法：
- 我们目前不需要掌握确切代码意思，这种情况相当于在开始和最后创建一个盒子并实现clear方法
.clearfix { *zoom: 1; } .clearfix:after { clear: both; } .clearfix:after,.clearfix:before { content: ""; display: table; }- 然后给父类的class里添加clearfix即可
我们下面给出代码示例：
Document
定位
首先我们为什么需要定位呢？
- 同理，因为一些要求我们之前学习的标准流和浮动无法完成
- 定位主要是为了让盒子自由移动并压住盒子或固定于某一位置
定位组成
定位 = 定位模式 + 边偏移
- 定位模式：指定一个元素在文档的定位方法
- 定位模式分为四种：
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- 边偏移：决定元素的最终位置
- 边偏移也分为四个方向：
- top，bottom，left，right
定位模式
定位模式分为四种：static relative absolute fixed
接下来让我们一一了解：
- static静态定位
静态定位是元素的默认定位方法，无定位的意思
语法：
选择器{ position：static;}
- 静态定位就是按照标准流特性摆放位置，没有位偏移
- 静态定位很少使用
- relative 相对定位
相对定位是元素在移动位置时，是相对于原本的位置来说的
语法：
选择器{ position：relative;}
- 它是相对于自己原本的位置进行移动
- 它在移动之后，在标准流中仍旧占有原本的位置（即移动之后，原本位置仍旧保留，其他标准流无法占用该位置）
- 它在移动之后，在其他位置时，属于覆盖在其他盒子之上
我们给出代码测试：
Document
- absolute 绝对定位
绝对定位是元素在移动位置的时候，相对于它的祖先元素来说的
语法：
选择器{positon：absolute；}
- 若无祖先元素或祖先元素无定位，则以浏览器为准进行定位
- 若祖先元素有定位（相对定位，绝对定位都可以），则以祖先元素为定位(有定位的前提下就近原则)
- 绝对定位的标准流位置不保留，其他标准流可以占有绝对定位的原本位置
我们下面给出代码示例：
Document
- fix固定定位
固定定位是元素固定于浏览器可视区的位置，主要应用于：在浏览器页面滚动时元素位置不发生改变
语法：
选择器{position：fix；}
- 以浏览器的可视窗口为参照点移动元素
- 和父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原有位置
fixed小技巧：
我们希望使fix内容紧贴版心右侧固定不变
那么我们就可以使fix的位置left在浏览器宽的的一半，然后设置margin-left为版心宽度的一半
我们给出代码示例：
Document
- 粘性定位（sticky）
粘性定位可以认为使相对定位和固定定位的混合
语法：
选择器{position：sticky；}
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 需要有top，left，right，bottom中其中一个控制滞停位置才可以生效
- 注意：有的兼容性较差，不能使用
我们下面给出代码示例：
Document
子绝父相
子绝父相：
- 父级为了限制子级，必须采用相对定位
- 自己为了放置于任意位置且不干扰其他盒子，必须采用绝对定位
我们给出一个案例来解释子绝父相：
案例
快递牛，整体不错，蓝牙都可以秒连
来自1923134的评价
Redmi AirDots真无线蓝...|99.9元
定位叠放次序
在使用定位布局时，可能会引起盒子重叠的情况，我们需要z-index来设置叠放权重
语法：
选择器{z-index：n；}
- 数值可以是正整数，负整数和0，默认为auto，值越大，权重越大
- 如果属性相同，则按照书写顺序，后来者居上
- 数字后面不能加单位
- 只要定位的盒子才有z-index属性
我们下面给出代码示例：
Document
w1
w2
w3
绝对定位盒子居中方法
绝对定位盒子无法通过margin： 0 auto居中
需要采用小算法：left：50% 和 margin-left：-自身50%
我们下面给出代码示例：
Document
定位特殊特性
下面我们给出一些定位特殊特性：
- 行内元素用绝对或固定定位时：
- 可以直接设置高宽
- 块级元素用绝对或固定定位时：
- 若不设置高宽，元素大小默认等于内容大小
- 脱标的盒子不会触发外边距塌陷
- 浮动元素和定位元素均不会触发外边距合并问题
- 浮动元素仅压住盒子，但不会压住文字（用来完成图文环绕）
- 绝对固定元素会将盒子和文字一并压住（用来完全覆盖）
结束语
好的，那么关于浮动和定位的知识点基本汇总完毕，希望能给你带来收获。
接下来我会介绍一些CSS的布局技巧和知识补充，希望能获得你的一些鼓励。