CSS文档流以及脱离文档流的方法

文档流

 文档流是文档中可显示对象在排列时占用的位置/空间。例如:块元素自上而下摆放,内联元素从左到右摆放。(文档流中限制非常的多,导致很多页面效果无法实现)。

常见文档流限制

高低不齐,底边对齐
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;height: 200px;}</style>
</head>
<body><span>高低不齐底边对齐</span><img src="0197fd5b680c91a801206a3534717f.jpg@0o.jpg">
</body>

空格折叠(无论在标签文本内添加多少空格,在页面上只显示一个) 
    <span>空格      折叠</span>

 

部分元素之间无法实现无空隙 
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;height: 200px;}</style>
</head>
<body><img src="0197fd5b680c91a801206a3534717f.jpg@0o.jpg"><img src="0197fd5b680c91a801206a3534717f.jpg@0o.jpg">
</body>

 

脱离文档流方法 

浮动(float)

浮动是添加一个浮层来放置内容。

float属性定义了元素浮动的方向,任何元素都可以浮动。

left: 元素向左浮动

right:元素向右浮动

注意:浮动会使元素脱离文档流,浮动只能左右浮动不可以上下浮动。脱离文档流之后,元素相当于在页面上增加了一个浮层来放置内容,此时可以理解为由两层页面,底层是原页面,上层是脱离文档流的页面。

下面是未脱离文档流的页面

    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: red;}.continer{width: 300px;height: 300px;background-color: aqua;}</style></head><body><div class="box1"></div><div class="continer"></div></body>

 

 

添加float属性脱离文档流后

  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: red;float: left;}.continer{width: 300px;height: 300px;background-color: aqua;}</style></head><body><div class="box1"></div><div class="continer"></div></body>

  

清除浮动 

 浮动的副作用

当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动。

浮动元素会造成父元素高度塌陷,后续元素会受到影响。

清除浮动的方法

1.父元素设置高度

2.受影响的元素添加clear属性

3.使用overflow属性来清除浮动

 

定位 (position)

该属性指定了元素的定位类型

relative:相对定位(此定位方法是非脱离文档流的定位方法

absolute: 绝对定位  (每设置一个绝对定位,都会生成一层浮层)

fixed: 固定定位(随着页面的滚动而固定在某个位置

在设置定位后可以使用四个值进行位置调整:left(左)right(右)top(上)bottom(下)

相对定位(relative) (此定位方法是非脱离文档流的定位方法
  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.continer{width: 300px;height: 300px;background-color: aqua;position: relative;left: 100px;right: 100px;top: 100px;bottom: 100px;}</style></head><body><div class="continer"></div><div class="box1"></div></body>

 

绝对定位(absolute)

 

    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.continer{width: 300px;height: 300px;background-color:red;position: absolute;left: 100px;right: 100px;top: 100px;bottom: 100px;}</style></head><body><div class="continer"></div><div class="box1"></div></body>

 

固定定位 (fixed)
 <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.continer{width: 300px;height: 300px;background-color:orange;position: fixed;left: 100px;right: 100px;top: 100px;bottom: 100px;}</style></head><body><div class="continer"></div><div class="box1"></div></body>

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

z-index属性

设置元素的堆叠顺序,拥有跟高堆叠顺序的元素总是处于堆叠顺数较低的元素前面

例子:将box1的z-index值设为2,将box2的值设为1

    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: red;position:absolute;z-index: 2;left: 100px;right: 100px;top: 100px;bottom: 100px;}.box2{width: 100px;height: 100px;background-color:green;position:absolute;z-index: 1;left: 50px;right: 100px;top: 100px;bottom: 100px; }</style></head><body><div class="continer"><div class="box2"></div><div class="box1"></div></div></body>

 

如果将box1的z-index值设为1,将box2的值设为2

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

02【Matlab系统辨识】白噪声

1.白噪声与有色噪声 1.1 白噪声(white noise) 系统辨识中所用到的数据通常都含有噪声。从工程实际出发&#xff0c;这种噪声往往可以视为具有有理谱密度的平稳随机过程。白噪声是一种最简单的随机过程&#xff0c;是由一系列不相关的随机变量组成的理想化随机过程。白噪声的数…

构建数据分析模型,及时回传各系统监控监测数据进行分析反馈响应的智慧油站开源了。

AI视频监控平台简介 AI视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。增…

【深度学习】03-神经网络2-1损失函数

在神经网络中&#xff0c;不同任务类型&#xff08;如多分类、二分类、回归&#xff09;需要使用不同的损失函数来衡量模型预测和真实值之间的差异。选择合适的损失函数对于模型的性能至关重要。 这里的是API 的注意⚠️&#xff0c;但是在真实的公式中&#xff0c;目标值一定是…

面向对象 vs 面向过程

Java 和 C 语言的区别&#xff1a;面向对象 vs 面向过程 在编程世界中&#xff0c;不同的编程语言承载着不同的编程范式。C 语言作为一门经典的面向过程编程语言&#xff0c;注重函数的调用和操作&#xff1b;而Java则是典型的面向对象编程语言&#xff0c;重视对象与类的设计…

科技云报到:以数据“价值三角”为擎,探索数据治理实践路径

科技云报到原创。 过去四十年&#xff0c;经济发展主要来自于土地、劳动力、农业技术、工业技术等要素的充分释放。面向数字经济时代&#xff0c;无论是大模型、自动驾驶还是具身智能、人形机器人&#xff0c;数据已然成为继土地、劳动、资本和技术之后的又一种战略资产和新型…

【机器学习】11——矩阵求导

机器学习11——矩阵求导 打公式不太好标注&#xff0c;全图警告&#xff01;&#xff01;&#xff01; 文章目录 机器学习11——矩阵求导1.1标量对向量1.2标量对矩阵2.1向量对标量2.2向量对向量2.3向量对矩阵 1.1标量对向量 1.2标量对矩阵 X是m*n的矩阵&#xff0c;不严谨&am…

在vue中嵌入vitepress,基于markdown文件生成静态网页从而嵌入社团周报系统的一些想法和思路

什么是vitepress vitepress是一种将markdown文件渲染成静态网页的技术 其使用仅需几行命令即可 //在根目录安装vitepress npm add -D vitepress //初始化vitepress&#xff0c;添加相关配置文件&#xff0c;选择主题&#xff0c;描述&#xff0c;框架等 npx vitepress init //…

隐匿发案:David律所代理艺术家Ina Tomecek的两张青蛙版权画维权

案件基本情况&#xff1a;起诉时间&#xff1a;2024-8-14案件号&#xff1a;2024-cv-07196原告&#xff1a;Ina Tomecek原告律所&#xff1a;Law Office of David Gulbransen起诉地&#xff1a;伊利诺伊州北部法院涉案商标/版权&#xff1a;原告品牌简介&#xff1a;Ina Tomece…

内核是如何接收网络包的

1、数据如何从网卡到网络协议栈 1.1内核收包的过程 1、数据帧从外部网络到达网卡 2、网卡把数据帧从自己的缓存DMA(拷贝到)和内核共有的RingBuffer上 3、网卡发出硬中断通知CPU 4、CPU响应硬中断&#xff0c;简单处理后发出软中断 5、k’softirqd线程处理软中断&#xff0c;调…

颍川陈氏——平民崛起的典范

园子说颍川 广州有一处老建筑“陈家祠”&#xff0c;豪华精美堪比皇宫&#xff0c;誉为“岭南建筑艺术明珠”、“新世纪羊城八景”之一&#xff0c;是全国文保单位&#xff0c;4A 级景区。主体建筑以中轴线三座厅堂为中心&#xff0c;由大小十九座单体建筑组成&#xff0c;占地…

Windows如何查看已缓存的DNS信息

Windows server 2016如何查看已缓存的DNS信息 在Windows server 2016系统下&#xff0c;如何查看已缓存的DNS信息呢? 1.打开“运行”&#xff0c;输入cmd&#xff0c;点击“确定” 2.在命令行界面输入ipconfig /displaydns&#xff0c;按回车即可查看已缓存的dns信息

在vue中:style 的几种使用方式

在日常开发中:style的使用也是比较常见的&#xff1a; 亲测有效 1.最通用的写法 <p :style"{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p> 2.三元表达式 <a :style"{height:…

Android15之源码分支qpr、dp、beta、r1含义(二百三十二)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

Java面向对象——内部类(成员内部类、静态内部类、局部内部类、匿名内部类,完整详解附有代码+案例)

文章目录 内部类17.1概述17.2成员内部类17.2.1 获取成员内部类对象17.2.2 成员内部类内存图 17.3静态内部类17.4局部内部类17.5匿名内部类17.5.1概述 内部类 17.1概述 写在一个类里面的类叫内部类,即 在一个类的里面再定义一个类。 如&#xff0c;A类的里面的定义B类&#x…

江协科技STM32学习- P14 示例程序(定时器定时中断和定时器外部时钟)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Leetcode990.等式方程的可满足性

题目 原题链接 等式方程的可满足性 思路 定义一个长度为26&#xff08;变量为小写字母&#xff09;的数组充当并查集&#xff0c;并将数组中的元素初始化为 -1判断“”并合并元素&#xff0c;将相等的放在一个集合中判断“!”&#xff1b;不等的如果在一个集合中&#xff0c;则…

应用密码学第一次作业(9.23)

一、Please briefly describe the objectives of information and network security,such as confidentiality, integrity, availability , authenticity , and accountability The objectives of information and network security include: Confidentiality: Protecting se…

【小白向】怎么去除视频水印?HitPaw帮你轻松解决

序言 HitPaw是一款优秀的去除视频水印的工具。 特点&#xff1a;不仅仅能够去除图片、视频里的固定水印&#xff0c;还能去除移动水印。 尤其是它的AI去水印功能&#xff0c;效果非常好。 极简使用教程 下载安装 HitPaw需要在电脑上安装软件才能使用。 支持Windows系统和…

MySQL和SQL的区别简单了解和分析使用以及个人总结

MySQL的基本了解 运行环境&#xff0c;这是一种后台运行的服务&#xff0c;想要使用必须打开后台服务&#xff0c;这个后台服务启动的名字是在安装中定义的如下图&#xff08;个人定义MySQL88&#xff09;区分大小写图片来源 可以使用命令net start/stop 服务名&#xff0c;开…

浮动静态路由

浮动静态路由 首先我们知道静态路由的默认优先级是60&#xff0c;然后手动添加一条静态路由优先级为80的路由作为备份路由。当主路由失效的备份路由就会启动。 一、拓扑图 二、基本配置 1.R1: <Huawei>system-view [Huawei]sysname R1 [R1]interface GigabitEthernet…