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

前端学习DAY30（水平）

news 2026/4/17 23:18:38

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

        父元素中溢出，使用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

如何把MAX31865的精度榨干？STM32驱动PT100三线制测温的校准与优化实战

如何将MAX31865的精度发挥到极致&#xff1a;PT100三线制高精度测温实战指南 在工业自动化、实验室设备以及精密仪器控制领域&#xff0c;温度测量的准确性往往直接影响整个系统的可靠性和产品质量。MAX31865作为一款专为RTD&#xff08;电阻温度检测器&#xff09;设计的信号调…...

编程新知 2026/4/17 23:10:37

5分钟上手LogcatReader：安卓设备日志查看神器

5分钟上手LogcatReader&#xff1a;安卓设备日志查看神器 【免费下载链接】LogcatReader A simple app for viewing logcat logs on an android device. 项目地址: https://gitcode.com/gh_mirrors/lo/LogcatReader 还在为复杂的ADB命令而烦恼吗&#xff1f;LogcatReade…...

编程新知 2026/4/17 22:32:51

MicroPython中断处理实战：如何避免内存分配陷阱（附代码示例）

MicroPython中断处理实战&#xff1a;如何避免内存分配陷阱&#xff08;附代码示例&#xff09; 嵌入式开发者在使用MicroPython进行硬件编程时&#xff0c;中断处理是不可或缺的核心技术。然而&#xff0c;许多开发者都曾遇到过这样的困境&#xff1a;精心设计的中断服务程序(…...

编程新知 2026/4/17 21:44:06

从一道ACM题看博弈论：当Alice和Bob开始‘吃瓜’比赛时，到底谁更占便宜？

从一道ACM题看博弈论&#xff1a;当Alice和Bob开始‘吃瓜’比赛时&#xff0c;到底谁更占便宜&#xff1f; 想象一下这样的场景&#xff1a;Alice和Bob面前摆着一堆西瓜&#xff0c;两人轮流拿取&#xff0c;每次可以拿任意数量的瓜&#xff0c;但必须花时间吃完才能继续拿。Al…...

编程新知 2026/4/17 21:21:40

通过Citrix API实现许可证管理自动化与系统集成

经过Citrix API实现许可证管理自动化跟系统集成掏心窝子说&#xff0c;我就是个“许可证焦虑”的过来人。以前项目上线前晚上&#xff0c;最怕的就是看到“License不足”的警告。那时候&#xff0c;不可你要这么说&#xff0c;得跟产品经理、业务部门扯皮还得临时协调资源&…...

编程新知 2026/4/17 21:05:19

ElasticSearch 基础入门与 .NET 集成实践总结

ElasticSearch 简介 Elasticsearch 是位于 Elastic Stack 核心的分布式搜索和分析引擎。Logstash 和 Beats 有助于收集、聚合和丰富您的数据并将其存储在 Elasticsearch 中。Kibana 使您能够以交互方式探索、可视化和分享对数据的见解&#xff0c;并管理和监控堆栈。 Elasticse…...

编程新知 2026/4/17 20:47:06

BataBinding

DataBindingViiewModel、LiveData、ViewDataBinding三者结合&#xff0c;DataBinding能够让UI自动响应数据的变化&#xff0c;而不需要手动更新UI。方式如下&#xff1a;在ViiewModel中分别使用LiveData存储各项数据&#xff0c;将ViewMode定义设置为ViewDataBinding中的变量&a…...

编程新知 2026/4/17 19:14:11

Comsol 5.6模型下的18650圆柱锂电池电化学反应与热行为研究：三种放电倍率参数化扫描...

18650圆柱锂电池comsol5.6模型 参数已配置&#xff0c;电化学生热研究&#xff0c;三种放电倍率&#xff0c;参数化扫描&#xff0c;各种结果图都有直接上手折腾18650锂电池的COMSOL仿真&#xff0c;特别是电化学生热这块&#xff0c;老司机都知道放电倍率不同温度场能差出个马…...

编程新知 2026/4/17 18:47:19

ESP32-S3+LVGL内存优化实战：240x320屏上如何避免卡顿与闪屏

ESP32-S3LVGL内存优化实战&#xff1a;240x320屏上如何避免卡顿与闪屏 当你在ESP32-S3上运行LVGL驱动240x320分辨率的屏幕时&#xff0c;是否遇到过界面卡顿、内存不足或屏幕闪烁的问题&#xff1f;这可能是由于内存分配不当或渲染参数配置不合理导致的。本文将深入探讨如何在…...

编程新知 2026/4/17 17:51:36

终极Windows 11精简优化指南：用Win11Debloat一键清理系统臃肿

终极Windows 11精简优化指南&#xff1a;用Win11Debloat一键清理系统臃肿 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter…...

编程新知 2026/4/17 17:27:11