CSS——自适应之竖向距离属性

前提：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

竖向距离属性

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding:0;
        }
        #parent{
            width: 400px;
            margin: 0 auto;//盒子左右会自动计算，这也是一直居中方式
            background-color: salmon;

        }

        #child {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-left: auto;
            margin-right: auto;
            padding-top: 10%;
            padding-bottom: 10%;
            margin-bottom: 5%;
        }
    </style>
</head>
<body>
<div id="parent" >
    <div id="child" ></div>
</div>
</body>
</html>

效果图
在这里插入图片描述
现在把 padding-top设置为100%，并观察 padding-top的值

本文链接：https://blog.csdn.net/qq_42683219/article/details/104332961

智能推荐

数据结构与算法C++描述(14)---二叉搜索树

1、二叉搜索树的概念二叉搜索树是一棵可能为空的二叉树，一棵非空的二叉搜索树有满足如下特征：二叉树中所有的键值都是唯一的；根节点所有左子树的键值（如果有的话）小于根节点的键值；根节点所有右子树的键值（如果有的话）大于根节点的键值；根节点的左右子树也都是二叉搜索树。三个二叉搜索树如下： 2、二叉搜索树的C++描述对于二叉搜索树，主要操作有插入一个元素（Insert）删除键值为k的元素（D...

什么是数据库？简单的说，数据库就是一个存放数据的仓库，这个仓库是按照一定的数据结构（数据结构是指数据的组织形式或数据之间的联系）来组织，存储的，我们可以通过数据库提供的多种方法来管理数据库里的数据。数据库诞生于1950年，随着信息技术的发展和人类社会的不断进步，特别是2000年后，数据库不在仅仅是存储和管理数据了，而转变成用户所需要的各种数据管理的方式，数据库有很多种类和功能，从最简单的存储有...

Centos7搭建Hadoop3.1.3完全分布模式

详细搭建可以参考我的Hadoop2.8.0安装准备本文下载的是3.1.3版本的Hadoop 关闭防火墙虚拟机的准备安装3个虚拟机并实现ssh免密码的登录安装3个centos7虚拟机安装3个机器，机器分别叫master slave1 slave2 在/etc/hostname下修改主机名其他两台也是一样修改主机映射修改/etc/hosts文件修改这3台机器的/etc/hosts文...

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动本章的问题： 1 nandflash是flash吗？ 2 nandflash的常用接口 3 nandflash的特性是什么？ 4 ok210上s5pv210是怎么控制nandflash的 5 u-boot-2016.09.01中，nandflash的流程 6 nandflash在u-boot驱动中的关注点是什么？...

muduo库之thread类

Thread类图 Thread::start()调用的是startThread(…) 关于startThread(…)函数，它的形参是ThreadDate类，下面是该类的结构体 `struct ThreadData { typedef muduo::Thread::ThreadFunc ThreadFunc; ThreadFunc func_; string name_...