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

CSS基础-盒子模型(三)

9、CSS盒子模型

9.1 CSS常用长度单位

1、px:像素;

2、em:相对元素font-size的倍数;

3、rem:相对根字体的大小,html标签即是根;

4、%:相对于父元素进行计算。

注意:CSS样式后必须加单位,否则样式会失效。

<style>html {font-size: 50px;}/* px(像素单位) */#div1 {height: 200px;width: 200px;font-size: 20px;background-color: aqua;}/* em(相对于当前元素font-size的倍数),若没有font-size,则在祖先元素中寻找,祖先元素中都不存在则采用浏览器默认值 */#div2 {height: 10em;width: 10em;font-size: 20px;background-color: yellow;}/* rem(相对于根元素html的font-size)的倍数 */#div3 {height: 4rem;width: 4rem;font-size: 20px;background-color: blue;}#div4 {height: 200px;width: 200px;font-size: 20px;background-color: gray;}/* 相对其父元素的百分比 */.div5 {width: 50%;height: 20%;font-size: 150%;background-color: red;}
</style>
9.2 元素的显示模式
  • 块元素

    又称为块级元素:

    ​ 1、在页面中独占一行,不会与任何元素共用一行,从上到下依次排列;

    ​ 2、默认宽度:撑满整个父元素;

    ​ 3、默认高度:由元素撑开;

    ​ 4、可以通过CSS属性设置宽高。

持续更新中!!!

相关代码地址:https://gitee.com/justinc666/web/tree/master/CSS盒子模型

相关文章:

CSS基础-盒子模型(三)

9、CSS盒子模型 9.1 CSS常用长度单位 1、px&#xff1a;像素&#xff1b; 2、em&#xff1a;相对元素font-size的倍数&#xff1b; 3、rem&#xff1a;相对根字体的大小&#xff0c;html标签即是根&#xff1b; 4、%&#xff1a;相对于父元素进行计算。 注意&#xff1a;CSS样…...

深度学习中的损失函数详解

深度学习中的损失函数详解 文章目录 深度学习中的损失函数详解损失函数的基础概念常见的损失函数类型及应用场景回归问题的损失函数分类问题的损失函数自定义损失函数 如何选择合适的损失函数&#xff1f;损失函数在深度学习中的应用 在深度学习的世界中&#xff0c;损失函数&a…...

系统架构设计师-下午案例题(2022年下半年)

1.试题-(共25分):阅读以下关于软件架构设计与评估的叙述在答题纸上回答问题1和问题2。 【说明】某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提…...

高级图片编辑器Photopea

什么是 Photopea &#xff1f; Photopea 是一款免费的在线工具&#xff0c;用于编辑光栅和矢量图形&#xff0c;支持PSD、AI 和 Sketch文件。 功能上&#xff0c;Photopea 和 老苏之前介绍的 miniPaint 比较像 文章传送门&#xff1a;在线图片编辑器miniPaint 支持的格式 复杂…...

详解zookeeper四字命令

ZooKeeper 的四字命令&#xff08;Four-Letter Words, 4LW&#xff09;是一组简单的管理和监控命令&#xff0c;方便运维人员快速获取 ZooKeeper 集群和节点的运行状态。这些命令通常用于健康检查、性能监控、节点配置查看等操作。通过这些命令&#xff0c;可以轻松获取关于 Zo…...

docker 进入容器运行命令

要进入正在运行的Docker容器并在其中执行命令&#xff0c;你可以使用docker exec命令。以下是具体步骤和示例&#xff1a; 1. 查看正在运行的容器 首先&#xff0c;确认你的容器正在运行&#xff0c;可以使用以下命令查看所有运行中的容器&#xff1a; docker ps2. 进入容器…...

一行 Python 代码能实现什么丧心病狂的功能?圣诞树源代码

手头有 109 张头部 CT 的断层扫描图片&#xff0c;我打算用这些图片尝试头部的三维重建。基础工作之一&#xff0c;就是要把这些图片数据读出来&#xff0c;组织成一个三维的数据结构&#xff08;实际上是四维的&#xff0c;因为每个像素有 RGBA 四个通道&#xff09;。 这个…...

mit6824-01-MapReduce详解

文章目录 MapReduce简述编程模型执行流程执行流程排序保证Combiner函数Master数据结构 容错性Worker故障Master故障 性能提升定制分区函数局部性执行缓慢的worker(slow workers) 常见问题总结回顾参考链接 MapReduce简述 MapReduce是一个在多台机器上并行计算大规模数据的软件架…...

在Docker中运行微服务注册中心Eureka

1、Docker简介&#xff1a; 作为开发者&#xff0c;经常遇到一个头大的问题&#xff1a;“在我机器上能运行”。而将SpringCloud微服务运行在Docker容器中&#xff0c;避免了因环境差异带来的兼容性问题&#xff0c;能够有效的解决此类问题。 通过Docker&#xff0c;开发者可…...

白话进程>线程>协程

文章目录 概述进程线程协程区别与联系 举个栗子进程例子线程例子协程例子区别与联系的具体体现 代码示例进程例子线程例子协程&#xff08;Goroutine&#xff09;例子 概述 进程、线程和协程是计算机科学中的基本概念&#xff0c;它们在操作系统和并发编程中扮演着重要角色。以…...

论文阅读:Attention is All you Need

Abstract 贡献&#xff1a; 提出了Transformer&#xff0c;完全基于注意力机制&#xff0c;摒弃了循环和卷积网络。 结果&#xff1a; 本模型在质量上优于现有模型&#xff0c;同时具有更高的并行性&#xff0c;并且显著减少了训练时间。 1. Introduction long short-term …...

【Linux 】文件描述符fd、重定向、缓冲区(超详解)

目录 ​编辑 系统接口进行文件访问 open 接口介绍 文件描述符fd 重定向 缓冲区 1、缓冲区是什么&#xff1f; 2、为什么要有缓冲区&#xff1f; 3、怎么办&#xff1f; 我们先来复习一下&#xff0c;c语言对文件的操作&#xff1a; C默认会打开三个输入输出流&#xf…...

Unity WebGL使用nginx作反向代理处理跨域,一些跨域的错误处理(添加了反向代理的配置依旧不能跨域)

反向代理与跨域描述 什么是跨域&#xff1f; 跨域&#xff08;Cross-Origin Resource Sharing, CORS&#xff09;是指在浏览器中&#xff0c;当一个网页的脚本试图从一个域名&#xff08;协议、域名、端口&#xff09;请求另一个域名的资源时&#xff0c;浏览器会阻止这种请求…...

视频转文字免费的软件有哪些?6款工具一键把视频转成文字!又快又方便!

视频转文字免费的软件有哪些&#xff1f;在视频制作剪辑过程中&#xff0c;我们经常进行视频语音识别成字幕&#xff0c;帮助我们更好地呈现视频内容的观看和宣传&#xff0c;市场上有许多免费的视频转文字软件&#xff0c;可以快速导入视频&#xff0c;进行视频内音频的文字转…...

解决DHCP服务异常导致设备无法获取IP地址的方法

DHCP在网络环境中会自动为网络中的设备分配IP地址和其他关键网络参数&#xff0c;可以简化网络配置过程。但是&#xff0c;如果DHCP服务出现异常时&#xff0c;设备可能无法正常获取IP地址&#xff0c;会影响到网络通信。 本文讲述一些办法可以有效解决DHCP服务异常导致设备无法…...

Python机器学习模型的部署与维护:版本管理、监控与更新策略

&#x1f680; Python机器学习模型的部署与维护&#xff1a;版本管理、监控与更新策略 目录 &#x1f4bc; 模型版本管理 使用DVC进行数据和模型的版本控制&#xff0c;确保可复现性 &#x1f50d; 监控与评估 部署后的模型性能监控&#xff0c;使用Prometheus和Grafana进行实…...

免费送源码:Java+ssm+JSP+Ajax+MySQL SSM汽车租赁管理系统 计算机毕业设计原创定制

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对汽车租赁信息管理等问题&#xff0c;对其进…...

Vivado viterbi decoder license

Viterbi Decoder 打卡以上链接 添加后next后&#xff0c; 会发送lic文件到邮件&#xff0c;vivado导入lic即可...

【FastAdmin】PHP的Trait机制:代码复用的新选择

PHP的Trait机制&#xff1a;代码复用的新选择 大家好&#xff0c;我是田辛老师。最近收到很多同学的私信&#xff0c;询问关于PHP中Trait机制的相关问题。今天&#xff0c;我们就来详细探讨一下这个强大的代码复用工具&#xff0c;以及它在ThinkPHP 5&#xff08;简称Tp5&…...

小红书制作视频如何去原视频音乐,视频如何去原声保留背景音乐?

在视频编辑、音乐制作或个人娱乐中&#xff0c;有时我们希望去掉视频中的原声&#xff08;如对话、解说等&#xff09;&#xff0c;仅保留背景音乐。这种处理能让观众更加聚焦于视频的氛围或节奏&#xff0c;同时也为创作者提供了更多创意空间。选择恰当的背景音乐&#xff0c;…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...