【CSS】CSS 布局——常规流布局

<h1>基础文档流</h1><p>我是一个基本的块级元素。我的相邻块级元素在我的下方另起一行。</p><p>默认情况下,我们会占据父元素 100%的宽度,并且我们的高度与我们的子元素内容一样高。我们的总宽度和高度是我们的内容+ 内边距 + 边框宽度/高度。
</p><p>我们以我们的外边距分隔。由于外边距折叠,我们以其中一个外边距的宽度(如果两个的外边距不相同,以更大的为准)分隔,而不是两个。
</p><p>如果在同一行上足够的空间,行级元素(如<span>这个</span><span>这个</span>),那么它们将与相邻的文本节点将会一起放置在同一行上。如果行级元素溢出,<span>那么它们将会换行,就像这个包含文本的行级元素一样</span>,或者如果没有足够的空间,那么它们将会换到新的一行,就像这个图片一样:<img src="long.jpg" alt="snippet of cloth" />
</p>
body {width: 500px;margin: 0 auto;
}p {background: rgba(255, 84, 104, 0.3);border: 2px solid rgb(255, 84, 104);padding: 10px;margin: 10px;
}span {background: white;border: 1px solid black;
}

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Flink笔记

下面是你提供的文字整理后的结果&#xff1a; 1. Flink是一个针对流数据和批数据的分布式处理引擎&#xff0c;同时支持原生流处理的开源框架。 - 延迟低(毫秒级)&#xff0c;且能够保证消息传输不丢失不重复。 - 具有非常高的吞吐(每秒千万级)。 - 支持原生流处理。…

echarts-convert.js使用

echarts-convert.js demo 点击下载 1、本地安装phantom.js插件 点击下载 2、更改文件路径 &#xff08;D:\phantomjs-2.1.1-windows\bin&#xff09;改为本地项目文件路径 3、打开cmd命令行&#xff0c;并格式化语言 运行以下命令 将命令行语言改为中文简体 chcp 65001…

(二分查找) 11. 旋转数组的最小数字 ——【Leetcode每日一题】

❓剑指 Offer 11. 旋转数组的最小数字 难度&#xff1a;简单 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。 给你一个可能存在 重复 元素值的数组 numbers &#xff0c;它原来是一个升序排列的数组&#xff0c;并按上述情形进行了一次旋转…

springboot整合kafka多数据源

整合kafka多数据源 项目背景依赖配置生产者消费者消息体 项目背景 在很多与第三方公司对接的时候&#xff0c;或者处在不同的网络环境下&#xff0c;比如在互联网和政务外网的分布部署服务的时候&#xff0c;我们需要对接多台kafka来达到我们的业务需求&#xff0c;那么当kafk…

【Vue-Router】路由过渡动效

在 Vue Router 中&#xff0c;你可以通过过渡动效&#xff08;Transition Effects&#xff09;为路由切换添加平滑的过渡效果&#xff0c;从而提升用户体验。过渡动效可以使用 Vue 的 <transition> 组件和 CSS 过渡来实现。 基本使用&#xff1a; 对导航使用动画&#…

HTML-文本标签

历史上&#xff0c;网页的主要功能是文本展示。所以&#xff0c;HTML 提供了大量的文本处理标签。 <div> <div>是一个通用标签&#xff0c;表示一个区块&#xff08;division&#xff09;。它没有语义&#xff0c;如果网页需要一个块级元素容器&#xff0c;又没有…

leetcode 494. 目标和

2023.8.14 一杯茶&#xff0c;一包烟&#xff0c;一道dp做一天... ps&#xff1a;nums[i]均大于等于0。本题先转化为0-1背包问题&#xff1a;将数组元素分成两堆&#xff1a;一堆为正号&#xff0c;另一堆为负号。设正号堆的和为x&#xff0c;则负号堆的和为sum-x。&#xff08…

CentOS系统环境搭建(十)——CentOS7定时任务

centos系统环境搭建专栏&#x1f517;点击跳转 使用CentOS系统环境搭建&#xff08;九&#xff09;——centos系统下使用docker部署项目的项目做定时任务。 CentOS7定时任务 查看现有的定时任务 crontab -l编辑定时任务 crontab -e示例 每天凌晨两点运行脚本 清理内存 0 2 *…

【Linux的开胃小菜】常用的RPM软件包与YUM仓库包管理器使用

一、系统初始化进程 systemd与System V init的区别以及作用&#xff1a; System V init运行级别systemd目标名称systemd目标作用0poweroff.target关机1rescue.target单用户模式2multi-user.target多用户的文本界面3multi-user.target多用户的文本界面4multi-user.target多用户…

【SpringBoot】88、SpringBoot中使用Undertow替代Tomcat容器

SpringBoot 中我们既可以使用 Tomcat 作为 Http 服务,也可以用 Undertow 来代替。Undertow 在高并发业务场景中,性能优于 Tomcat。所以,如果我们的系统是高并发请求,不妨使用一下 Undertow,你会发现你的系统性能会得到很大的提升。 1、Tomcat 介绍 Tomcat是一个开源的Ja…

【数据结构】“单链表”的练习题(二)

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

Django框架 靓号管理(增删改查)

Django框架 靓号管理&#xff08;增删改查&#xff09; 新建一个项目 backend 使用pycharm创建app startapp app项目目录 C:\code\backend ├── app | ├── admin.py | ├── apps.py | ├── migrations | ├── models.py | ├── tests.py | ├── views.…

关于微信临时文件wxfile://tmp文件如何处理,微信小程序最新获取头像和昵称

分享-2023年资深前端进阶&#xff1a;前端登顶之巅-最全面的前端知识点梳理总结&#xff0c;前端之巅 *分享一个使用比较久的&#x1fa9c; 技术栈&#xff1a;taro框架 vue3版本 解决在微信小程序获取微信头像时控制台报错&#xff1a;找不着wxfile://tmp 文件路径,失败&…

java spring cloud 企业电子招标采购系统源码:营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展 tbms

​ 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以…

支持M1 Syncovery for mac 文件备份同步工具

Syncovery for Mac 是一款功能强大、易于使用的文件备份和同步软件&#xff0c;适用于需要备份和同步数据的个人用户和企业用户。Syncovery 提供了一个直观的用户界面&#xff0c;使用户可以轻松设置备份和同步任务。用户可以选择备份的文件类型、备份目录、备份频率等&#xf…

解读2023年上半年财报:营收净利双增长,珀莱雅离高端还有多远?

夏季炎热&#xff0c;防晒类产品的销量暴涨。根据千牛数据&#xff0c;防晒衣今年5月全网搜索人数同比增长15%&#xff0c;加购人数同比增长29.8%&#xff0c;访问人数同比增加42%。消费者狂热的防晒需求&#xff0c;孕育着巨大的商机&#xff0c;许多企业开始瞄准这一机会。而…

在Windows和MacOS环境下实现批量doc转docx,xls转xlsx

一、引言 Python中批量进行办公文档转化是常见的操作&#xff0c;在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。 二、在Windows环境下的解决文案 Windows环境下&#xff0c;如何把doc转化为docx&#xff0c;xls转化为xlsx&#xff1f; 首先&#xff…

mysql三大日志—— 二进制日志binlog

binlog用于记录数据库执行的写入性操作&#xff0c;由服务层进行记录&#xff0c;通过追加的方式以二进制的形式保存在磁盘中。 binlog主要用于主从复制和数据恢复。 主从复制&#xff1a;在主机端开启binlog&#xff0c;然后将binlog发送到各个从机&#xff0c;从机存放binl…

sykwalking8.2和mysql5.7快速部署

1.SkyWalking 是什么&#xff1f; 分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。 提供分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案。 2.SkyWalking 有哪些功能…

Spring Task入门案例

Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 强调&#xff1a;只要是需要定时处理的场景都可以使用Spring Task 1. cron表达式 cron表达式…