世界那么大，你哪都别去了，来我带你了解CSS3 (二)

news2025/10/31 22:39:54

文章目录

  • ‍❤️‍🔥CSS文档流
  • ‍❤️‍🔥CSS浮动
  • ‍❤️‍🔥CSS定位
  • ‍❤️‍🔥CSS媒体查询

‍❤️‍🔥CSS文档流

在这里插入图片描述
文档流是文档中可显示对象在排列时所占用的位置/空间。
例如：块元素自上而下摆放，内联元素，从左到右摆放标准流里面的限制非常多，导致很多页面效果无法实现。
⭕高矮不齐，底边对齐
⭕ 空白折叠现象
① 无论多少个空格、换行、tab，都会折叠为一个空格。
② 如果我们想让img标签之间没有空隙，必须紧密连接。

文档流产生的问题

高矮不齐，底边对齐
在这里插入图片描述

<span>我是文本内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

空格折叠
在这里插入图片描述

<span>我是文本       内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

元素无空隙

在这里插入图片描述

<span>我是文本内容</span>
<img src="1.jpg" alt=""><img src="1.jpg"
alt="">

img{
    width: 200px;
}

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

脱离文档流
使⼀个元素脱离标准文档流有三种方式
① 浮动
② 绝对定位
③ 固定定位

‍❤️‍🔥CSS浮动

在这里插入图片描述
浮动的定义
float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

值描述
left元素向左浮动
right元素向右浮动

浮动的原理
① 浮动以后使元素脱离了文档流
② 浮动只有左右浮动，没有上下浮动

元素向左浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

在这里插入图片描述

<div class="box"></div>
<div class="container"></div>

.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
}

元素向右浮动
在这里插入图片描述

<div class="box"></div>
<div class="container"></div>

.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: right;
}

所有元素向左浮动
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右。
在这里插入图片描述

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 0 5px;
}

当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放。
在这里插入图片描述

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    width: 250px;
    height: 300px;
    border: 1px solid red;
 }
 .box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

清除浮动
在这里插入图片描述
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流，并向左/向右浮动。
① 浮动元素会造成父元素高度塌陷
② 后续元素会受到影响
在这里插入图片描述

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

 .container{
    border: 1px solid red;
 }
 .box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

在这里插入图片描述

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用。
解决方案有很多种：
① 父元素设置高度
② 受影响的元素增加clear属性
③ overflow清除浮动
④ 伪对象方式

父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小。
在这里插入图片描述

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

.container{
    height: 300px;
    width: 350px;
    border: 1px solid red;
 }
 .box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }

overflow清除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮动。
这种情况下，父布局不能设置高度，父级标签的样式里面加: overflow:hidden;clear: both;

在这里插入图片描述

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
     margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理。
为父标签添加伪类 after ,设置空的内容，并且使用 clear:both;这种情况下，父布局不能设置高度。
在这里插入图片描述

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

.container {
    width: 350px;
    border: 1px solid red;
 }
.container::after {
    content: "";
    display: block;
    clear: both;
 }
.box {
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
 }
.nav {
    width: 100px;
    height: 100px;
    background-color: red;
 }

‍❤️‍🔥CSS定位

在这里插入图片描述
定义
position 属性指定了元素的定位类型

值描述
relative相对定位
absolute绝对定位
flxed固定定位

其中，绝对定位和固定定位会脱离文档流。
设置定位之后：可以使用四个方向进行调整位置： left、top、right、bot tom

相对定位

<div class="box"></div>

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 100px;
}

绝对定位

<div class="box1"></div>
<div class="box2"></div>

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

固定定位

<div class="box1"></div>
<div class="box2"></div>

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:fixed;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

● 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

<div class="container">
    <div class="box"></div>
</div>

.container{
    width: 300px;
    height: 300px;
    background-color: #666;
    position: relative;
    left: 200px;
}
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
}

Z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

<div class="box1"></div>
<div class="box2"></div>


.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
}

‍❤️‍🔥CSS媒体查询

在这里插入图片描述
媒体查询能使页面在不同在终端设备下达到不同的效果。
媒体查询会根据设备的大小自动识别加载不同的样式。

设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在“head”标签里，加入这个meta标签。

<meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no">

参数解释
① width = device-width 宽度等于当前设备的宽度。
② initial-scale 初始的缩放比例（默认设置为1.0）。
③ maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）。
④ user-scalable 用户是否可以手动缩放（默认设置为no）。

媒体查询语法

@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and
(min-width: 768px) {
     /* 设备小于768px但小于992px加载样式 */
     body{
     background-color: pink;
     }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
   background-color: green;
   }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/391577.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第一章---Pytorch快速入门---第一节---张量及运算

第一章---Pytorch快速入门---第一节---张量及运算

目录 1.1张量的数据类型 1.2 张量的生成 1.3 张量操作 1.4 张量的计算 一、张量 在高等数学中&#xff0c;单独的一个数是标量&#xff0c;而有序排列的一组数字是一个向量&#xff08;例如一个数组&#xff09;&#xff0c;向量组可以构成矩阵。向量是一维的&#xff0c;而…
阅读更多...
Java——腐烂的橘子

Java——腐烂的橘子

题目链接 leetcode在线oj题——腐烂的橘子 题目描述 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方…
阅读更多...
Python数据分析案例19——上市银行财务指标对比

Python数据分析案例19——上市银行财务指标对比

我代码栏目都是针对基础的python数据分析人群&#xff0c;比如想写个本科毕业论文&#xff0c;课程论文&#xff0c;做个简单的案例分析等。过去写的案例可能使用了过多的机器学习和深度学习方法&#xff0c;文科的同学看不懂&#xff0c;可能他们仅仅只想用python做个回归或者…
阅读更多...
Method breakpoints may dramatically slow down debugging 解决方案

Method breakpoints may dramatically slow down debugging 解决方案

项目无法启动了 简单介绍一下事情的过程&#xff1a;昨天在进行代码调试的时候&#xff0c;代码部分处理完成之后&#xff0c;启动debug模式的热部署准备测试一下逻辑&#xff0c;结果左下角提示我热部署失败&#xff0c;需要重新启动Tomcat才能再次调试&#xff0c;所以只得重…
阅读更多...
spring之refresh流程-Java八股面试(六)

spring之refresh流程-Java八股面试(六)

系列文章目录 第一章 ArrayList-Java八股面试(一) 第二章 HashMap-Java八股面试(二) 第三章 单例模式-Java八股面试(三) 第四章 线程池和Volatile关键字-Java八股面试(四) 第五章ConcurrentHashMap-Java八股面试(五) 动态每日更新算法题&#xff0c;想要学习的可以关注一下…
阅读更多...
css中重难点整理(vertical-align)

css中重难点整理(vertical-align)

一、vertical-align 在学习vertical-align的时候&#xff0c;可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了&#xff0c;等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。 本来vertical-align就很不好理…
阅读更多...
Spring——配置文件实现IOC和DI入门案例

Spring——配置文件实现IOC和DI入门案例

现在先如图创建如下的Maven项目&#xff0c;在业务层和数据层分别写上对应的接口和实现类 在BookServiceImpl中创建一个BookDaoImpl对象&#xff0c;并调用里面的save()方法。 在测试类里面new一个bookservice的实现类&#xff0c;调用save()方法 输出如下图所示 要使用IOC容…
阅读更多...
安全开发基础 -- DAST，SAST，IAST简单介绍

安全开发基础 -- DAST，SAST，IAST简单介绍

安全开发基础-- DAST&#xff0c;SAST&#xff0c;IAST 简介 DAST 动态应用程序安全测试&#xff08;Dynamic Application Security Testing&#xff09;技术在测试或运行阶段分析应用程序的动态运行状态。它模拟黑客行为对应用程序进行动态攻击&#xff0c;分析应用程序的反…
阅读更多...
Windows 10 - Django + simpleui项目实战 - 详细总结 导入导出-权限修改-修改登录界面-数据库优化-js触发事件失效奇葩问题

Windows 10 - Django + simpleui项目实战 - 详细总结 导入导出-权限修改-修改登录界面-数据库优化-js触发事件失效奇葩问题

目录对django框架的内置功能的修改导入导出模块超级用户权限修改了解修改登录界面方法安装mysqlclient 性能优化&#xff0c;比pymysql模块更好报错 django.db.utils.OperationalError: (2026, SSL connection error: unknown error number)静态文件管理js问题 - onchange 和 o…
阅读更多...
微信小程序搭建流程

微信小程序搭建流程

一、申请微信开发者账号虽然开发微信小程序可以使用工具提供的测试号&#xff0c;但是测试号提供的功能极为有限&#xff0c;而且使用测试号开发的微信小程序不能上架发布。因此说我们想要开发一个可以上架的微信小程序&#xff0c;首先必须要申请微信开发者账号。大家尽可放心…
阅读更多...
2023年总结的web前端学习路线分享（学习导读）

2023年总结的web前端学习路线分享（学习导读）

如果你打开了这篇文章&#xff0c;说明你是有兴趣想了解前端的这个行业的&#xff0c;以下是博主2023年总结的一些web前端的学习分享路线&#xff0c;如果你也想从事前端或者有这方面的想法的&#xff0c;请接着往下看&#xff01; 前端发展前景 前端入门 巩固基础 前端工程…
阅读更多...
深度学习J1周-ResNet50算法实战与解析_鸟类识别（CNN）

深度学习J1周-ResNet50算法实战与解析_鸟类识别（CNN）

&#x1f368; 本文为[&#x1f517;365天深度学习训练营]内部限免文章&#xff08;版权归 *K同学啊* 所有&#xff09; &#x1f356; 作者&#xff1a;[K同学啊] 本周任务&#xff1a; ●1.请根据本文 TensorFlow 代码&#xff08;训练营内部阅读&#xff09;&#xff0c;编写…
阅读更多...
EasyExcel3.x文件导入SpringBoot2

EasyExcel3.x文件导入SpringBoot2

引入依赖<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.3</version></dependency>简单导出以导出用户信息为例&#xff0c;接下来手把手教大家如何使用EasyExcel实现导出功能&a…
阅读更多...
华为OD机试题，用 Java 解【数字涂色】问题

华为OD机试题，用 Java 解【数字涂色】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试，一定要注意不…
阅读更多...
微软正式推出用于 WSL 的 D3D12 GPU 视频加速

微软正式推出用于 WSL 的 D3D12 GPU 视频加速

导读在允许 WSL 使用 OpenGL、OpenCL 和 Vulkan API 进行 GPU 加速之后&#xff0c;微软又正式发布了针对 Linux 的 Windows 子系统 (WSL2) 的 Direct3D 12 GPU 视频加速支持。 在允许 WSL 使用 OpenGL、OpenCL 和 Vulkan API 进行 GPU 加速之后&#xff0c;微软又正式发布了针…
阅读更多...
【java基础】泛型的通配符(extends,super,?)

【java基础】泛型的通配符(extends,super,?)

文章目录基本概念通配符extends通配符super无限定通配符?总结基本概念 如果不使用通配符&#xff0c;那么我们在使用了泛型之后就不允许类型参数发生改变了&#xff0c;但是有了通配符就可以更加灵活的控制类型参数&#xff0c;类型参数可以发生改变。下面准备了3个类用于演示…
阅读更多...
【MAC OS 命令行】Redis的安装、启动和停止。就是如此简单

【MAC OS 命令行】Redis的安装、启动和停止。就是如此简单

目录Mac 安装 Redis使用 Homebrew 安装 Redis总结Mac 安装 Redis 使用 Homebrew 安装 Redis 如果没有安装 Homebrew&#xff0c;先安装 Homebrew 执行命令&#xff1a; 方法一、brew 官网的安装脚本 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homeb…
阅读更多...
浮点数的表示和运算

浮点数的表示和运算

文章目录浮点数的表示表示溢出规格化IEEE754格式浮点数真值的计算公式范围浮点数的加减浮点数的乘除刷题小结浮点数的表示 表示 为什么会有浮点数&#xff1f;位数有限的情况下&#xff0c;既扩大了数的范围&#xff0c;也保持了数的精度。 浮点数的意思是小数点是浮动的&…
阅读更多...
ERP（企业资源管理）概述

ERP（企业资源管理）概述

&#x1f31f;所属专栏&#xff1a;ERP企业资源管理&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该系列将持续更新ERP的相关学习笔记&#xff0c;欢迎和我一样的小白订阅&#xff0c;一起学习共同进步~&#x1f449;文章简介&a…
阅读更多...
利用Python按数字顺序批量修改文件名称

利用Python按数字顺序批量修改文件名称

为了按顺序修改文件名称&#xff0c;采用对【文件名称列表】进行排序的方法。 要对列表进行排序&#xff0c;这里使用列表的sort()方法。这个方法会在不创建新的列表的情况下直接对列表进行排序。 逆序排列&#xff1a;sort(reverseTrue) files.sort()结果还是不理想&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023