当前位置: 首页 > 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;…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...