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

前端学习DAY30（水平）

news 2025/6/18 16:52:29

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从

        父元素中溢出，使用overflow属性设置父元素如何处理溢出的子元素

        可选值：visible  默认值，子元素会从父元素中溢出，在父元素外部的位置显示

        hidden 溢出的内容将会被裁剪不会显示

        scroll 生成两个滚动条，通过滚动条来查看完整的内容

        auto 根据需要生成滚动条

       

        额外俩个属性（了解）

        overf-x

        overf-y

父元素规定高度范围

        .outer{background-color: chartreuse;height: 300px;}

子元素小于父元素规定高度在父元素范围内

        .inner{width:100px;height: 100px;background-color: blue;margin-bottom: 100px;}

 

 

若父元素没有规定高度，子元素撑开父元素高度（300px)

.outer{background-color: chartreuse;/*  height: 500px;  */}.inner{width:100px;height: 100px;background-color: blue;margin-bottom: 300px;}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.outer{background-color: chartreuse;/*  height: 500px;  */}.inner{width:100px;height: 100px;background-color: blue;margin-bottom: 300px;}</style>
</head>
<body><div class="outer"><div class="inner"></div><div class="inner"></div></div>
</body>
</html>

相关文章：

前端学习DAY30（水平）

子元素是在父元素的内容区中排列的&#xff0c;如果子元素的大小超过了父元素&#xff0c;则子元素会从 父元素中溢出&#xff0c;使用overflow属性设置父元素如何处理溢出的子元素 可选值&#xff1a;visible 默认值&#xff0c;子元素会从父元素中溢出&#xff0c;在父元素外…...

编程日记 2025/1/6 23:07:28

Spring boot 项目 Spring 注入 代理 并支持 代理对象使用 @Autowired 去调用其他服务

文章目录 类定义与依赖注入方法解析createCglibProxy注意事项setApplicationContext 方法createCglibProxy 方法 类定义与依赖注入 Service: 标识这是一个 Spring 管理的服务类。ApplicationContextAware: 实现该接口允许你在类中获取 ApplicationContext 对象&#xff0c;从而…...

编程日记 2025/1/6 23:06:27

Colyseus 与 HTTP API 的集成

Colyseus 与 HTTP API 的集成 在使用 Colyseus 开发实时多人应用时&#xff0c;通常需要与传统的 HTTP API 集成&#xff0c;例如用户身份验证、存储游戏数据、获取排行榜等。以下是 Colyseus 与 HTTP API 集成的详细介绍&#xff1a; 1. Colyseus 的基本架构 Colyseus 是一个…...

编程日记 2025/1/6 23:04:23

基于服务器部署的综合视频安防系统的智慧快消开源了。

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

编程日记 2025/1/6 23:03:22

SpringBoot原理分析-1

SpringBoot原理分析 作为一个javaer&#xff0c;和boot打交道是很常见的吧。熟悉boot的人都会知道&#xff0c;启动一个springboot应用&#xff0c;就是用鼠标点一下启动main方法&#xff0c;然后等着就行了。我们来看看这个main里面。 SpringBootApplication public class E…...

编程日记 2025/1/6 23:01:19

HCIA-Access V2.5_7_5_XG(S)- GPON网络演进为XG(S)-PON网络

目前由于10 GPON ONU数量并没有得到大规模爆发，所以直接新建ODN网络成本相对较高，所以可以采用复用ODN的方案。 XG(S)-PON可以与GPON共享ODN 前面也介绍过GPON和10G GPON使用的波长，我们来回顾一下，在GPON网络中上行采用1310纳米波长，下行采用1490纳米的波长，而10G GPON…...

编程日记 2025/1/6 22:56:13

GPU算力平台的应用之任意门:任意穿搭匹配模型的应用教程

大家好&#xff0c;今天给大家介绍一下&#xff1a;GPU算力平台的应用之任意门:任意穿搭匹配模型的应用教程。 文章目录 一、GPU算力平台概述人工智能智能发展为什么需要GPU算力平台 二、注册与登录账号注册流程 三、平台的应用之Anydoor应用启动器选择Anydoor的应用场景Anydoo…...

编程日记 2025/1/6 22:53:09

如何利用人工智能算法优化知识分类和标签？

如何利用人工智能算法优化知识分类和标签&#xff1f; 聚类算法 原理与应用&#xff1a; 聚类算法是一种无监督学习算法&#xff0c;它可以根据数据的相似性将知识内容自动划分成不同的类别。例如&#xff0c;在文档知识库中&#xff0c;通过对文档内容的词向量表示应用 K -…...

编程日记 2025/1/6 22:52:07

Windows 11 系统中npm-cache优化

在 Windows 11 系统中&#xff0c;C:\Users\K\AppData\Local\npm-cache 文件夹是 npm&#xff08;Node Package Manager&#xff09; 用于缓存已下载的包的目录。缓存的存在可以加快包的安装速度&#xff0c;因为当再次安装相同的包时&#xff0c;npm 可以直接从缓存中获取&…...

编程日记 2025/1/6 22:51:06

Flink使用

Window下启动支持 下载或复制老版本的放在bin目录下即可&#xff1b; flink.bat echo off setlocalSET bin%~dp0 SET FLINK_HOME%bin%.. SET FLINK_LIB_DIR%FLINK_HOME%\lib SET FLINK_PLUGINS_DIR%FLINK_HOME%\pluginsSET JVM_ARGS-Xmx512mSET FLINK_JM_CLASSPATH%FLINK_LI…...

编程日记 2025/1/6 22:48:04

简易屏幕共享工具-基于WebSocket

前面写了两个简单的屏幕共享工具&#xff0c;不过那只是为了验证通过截屏的方式是否可行&#xff0c;因为通常手动截屏的频率很低&#xff0c;而对于视频来说它的帧率要求就很高了&#xff0c;至少要一秒30帧率左右。所以&#xff0c;经过实际的截屏工具验证&#xff0c;我了解…...

编程日记 2025/1/6 22:39:53

Redis——主从复制模式

文章目录 1. 引入2. 主从复制模式2.1 概念2.2 配置2.3 原理2.3.1 建立连接阶段2.3.2 命令传播阶段2.3.3 心跳检测机制2.3.4 部分重同步机制(1) 主节点通过 复制积压缓冲区 记录写命令(2) 主节点通过 复制偏移量 判断从节点是否满足执行部分重同步的条件(3) 执行部分重同步操作 …...

编程日记 2025/1/6 22:30:39

简历_熟悉缓存高并发场景处理方法，如缓存穿透、缓存击穿、缓存雪崩

系列博客目录 文章目录 系列博客目录1.缓存穿透总结 2.缓存雪崩3.缓存击穿代码总结 1.缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。 常见的解决方案有两种&#xff1a; 缓存空对…...

编程日记 2025/1/6 22:26:32

阿里云电商平台用户行为分析与人群画像系统设计与实现

通过在阿里云&#xff08;https://baike.baidu.com/item/%E9%98%BF%E9%87%8C%E4%BA%91/297128&#xff09;上构建包含数据源层、数据存储层、数据处理层、数据分析层和数据应用层的系统架构&#xff0c;并设计合理的数据模型、ETL流程、数据质量与性能监控机制以及安全与合规性…...

编程日记 2025/1/6 22:25:31

Go语言的 的输入/输出流（I/O Streams）核心知识

Go语言的输入/输出流&#xff08;I/O Streams&#xff09;核心知识 前言 Go语言是一种现代编程语言&#xff0c;因其高效性、简洁性及强大的并发支持而受到开发者的喜爱。在开发应用程序时&#xff0c;输入/输出&#xff08;I/O&#xff09;操作是一个不可或缺的部分。无论是…...

编程日记 2025/1/6 22:19:25

57.在 Vue 3 中使用 OpenLayers 点击选择 Feature 设置特定颜色

在 Web 开发中&#xff0c;地图应用是非常常见的需求&#xff0c;而 OpenLayers 是一个非常强大的地图库&#xff0c;它提供了丰富的地图操作功能。今天&#xff0c;我们将一起学习如何在 Vue 3 中结合 OpenLayers 使用点击事件来选择地图上的 Feature&#xff0c;并设置特定的…...

编程日记 2025/1/6 22:13:14

数据结构C语言描述8(图文结合)--哈希、哈希冲突、开放地址法、链地址法等实现

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;有C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…...

编程日记 2025/1/6 22:11:01

自动化立体库安全使用管理制度完整版

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。欢迎大家到本文底部评论区留言。 新书《智能物流系统构成与技术实践》人俱乐部 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 以下是《…...

编程日记 2025/1/6 22:08:53

云打印之拼多多打印组件交互协议

拼多多打印组件交互协议相关介绍如下&#xff1a; 1、打印组件下载地址 http://meta.pinduoduo.com/api/one/app/v1/lateststable?appIdcom.xunmeng.pddprint&platformwindows&subTypemain 2、socket连接端口 如果是http的话&#xff0c;端口是5000 socket new …...

编程日记 2025/1/6 22:02:45

TCP 演进之路：软硬件跷跷板与新征程

今天依旧是与 TCP 相关的一个短评。 先看软硬件间的胶着。晶体管诞生以来&#xff0c;硬件一直在突飞猛进发展&#xff0c;后来这个事被摩尔定律正则化&#xff0c;人们开始可以预测未来&#xff0c;但即便如此&#xff0c;软件依然跟不上来&#xff0c;不过几年&#xff0c;老…...

编程日记 2025/1/6 21:53:37

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/6/17 10:54:32

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/6/17 19:40:37

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/15 23:30:28

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/6/15 15:54:57

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/6/18 6:59:26

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/6/17 19:47:17

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/6/17 9:20:58

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/6/16 7:04:17

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/6/13 19:38:09

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2025/6/16 13:45:27