当前位置: 首页 > news >正文

正常流布局

布局决定了元素的排列方式。如果让浏览器按照默认方式排列,这叫做正常流(normal flow)布局。正常布局是怎么排列元素的呢?各行从上到下,行内从左到右。

那么什么情况下会开始新的一行呢?块元素会产生新行。元素分为块元素和行内元素两类。块元素独占一行,行内元素则是在行中,在前面元素的右边排列。如果一行排满了,行内元素继续从第二行开始排列。

块元素是 display 属性为 block 的元素,独占一行,可以设置高度 height 、宽度 width (默认值 100% )和内边距、外边距。行内元素是 display 值为 inline 的元素,不产生换行,高度和宽度由元素内容决定,不能设置垂直方向的内边距和外边距。

如果希望为行内元素设置高度、宽度或垂直内外边距要怎么做呢?可以使用行内块元素。行内块元素的 display 是 inline-block ,是一种特殊的行内元素,它像其他行内元素一样,在行内排列,同时像块元素一样可以设置高度、宽度和边距。

表1  块元素、行内元素、行内块元素对比
块元素行内元素行内块元素
displayblockinlineinline-block
默认宽度占满上级容器宽度由内容决定由内容决定
默认高度由内容决定由内容决定由内容决定
换行独占一行不换行不换行
设置宽高有效无效有效
内边距全部有效左右有效全部有效
外边距全部有效左右有效全部有效

常用的HTML标签和默认显示类型如下:

表2  常用HTML标签和默认显示类型
显示类型元素元素简介
块元素<div>文档分区
<footer>页脚
<form>表单
<h1>-<h6>1-6级标题
<header>页眉
<li>列表项
<nav>导航链接
<ol>有序列表
<p>段落
<table>表格
<ul>无序列表
行内元素<a>超链接
<span>行内节
<sub>下标
<sup>上标
行内块元素<button>按钮
<img>图像
<input>输入框
<select>下拉菜单
<textarea>多行文本输入

相关文章:

正常流布局

布局决定了元素的排列方式。如果让浏览器按照默认方式排列&#xff0c;这叫做正常流&#xff08;normal flow&#xff09;布局。正常布局是怎么排列元素的呢&#xff1f;各行从上到下&#xff0c;行内从左到右。 那么什么情况下会开始新的一行呢&#xff1f;块元素会产生新行。…...

图论---拓扑排序(DFS)

时间复杂度&#xff1a; 最坏情况下为O(V!)&#xff0c;其中V是顶点数 实际运行时间取决于图的拓扑结构 这个实现可以输出有向无环图的所有可能的拓扑排序&#xff0c;并能检测图中是否存在环。 算法思想&#xff1a; 使用回溯法枚举所有可能的拓扑排序 在每一步选择当前入…...

探索 Redis 缓存对系统性能的提升——项目启动与操作指南

探索 Redis 缓存对系统性能的提升——项目启动与操作指南 一、项目简介 Redis是一款高性能的键值存储数据库&#xff0c;以其出色的读写速度和丰富的数据结构著称&#xff0c;被广泛用作应用系统的缓存层。作为缓存&#xff0c;Redis通过将热点数据存储在内存中&#xff0c;显…...

第十四届蓝桥杯Scratch03月stema选拔赛——九九乘法表

题目可点击下方地址查看&#xff0c;支持在线编程&#xff0c;获取素材和源码&#xff5e; 九九乘法表_scratch_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/scratch/show-3789.html?_shareid3 程序演示可点击下方地址查看&#xff0c;可获取源码&#xff5e;…...

【优选算法-二分查找】二分查找算法解析:如何通过二段性优化搜索效率

算法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;双指针滑动窗口 在本篇文章中&#xff0c;我们将深入解析二分查找算法的核心原理。从基本概念到实际应用&#xff0c;带你了解如何利用二分查找高效定位元素&#xff0c;提升搜索效率。无论你是刚接触算法的新手…...

如何搭建spark yarn模式的集群

一、基础环境准备 ‌安装JDK 1.8‌ 所有节点需安装JDK并配置环境变量&#xff0c;确保JAVA_HOME正确指向安装路径14。‌部署Hadoop集群‌ 安装Hadoop&#xff08;推荐3.x版本&#xff09;&#xff0c;配置YARN资源管理器4。在yarn-site.xml中启用资源调度&#xff1a; <pro…...

OpenResty深度解析:从卓伊凡的”隐形主流”论看其深度原理与应用生态-卓伊凡

OpenResty深度解析:从卓伊凡的”隐形主流”论看其深度原理与应用生态-卓伊凡 一、OpenResty技术概述:悄然成为基础设施的”隐形冠军” 1.1 OpenResty的”附带安装”现象 正如技术观察者卓伊凡在其《现代Web基础设施的隐形架构》一文中首次提出的观点:”OpenResty正在以一…...

CSS 预处理器与模块化:Sass/LESS 实战技巧

CSS 预处理器与模块化&#xff1a;Sass/LESS 实战技巧 引言 在现代前端开发中&#xff0c;CSS 预处理器已成为构建可维护、可扩展前端项目的核心工具。随着项目规模扩大&#xff0c;原生 CSS 的局限性日益明显&#xff1a;缺乏变量、嵌套结构和模块化机制导致代码冗余、难以维…...

杰里芯片 7083G 之通话数据dump

前期准备工作&#xff1a; 硬件&#xff1a;杰里test_audio 开发板 读卡器 SD卡 软件&#xff1a;dump 脚本 通过网盘分享的文件&#xff1a;PCM写卡工具使用说明和数据导出脚本.rar 链接: https://pan.baidu.com/s/18fSxMPe-gmPtHlJekUK4yw 提取码: c54i 制作调试固件&…...

Redis ⑦-set | Zset

set类型基本介绍 set 为集合&#xff0c;该集合为无序集合&#xff0c;可以存储多个不同的数据类型&#xff0c;包括字符串、整数、浮点数等。 集合中的元素是唯一的&#xff0c;不可重复。 set类型常用命令 SADD SADD key member [member...]集合中的值称为 member将一个…...

在线图书管理系统的结构化需求分析过程讲解

一、引言 结构化分析是一种面向数据流进行需求分析的方法&#xff0c;其总体步骤包括&#xff1a; 1. 需求获取&#xff1b; 2. 分析建模&#xff1b; 3. 需求文档化&#xff1b; 4. 需求验证与评审。 本文将以在线图书管理系统为例&#xff0c;详细展示按照这些步骤进行…...

【Linux】基于环形队列的生产消费者模型

个人主页~ 基于环形队列的生产消费者模型 一、POSIX信号量1、概述2、调用接口&#xff08;一&#xff09;初始化信号量&#xff08;二&#xff09;销毁信号量&#xff08;三&#xff09;等待信号量&#xff08;四&#xff09;发布信号量 3、在环形队列中的作用 二、基于环形队列…...

如何实现Kafka的Exactly-Once语义?

Kafka 的 Exactly-Once&#xff08;精确一次&#xff09;语义是分布式消息系统中最高等级的数据一致性保证&#xff0c;包含三个层面的含义&#xff1a; 消息不会丢失消息不会重复消费消息处理结果具有确定性 模式局限性&#xff1a; 这里模式有个问题&#xff0c;会导致性能…...

x-cmd install | Orbiton:极简至上的终端文本编辑器与轻量级 IDE

目录 核心特点安装适用场景优势 厌倦了臃肿复杂的 IDE&#xff1f;渴望一个轻巧、快速、专注的编码环境&#xff1f;Orbiton&#xff0c;一款极简主义的终端文本编辑器与轻量级 IDE&#xff0c;将带给你前所未有的编码体验。 核心特点 极简主义&#xff0c;专注编码&#xff1…...

WSL释放空间

在 WSL (Windows Subsystem for Linux) 中&#xff0c;Linux 发行版可能会占用越来越多的磁盘空间&#xff0c;即使删除文件后&#xff0c;空间也可能不会自动释放。这是因为 WSL 使用虚拟硬盘&#xff08;VHDX 文件&#xff09;来存储 Linux 文件系统&#xff0c;而 Windows 不…...

51c大模型~合集122

我自己的原文哦~ https://blog.51cto.com/whaosoft/13877107 #PHYBench 北大物院200人合作&#xff0c;金牌得主超50人&#xff01;PHYBench&#xff1a;大模型究竟能不能真的懂物理&#xff1f; 本项目由北京大学物理学院朱华星老师、曹庆宏副院长统筹指导。基准设计、…...

Flink HA 总结

前言 总结 Flink HA 版本 Flink 1.15.3、1.15.4 官方文档 https://nightlies.apache.org/flink/flink-docs-release-1.19/zh/docs/deployment/ha/overview/ 由官方文档可知&#xff1a; HA 是对于 JobManager 的故障恢复&#xff0c;默认情况下&#xff0c;每个 Flink 集…...

从代码学习机器学习 - UMAP降维算法 scikit-learn版

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、UMAP降维算法介绍二、代码实践三、代码中可调整的降维参数总结前言 在机器学习和数据科学领域,我们经常会遇到高维数据。高维数据虽然包含了丰富的信息,但也带来了“维度灾难”的问题,…...

除了Object.freeze(),JavaScript中还有哪些优化性能的对象限制方法?

除了Object.freeze()&#xff0c;JavaScript中还有哪些优化性能的对象限制方法&#xff1f; 前言 在前端开发中&#xff0c;性能优化是一个永恒的话题。当我们处理大型对象或频繁操作对象时&#xff0c;JavaScript 提供的对象限制方法能有效提升代码执行效率。众所周知的 Obje…...

实战指南:搭建AIRIOT全场景智慧养老管理平台系统全流程解析

依托AIRIOT智慧系统搭建平台构建的AIRIOT智慧养老管理系统&#xff0c;通过管理驾驶舱、健康管理、生活服务与安全监控、综合管理五大核心模块&#xff0c;构建覆盖“数据感知→智能分析→服务联动→安全保障”的全链路养老管理体系&#xff0c;助力养老机构实现精细化、智能化…...

【硬件系统架构】哈佛架构

一、引言 在计算机科学的浩瀚宇宙中&#xff0c;计算机体系结构犹如星辰般繁多且各有独特光芒。哈佛架构便是其中一颗耀眼的明星&#xff0c;它在众多计算机体系结构中占据着独特而重要的地位。从计算机技术的萌芽期一路走来&#xff0c;哈佛架构不断发展演变&#xff0c;在不同…...

晶振PCB设计核心要点与规范

一、布局与走线设计 位置优先原则&#xff1a; 晶振紧邻主控芯片&#xff08;如MCU、FPGA&#xff09;时钟输入引脚&#xff0c;最大走线长度≤10mm。 远离高速信号线&#xff08;如DDR、USB差分对&#xff09;&#xff0c;间距≥3倍线宽&#xff0c;避免串扰。 对称走线&am…...

Dyna螺栓预紧力

01 前处理 1.1 几何模型构建 用ls-prepost进行建模&#xff0c;模型构建如图 1所示。 图 1 模型 1.2 网格模型构建 在ls-prepost中进行网格划分&#xff0c;最终效果图如图 2所示。 图 2 网格模型 1.3 有限元模型构建 1.3.1 材料定义 设置两种材料&#xff0c;均使用线弹…...

排序算法详解笔记

评价维度 运行效率就地性稳定性 自适应性&#xff1a;自适应排序能够利用输入数据已有的顺序信息来减少计算量&#xff0c;达到更优的时间效率。自适应排序算法的最佳时间复杂度通常优于平均时间复杂度。 是否基于比较&#xff1a;基于比较的排序依赖比较运算符&#xff08;…...

喷泉码技术在现代物联网中的应用 设计

喷泉码技术在现代物联网中的应用 摘 要 喷泉码作为一种无速率编码技术,凭借其动态生成编码包的特性,在物联网通信中展现出独特的优势。其核心思想在于接收端只需接收到足够数量的任意编码包即可恢复原始数据,这种特性使其特别适用于动态信道和多用户场景。喷泉码的实现主要…...

LVDS系列10:Xilinx 7系可编程输入延迟(三)

这节继续讲解IDELAYE2和IDELAYCTRL的VARIABLE模式、VAR_LOAD模式和VAR_LOAD_PIPE模式的仿真测试&#xff1b;  VARIABLE模式使用&#xff1a; VARIABLE模式需要使用INC和CE端口控制抽头值的递增递减变化&#xff1b; 测试代码如下&#xff1a; module top_7series_idelay( i…...

QT:自定义ComboBox

实现效果: 实现combobox的下拉框区域与item区域分开做UI交互显示。 支持4种实现效果,如下 效果一: 效果二: 效果三: 效果四: 实现逻辑: ui由一个toolbutton和combobox上下组合成,重点在于combobox。 我设置了4种枚举,ButtonWithComboBox对应效果一;OnlyButt…...

Python爬虫学习路径与实战指南 02

一、进阶技巧与工具 1、处理复杂反爬机制 验证码破解&#xff08;谨慎使用&#xff09;&#xff1a; 简单图像验证码&#xff1a;使用 pytesseract&#xff08;OCR识别&#xff09; PIL 处理图像。 复杂验证码&#xff1a;考虑付费API&#xff08;如打码平台&#xff09;。 …...

Crawl4AI,智能体网络自动采集利器

Crawl是一个强大的工具&#xff0c;它赋予AI智能体更高的效率和准确性执行网络爬取和数据提取任务。其开源特性、AI驱动的能力和多功能性&#xff0c;使其成为构建智能且数据驱动智能体的宝贵资产&#xff0c;告别繁琐: 爬虫新宠 crawl4ai,数行代码搞定数据采集&#xff0c;AI …...

C语言实现卡ID启用排序

任务&#xff1a; typedef struct {uint8_t bindflag; uint8_t userCardNumber; //当前用户卡的数据uint32_t userCardId[7];//当前6个用户的卡ID }USER_NFC;结构体中bindflag从高到低的的高七位bit表示数组userCardId中低到高卡ID的启用禁用状态&#xff0c;userC…...

html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

漫反射实现+逐像素漫反射+逐像素漫反射实现

标准光照的构成结构 自发光&#xff1a;材质本身发出的光&#xff0c;模拟环境使用的光 漫反射光&#xff1a;光照在粗糙材质后&#xff0c;光的反射方向随机&#xff0c;还有一些光发生了折射&#xff0c;造成材质 表面没有明显的光斑。 高光反射光&#xff1a;光照到材质表面…...

nginx代理websocket时ws遇到仅支持域名访问的处理

最终改造点 proxy_set_header Host 这一行 未改之前遇到的问题&#xff1a; nginx 日志显示 https://aaa.bbbb.cn:7413 被解析成了 IP 地址&#xff0c;这通常是因为 DNS 解析的结果被缓存或某些中间层&#xff08;如负载均衡器、防火墙等&#xff09;将域名替换为 IP 地址。…...

具身智能:从理论突破到场景落地的全解析

一、具身智能&#xff1a;重新定义 “智能” 的物理边界 &#xff08;一&#xff09;概念本质与核心特征 具身智能&#xff08;Embodied Intelligence&#xff09;是人工智能与机器人学深度融合的前沿领域&#xff0c;其核心在于通过物理实体与环境的动态交互实现智能行为。区…...

用Postman验证IAM Token的实际操作

当我们需要用Postman发送一个最简单的请求去验证Token的时候我们该怎么办&#xff1f; 【一、步骤】 步骤1&#xff1a;打开Postman&#xff0c;新建一个GET请求 请求地址填&#xff1a; https://iam.cn-north-4.myhuaweicloud.com/v3/auth/projects 解释一下&#xff1a;…...

CH592/CH582 触摸按键应用开发实例讲解

一. 触摸原理介绍 1. 触摸按键电容产生原理 一般应用中,可用手指与触摸板的电容模型简化代替人体与触摸板的电容模型,如图所示。 沁恒微电子的电容触摸按键检测方案主要有以下两种&#xff1a; &#xff08;1&#xff09; 电流源充电方案。 低功耗蓝牙系列、通用系列 MCU 使…...

为什么选择有版权的答题pk小程序

选择有版权的答题PK小程序主要有以下原因&#xff1a; 一、避免法律风险 随着国家对知识产权保护力度的加大&#xff0c;使用无版权的答题PK小程序可能会引发侵权纠纷。一旦被原作者或版权方发现&#xff0c;使用者可能会面临法律诉讼&#xff0c;需要承担相应的法律责任&…...

Java生成微信小程序码及小程序短链接

使用wx-java-miniapp-spring-boot-starter 生成微信小程序码及小程序短链接 在pom.xml文件中引入依赖 <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-miniapp-spring-boot-starter</artifactId><version>4.7…...

从普查到防控:ArcGIS洪水灾害全流程分析技术实战——十大专题覆盖风险区划/淹没制图/水文分析/洪水分析/淹没分析/项目交流,攻克防洪决策数据瓶颈!

&#x1f50d; 防范未然的关键一步&#xff1a;洪水灾害普查是筑牢防洪安全防线的基础。通过全面普查&#xff0c;可以精准掌握洪水灾害的分布、频率和影响范围&#xff0c;为后续的防洪规划、资源调配和应急响应提供详实的数据支持。这有助于提前识别潜在的高风险区域&#xf…...

Ubuntu安装SRS流媒体服务

通过网盘分享的文件&#xff1a;srs 链接: https://pan.baidu.com/s/1tdnxxUWh8edcSnXrQD1uLQ?pwd0000 提取码: 0000 官网地址&#xff1a;Build | SRS 将百度网盘提供的srs 和 conf 下载或上传到指定服务器 # 安装需要的依赖包 sudo apt install -y cmake tclsh unzip gcc…...

设计模式(行为型)解释器模式

定义 给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;这个解释器使用该表示来解释语言中的句子。这意味着我们能够针对特定领域的问题&#xff0c;构建一套专属的语言体系&#xff0c;并通过解释器对使用该语言描述的问题进行解析和处…...

海外独立站VUE3加载优化

主要有几个明显问题 1. 请求数量太多&#xff08;139 requests&#xff09; 网页请求了*大量 JS 文件*&#xff08;都是 index-xxxx.js&#xff09;&#xff0c;而且每个文件都比较小。 每次建立请求都有 TCP 连接开销&#xff08;特别是 HTTP/1.1&#xff09;&#xff0c;导…...

关于windows API 的键鼠可控可测

相关函数解释 GetAsyncKeyState 是 Windows API 中的一个函数&#xff0c;用于判断某个虚拟键是否被按下。GetAsyncKeyState(VK_ESCAPE) 专门用于检测 Esc 键的状态。下面为你详细介绍其用法&#xff1a; 函数原型 cpp SHORT GetAsyncKeyState( int vKey ); 参数 vKey&a…...

普发ASM392EUV检漏仪维修说明手测内容可目录

普发ASM392EUV检漏仪维修说明手测内容可目录...

Python pip下载包及依赖到指定文件夹

要使用pip下载包及其所有依赖到指定文件夹&#xff0c;请按照以下步骤操作&#xff1a; 步骤说明 使用pip download命令&#xff1a;该命令用于下载包及其依赖而不安装。指定目标目录&#xff1a;通过-d或--dest参数设置下载路径。确保包含依赖&#xff1a;默认情况下会下载依…...

DIFY 又跟新了,来到 1.3.0 版本,看正文

欢迎来到 1.3.0 版本&#xff01;添加了各种巧妙的功能、修复了错误&#xff0c;并带来了一些新功能&#xff1a; 一、核心亮点&#xff1a; 结构化输出 1、LLM 节点新增JSON Schema编辑器&#xff0c;确保大语言模型能够返回符合预设格式的JSON数据。这一功能有助于提升数据…...

凸包问题 Graham 扫描算法 MATLAB

算法要解决的问题 Graham 扫描算法要解决的问题是在给定一组二维平面上的点集时&#xff0c;找出能够完全包含这些点的最小凸多边形&#xff0c;这个最小凸多边形就是这些点的凸包。在很多实际场景中&#xff0c;我们可能只关注一个点集的最外层边界&#xff0c;而凸包算法就可…...

es+kibana---集群部署

其实一般es要跑3个节点的&#xff0c;这样才能做高可用&#xff0c;处理并发大&#xff0c;但是我这里只是一个pod mkdir -p /stroe/data/es es搭建&#xff1a; #【拉取镜像】 #docker pull elasticsearch:6.8.7 #docker pull busybox:1.28 【导入镜像】 docker load -i es.…...

定时器的源码介绍与简单实现——多线程编程简单案例[多线程编程篇(5)]

目录 前言 什么是定时器 JAVA标准库中的定时器 而关于sched方法,请看源码: 为什么我们能知道"notify() 唤醒后台线程 TimerThread"? TimerThread 关键逻辑 第一步&#xff1a;加锁 queue&#xff0c;看有没有任务 第二步&#xff1a;取出最近要执行的任务 …...

SQL常用数据清洗语句

数据清洗&#xff1a;发现并纠正数据文件里的数据错误和不一致性&#xff0c;让数据达到分析要求的过程。 运用 SQL 进行数据清洗时&#xff0c;可借助多种语句和函数来处理数据中的缺失值、重复值、异常值以及格式错误等问题。 1. 处理缺失值 数据中某些变量的值为空的情况&…...