震惊!子元素的padding/margin-top依据的是父元素的宽度!

子元素的margin-top和padding-top都是以父元素的宽度为基准
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="father"><div class="son">son</div></div></body><style lang="scss">.father {width: 900px;height: 200px;border: 1px solid red;.son {margin-top: 50%;padding-top: 50%;width: 100px;height: 100px;border: 1px solid red;}}</style>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/794241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.java openCV4.x 入门-Mat之转换、重塑与计算

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天建议把本文当作笔记来看&#xff0c;据说专栏目录里面有相应视频&#x1f92b; &#x1f9ed;文…

openEuler 22.03 SP3 安装图像桌面 UKUI

UKUI 是麒麟软件团队历经多年打造的一款 Linux 桌面&#xff0c;主要基于 GTK 和 QT 开发。与其他 UI 界面相比&#xff0c;UKUI 更加注重易用性和敏捷度&#xff0c;各元件相依性小&#xff0c;可以不依赖其他套件而独自运行&#xff0c;给用户带来亲切和高效的使用体验。 UK…

day2 | 数组 part-2 | 977 有序数组的平方、209 长度最小的子数组、59 螺旋矩阵 II

今日任务 977 有序数组的平方 (题目: . - 力扣&#xff08;LeetCode&#xff09;)209 长度最小的子数组 (题目: ​​​​​​​. - 力扣&#xff08;LeetCode&#xff09;)59 螺旋矩阵 II (题目:. - 力扣&#xff08;LeetCode&#xff09;) 有序数组的平方 (双指针) 给你一个…

如何使用 Viggle AI 生成模特动作视频

Viggle AI 是一款基于骨骼动画的 AI 工具&#xff0c;可以将图片转换为流畅且一致的角色动画。 这意味着您可以上传一张模特全身照&#xff0c;然后指定该模特要执行的动作&#xff0c;Viggle AI 会自动生成一段由该模特执行该动作的视频。 步骤 1&#xff1a;准备工作 首先&…

基于VUE实现的餐厅经营游戏项目源码

WebMOOC 餐厅游戏 项目介绍 实现了一个类游戏的餐厅经营模拟&#xff0c;涉及的前端知识有移动端 HTML 页面布局及样式实现。实现了厨师、顾客等角色的关键操作&#xff0c;完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。 …

【Redis系列】Spring Boot 集成 Redis 实现缓存功能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

c# wpf template itemtemplate+dataGrid

1.概要 2.代码 <Window x:Class"WpfApp2.Window8"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend…

SpringCloudAlibabaSeate处理分布式事务

SpringCloudAlibabaSeate处理分布式事务 1、部分面试题 微服务boot/cloud做的项目&#xff0c;你不可能只有一个数据库吧&#xff1f;那么多个数据库之间如何处理分布式事务的&#xff1f; 一个场景&#xff1a;在订单支付成功后&#xff0c;交易中心会调用订单中心的服务把订…

导入项目运行后,报错java: Cannot find JDK ‘XX‘ for module ‘XX‘

解决方案&#xff1a; 1、删除.idea和.iml文件 2、右击此module&#xff0c;点击 Open Module Settings 在 Module SDK 中选择所安装的java版本后&#xff0c;点击右下角 Apply 3、再运行试试吧&#xff0c;成功&#xff01;

蓝桥杯(4):python动态规划DF[1]

动态规划相当于正着想&#xff1f;dfs主要适用于位置的变化&#xff1f; 子问题&#xff01;状态&#xff0c;状态转移方程 1 一维DP 1.1 定义 重叠子问题&#xff01;转换成子问题 &#xff0c;与记忆化搜索很像 1.2 例子 1.2.1 上楼梯 子问题到最终的问题只能跨一步&…

用顺序表实现通讯录

前言 这次的通讯录是基于上一篇的动态顺序表的基础上实现的&#xff0c;如果对动态顺序表不熟悉&#xff0c;可以打开这个链接阅读http://t.csdnimg.cn/9zJ5g&#xff0c;这里我们会调用动态顺序表的函数。 如果想看静态顺序表实现通讯录&#xff0c;可以打开这个链接阅读http:…

Linux+HA高可用24X7的安全保证

一&#xff0e; 介绍作为服务器&#xff0c;需要提供一定的24X7的安全保证&#xff0c;这样可以防止关键节点的宕机引起系统的全面崩溃。利用OpenSource开源软件&#xff0c;完成系统的高可靠双机热备方案。基于linux的 HA软件可靠稳定&#xff0c;比使用商业版本的HA软件降低成…

CMakeLists.txt编写简单介绍:CMakeLists.txt同时编译.cpp和.cu

关于CMakeLists.txt的相关介绍,这里不赘诉,本人的出发点是借助于CMakeLists.txt掌握基本的C++构建项目流程,下面是本人根据网络资料以及个人实践掌握的资料。 CMakeList.txt构建C++项目 下图是一个使用CUDA实现hello world的项目,一般来说,一个标准的C++项目包括三个文件…

python标准数据类型--列表常用方法

在Python中&#xff0c;列表&#xff08;List&#xff09;是一种非常常用的数据类型&#xff0c;用于存储一组有序的元素。Python提供了许多内置方法来操作列表&#xff0c;使得对列表的处理变得非常灵活和便捷。在本篇博客中&#xff0c;我们将介绍一些常用的列表方法&#xf…

基本数据类型、包装类与字符串间的转换

&#xff08;1&#xff09;基本数据类型转为字符串 方式1&#xff1a;调用字符串重载的valueOf()方法 int a 10; //String str a;//错误的String str String.valueOf(a);方式2&#xff1a;更直接的方式 int a 10;String str a "";&#xff08;2&#xff09;…

COCO格式转YOLO格式训练

之前就转换过好几次&#xff0c;每次换设备训练&#xff0c;由于压缩包太大&#xff0c;u盘不够用。每次都要找教程从网上再下载一遍。因此这里记录一下&#xff0c;以免下次重新找教程。 在coco数据集中&#xff0c;coco2017train或coco2017val数据集中标注的目标(类别)位置在…

C++--对象作为返回值-----拷贝构造函数不执行的问题解决方案

1.问题现象 本来func函数返回p1&#xff0c;实际上p1会先拷贝一份传递给test函数里面的p,这个时候会执行拷贝构造函数&#xff0c;但是实际上的输出并没有&#xff1b; 而且执行拷贝构造函数的时候&#xff0c;因为生成p1的副本&#xff0c;所以我们打印的地址应该不相同&…

vue3源码解析——watch和watchEffect区别

watch和watchEffect是Vue 3.0中新增的两个响应式API&#xff0c;用于监听数据的变化。watch适用于需要获取新值和旧值&#xff0c;或者需要懒执行的场景&#xff0c;而watchEffect适用于需要监听多个数据源&#xff0c;并且需要立即执行的场景。它们之间的区别如下&#xff1a;…

CSS层叠样式表学习(文本属性)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS文本属性的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 四、CSS文本属性 4.1 文本颜色 4.2 对齐文本 4.3 装饰文本 4.4 文本缩进 4.5 行间距 4.6 文本…

苍穹外卖学习笔记(一)开发环境搭建

苍穹外卖技术框架 网关层&#xff1a; Nginx:反向代理负载均衡 nginx学习&#xff0c;看这一篇就够了&#xff1a;下载、安装。使用&#xff1a;正向代理、反向代理、负载均衡。常用命令和配置文件,很全-CSDN博客应用层&#xff1a; Spring Boot&#xff1a;简化spring程序的创…