CSS布局之浮动和定位
2024-05-12 23:14:31
目录
- 1. 浮动
- 1.1 浮动元素的特性
- 1.2 浮动不会压住文字
- 1.3 清除浮动
- 1.3.1 额外标签法
- 1.3.2 父盒子添加overflow属性
- 1.3.3 父盒子添加after伪元素
- 1.3.4 父盒子添加双伪元素
- 2. 定位
- 2.1 静态定位(static)
- 2.2 相对定位(relative)
- 2.3 绝对定位(obsolute)
- 2.3.1 让子盒子位于父盒子中间显示
- 2.4 固定定位(fixed)
- 2.4.1 盒子固定在另一个盒子的右侧
- 2.5 粘性定位(sticky)
- 2.6 定位的其它特性
- 2.6.1 z-index定位叠放顺序
- 3. 盒子的显示与隐藏
- 3.1 display显示与隐藏
- 3.2 visibility显示与隐藏
- 3.3 overflow溢出显示与隐藏
1. 浮动
网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动
网页布局第二准则：先设置盒子大小，再设置盒子位置
1.1 浮动元素的特性
- 任何元素都可以浮动
- 浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置
- 一个盒子内的元素如果一个元素浮动，则所有元素应该都要添加浮动，否则会有很多Bug
- 多个浮动的元素顶部对齐，相同浮动方向的元素之间没有空隙。如果父元素宽度容纳不下多个浮动的元素，则另起一行排列
- 浮动的元素具有行内块的特点
- 浮动的元素如果没有设置宽度，则宽度为内容的宽度
float默认为none, 可以为left和right，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;height: 120px;background-color: black;}.inner {float: left;width: 500px;height: 50px;background-color: red;}span {float: right;width: 200px;height: 100px;background-color: yellow;}</style></head>
<body><div class="outer"><div class="inner">盒子一</div><div class="inner">盒子二</div><span>span一</span>
</div></body>
</html>
显示效果如下：
1.2 浮动不会压住文字
浮动的盒子会压住标准流的盒子，但是标准流盒子中的文字不会被压住，会环绕在浮动的盒子边上。因为浮动最初的目的就是做文字环绕效果的
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.box {float: left;width: 100px;height: 100px;background-color: rgba(0, 0, 0, 0.3);}p {background-color: yellow;}</style>
</head>
<body><div class="box"></div>
<p>我是一行长长长长长长长长长长长长长长长长长长长长的段落</p></body>
</html>
显示效果如下：
1.3 清除浮动
因为浮动的盒子不占用空间，而有时父盒子不方便给高度，所以父盒子的高度为0，会影响后面的标准流元素，如下面代码所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;background-color: red;}.inner {float: left;width: 200px;height: 200px;background-color: yellow;}.footer {width: 300px;height: 300px;background-color: black;}</style></head>
<body><div class="outer"><div class="inner">内部盒子一</div><div class="inner">内部盒子二</div>
</div>
<div class="footer">底部盒子三</div></body>
</html>
显示效果如下：
所以我们需要清除浮动，清除浮动后，父盒子会根据子盒子高度自动检测出高度，父盒子有高度就不会影响后面的标准流元素
清除浮动的语法为: clear: both;，清除左右两侧的浮动的影响，原理是闭合浮动，将浮动的盒子关在父盒子里面，不影响父盒子外面的盒子
1.3.1 额外标签法
在浮动的元素后面添加一个空的块元素，再给空的块元素添加清除浮动样式
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;background-color: red;}.inner {float: left;width: 200px;height: 200px;background-color: yellow;}.footer {width: 300px;height: 300px;background-color: black;}.my-clear {clear: both;}</style></head>
<body><div class="outer"><div class="inner">内部盒子一</div><div class="inner">内部盒子二</div><div class="my-clear"></div>
</div>
<div class="footer">底部盒子三</div></body>
</html>
显示效果如下：
1.3.2 父盒子添加overflow属性
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;background-color: red;overflow: hidden;}.inner {float: left;width: 200px;height: 200px;background-color: yellow;}.bottom {width: 300px;height: 300px;background-color: black;}</style></head>
<body><div class="outer"><div class="inner">内部盒子一</div><div class="inner">内部盒子二</div>
</div>
<div class="bottom">底部盒子三</div></body>
</html>
1.3.3 父盒子添加after伪元素
其实是额外标签法的升级版
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;background-color: red;}.outer:after {content: "";display: block;height: 0px;clear: both;visibility: hidden;}.inner {float: left;width: 200px;height: 200px;background-color: yellow;}.bottom {width: 300px;height: 300px;background-color: black;}</style></head>
<body><div class="outer"><div class="inner">内部盒子一</div><div class="inner">内部盒子二</div>
</div>
<div class="bottom">底部盒子三</div></body>
</html>
1.3.4 父盒子添加双伪元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>* {margin: 0px;padding: 0px;}.outer {width: 800px;background-color: red;}.outer:before, .outer:after {content: "";display: table;}.outer:after {clear: both;}.inner {float: left;width: 200px;height: 200px;background-color: yellow;}.bottom {width: 300px;height: 300px;background-color: black;}</style></head>
<body><div class="outer"><div class="inner">内部盒子一</div><div class="inner">内部盒子二</div>
</div>
<div class="bottom">底部盒子三</div></body>
</html>
2. 定位
定位也是一种网页布局手段，按照定位的方式移动盒子到某个位置。定位 = 定位模式 + 边偏移，定位模式指定一个盒子的定位方式(通过positon属性指定)，边偏移指定移动的大小，4个属性如下表所示
| 边偏移属性 | 描述 | 示例 |
|---|---|---|
| top | 顶部偏移量，指定盒子相对于某盒子上边线的距离 | top: 10px; |
| right | 右侧偏移量，指定盒子相对于某盒子右边线的距离 | right: 10px; |
| bottom | 底部偏移量，指定盒子相对于某盒子下边线的距离 | bottom: 10px; |
| left | 左侧偏移量，指定盒子相对于某盒子左边线的距离 | left: 10px; |
定位的特殊特性：
- 行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
- 块级元素添加绝对定位或固定定位，宽度和高度默认是盒子中内容的宽度和高度
- 和浮动一样，绝对定位或固定定位的盒子，不会引起外边距塌陷的问题
2.1 静态定位(static)
- 盒子的默认定位方式，即没有定位
- 通过
positon: static;指定，没有边偏移属性
2.2 相对定位(relative)
特点：
- 相对于之前的位置进行移动
- 移动后，原来的位置以标准流的方式继续占有
- 移动后的盒子压住其它盒子
经常给绝对定位当爹(俗称：子绝父相)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>div {width: 100px;height: 100px;}.box1 {background-color: red;position: relative;top: 10px;left: 50px;}.box2 {background-color: yellow;}</style>
</head>
<body><div class="box1"></div>
<div class="box2"></div></body>
</html>
显示效果如下：
2.3 绝对定位(obsolute)
特点：
- 移动盒子的时候，如果没有祖先盒子，或祖先盒子没有定位，则相对浏览器(非视口)的边线进行偏移
- 如果祖先盒子有定位(相对、绝对、固定)，则相对最近一级的祖先盒子边线进行偏移。所以通常给父盒子相对定位但不给偏移量，这样既不造成父盒子的移动，又可以使子盒子形成绝对定位
- 绝对定位的盒子不占有原来的位置，但会压住其它盒子
2.3.1 让子盒子位于父盒子中间显示
加了绝对定位的盒子不能通过margin: 0px auto;水平居中，可以使用如下计算方法，实现水平和垂直居中
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>.parent {width: 300px;height: 300px;background-color: red;position: relative;}.child {width: 100px;height: 100px;background-color: yellow;position: absolute;/*让子盒子居中*/margin-top: -50px;top: 50%;margin-left: -50px;left: 50%;}.down {width: 220px;height: 220px;background-color: pink;}</style>
</head>
<body><div class="parent"><div class="child"></div><div class="down"></div>
</div></body>
</html>
显示效果如下：
2.4 固定定位(fixed)
特点：
- 固定定位的盒子固定在浏览器视口的某个位置，压住其它盒子。浏览器上下滚动时，盒子的位置不变
- 边偏移是相对于视口的边线来移动
- 固定定位的盒子不占有原来的位置
2.4.1 盒子固定在另一个盒子的右侧
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>.fix-box {width: 100px;height: 100px;background-color: yellow;position: fixed;/*盒子固定在另一个盒子的右侧*/top: 100px;left: 50%;margin-left: 400px;}.median {width: 800px;height: 1000px;background-color: red;margin: 0 auto;}</style>
</head>
<body><div class="fix-box"></div>
<div class="median"></div></body>
</html>
显示效果：
2.5 粘性定位(sticky)
刚开始盒子相当于标准流的盒子，当top、right、bottom、left中的一个(必须有且只有一个)达到设定的值时，则转换为偏移量为该值的固定定位盒子
如下所示
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>body {height: 2000px;background-color: red;}.nav {width: 800px;height: 50px;background-color: yellow;margin: 200px auto;position: sticky;top: 30px;}</style>
</head>
<body><div class="nav"></div>
<p>我是一个长长长长长长长长长长长长长长长长长长的段落</p></body>
</html>
刚开始盒子的位置如下图所示
当向下滚动时，当top值等于30px时，盒子的上偏移量为30px，以固定定位的模式固定在视口中
2.6 定位的其它特性
2.6.1 z-index定位叠放顺序
在使用定位布局的时候，可能出现多个定位的盒子重叠的问题，如果可以想让某个定位的盒子显示在最上面，可以使用z-index: number;
- 默认z-index的值为auto(0)，表示按照书写顺序，后来者居上
- 只有定位的盒子才有z-index属性
- 数值可以为正数、负数、0，数值越大，盒子越靠上
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>div {width: 200px;height: 200px;}.zhang-san {background-color: red;position: absolute;top: 10px;left: 10px;z-index: 1;}.li-si {background-color: yellow;position: absolute;top: 30px;left: 30px;}.wang-wu {background-color: pink;position: absolute;top: 50px;left: 50px;}</style>
</head>
<body><div class="zhang-san">zhang-san</div>
<div class="li-si">li-si</div>
<div class="wang-wu">wang-wu</div></body>
</html>
显示效果如下：
3. 盒子的显示与隐藏
如下图，当鼠标放到会员中心上面，下拉框将会被显示；当鼠标点击新年锦鲤的关闭按钮，新年锦鲤将会被隐藏
3.1 display显示与隐藏
- display: none; ------ 隐藏元素，隐藏的元素不再占有原来的位置
- display: block; ------ 除了转化为块级元素，同时显示元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>div {width: 100px;height: 100px;}.box1 {background-color: red;display: none;}.box2 {background-color: yellow;}</style>
</head>
<body><div class="box1"></div>
<div class="box2"></div></body>
</html>
显示效果如下：
3.2 visibility显示与隐藏
- visibility: hidden; ------ 隐藏元素，隐藏的元素占有原来的位置
- visibility: visible; ------ 显示元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>div {width: 100px;height: 100px;}.box1 {background-color: red;visibility: hidden;}.box2 {background-color: yellow;}</style>
</head>
<body><div class="box1"></div>
<div class="box2"></div></body>
</html>
显示效果如下：
3.3 overflow溢出显示与隐藏
overflow用于指定当盒子中的内容溢出了，超过盒子的宽度或高度，该如何处理溢出的内容，有4种属性值：
| 属性值 | 描述 |
|---|---|
| visible | 默认值。不隐藏溢出的内容，也没有滚动条 |
| hidden | 隐藏溢出的内容，但没有滚动条 |
| scroll | 不管内容是否溢出，都有滚动条 |
| auto | 内容不溢出，没有滚动条；内容溢出，有滚动条 |
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>test title</title><style>div {width: 300px;height: 100px;border: 1px solid red;margin: 100px auto;overflow: auto;}</style>
</head>
<body><div>春节（Spring Festival），即中国农历新年，俗称新春、新岁、岁旦等，口头上又称过年、过大年。春节历史悠久，由上古时代岁首祈岁祭祀演变而来。万物本乎天、人本乎祖，祈岁祭祀、敬天法祖，报本反始也。春节的起源蕴含着深邃的文化内涵，在传承发展中承载了丰厚的历史文化底蕴。在春节期间，全国各地均有举行各种庆贺新春活动，带有浓郁的各地域特色。这些活动以除旧布新、驱邪攘灾、拜神祭祖、纳福祈年为主要内容，形式丰富多彩，凝聚着中华传统文化精华。
</div></body>
</html>
显示效果
CSS布局之浮动和定位相关推荐
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- HTML、CSS综合04——浮动、定位、选择器
复习 文本属性:text-开头的属性都可以被继承 背景属性:(背景属性尤为重要) 背景颜色:background-color 背景图片:background-image 背景图片的重复方式 ...
- CSS布局最常用属性float（浮动）和position（定位）
在进行CSS网页布局时,对元素与容器进行布置与规划,最常用的两个属性就是浮动float和定位position.这两个属性的理解对CSS网页布局的学习非常重要.我们52CSS.com就这两个属性的相关知 ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- css布局-浮动、定位、flex布局
1.CSS布局 - 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 标准流(文档流/普通流) -标准流(文档流/ ...
- CSS静态布局——常规流，定位，浮动。
合理的网页布局方式 合理的网页布局可以使网页内容以整洁有序的方式展示给用户.凌乱的布局则会使网页的信息无法正确传达,用户的目的没有达到等问题. 合理的网页布局应有: 1.合理地把页面切分为多个具有具体 ...
- CSS布局系列一：标准、浮动、定位
标准 display block:表示元素占据全部可用宽度的元素,并且在其前后都会换行,常见标签有div.h.p inline:表示元素在一行中水平布置,可以使用水平内边距.边框和外边距.但是,垂直内 ...
- DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录 布局概述 网页布局 页面元素定位机制 布局常用属性 浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
- 前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
最新文章
- 【原创】Android VMP加壳 POC
- 数据中心在疫情期间发挥的作用
- Java消息系统介绍
- docker仓库搭建、加密、用户认证
- ENVI5.3.1使用Landsat 8影像进行图像融合
- FCKeditor 2.6.4在ASP.NET中的配置方法
- 查询解析MySQL_mysql内部查询过程详解
- Android studio3.5读取项目资源文件的图片
- PikPak磁力网盘
- sonar mysql 配置_Sonar配置与使用
- web安全工具库（笔记）----端口扫描(ScanPort.exe)
- 《Thinking in Bets》读书分享 - 如何在信息不完全情况下做出更好的决策（1）...
- 弘辽科技：拼多多发货中途改地址可以吗？怎么改？
- 2018最新Python视频教程
- MakerBot Replicator Z18使用说明文档
- R语言的三种聚类方法
- PLC低频测速(T法测速)
- 三次样条曲线CubicSpline
- WMS Top10 软件服务商
- 24 点游戏（Leetcode-679）-回溯法