【震惊】padding-top的百分比值参考对象竟是父级元素的宽度
引言
书写页面样式与布局是前端工程师Coding
中必不可少的一项工作,在定义页面元素的样式时,padding
属性也是经常被使用到的。
padding
属性用于设置元素的内边距,其值可以是length
、inherit
,当然也可以是百分比
。
今天为什么会聊到padding-top
设置百分比时的参考对象这个话题呢,这还要从一道不那么正经的面试题说起~
一道不那么正经的css布局面试题
在对面,一本正经的面试官和蔼可亲的说道:我们来道简单的面试题,写写代码吧。你一脸微笑的说道:好哒。
题目须知:
页面中有一个元素A,请实现以下需求:
- 元素A在页面内水平、垂直居中;
- 元素A距离页面左右的间距为10px,元素A的宽度随页面宽度变大而变大;
- 设置元素A的高度始终为宽度的一半;
只要是对CSS了解的一些的同学,实现1和2都是非常简单的,而且方式也是多种多样的。那如何能设置让元素A的高度始终为宽度的一半呢?上代码~
页面布局:要考虑DOM的结构和CSS的样式
<!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>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 设置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 设置margin左右间距为10px */
margin: 0 10px;
background: #F00;
/* 设置宽度为100vw,实际宽度会受到弹性盒子的影响 */
width: 100vw;
/* calc方法动态计算:height的值为宽度的1/2,所以是 (100vw - 20px) / 2 */
height: calc(50vw - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
在上述的代码中我们借助calc方法实现了设置元素的高度为宽度的1/2
此时内心是否有些窃喜,又搞定了一个问题,饱含自信(傲娇)的目光看向了面试官。
然而,当你没有get到面试官的G
点时,面试官又和蔼可亲(冷若冰霜)的说道“还有别的方法吗?”
还能有啥别的办法呢?你无助的捋了捋自己那为数不多的秀发。
啦啦啦,快来使用padding-top
,哼哼哈嘿...
探究padding-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>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 设置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 设置margin左右间距为10px */
margin: 0 10px;
background: #F00;
/* 设置宽度为100%,父级容器宽度的100%,实际宽度会受到弹性盒子的影响 */
width: 100%;
height: 0;
/* calc方法动态计算:padding-top的值为父级容器宽度的1/2,所以是 (100vw - 20px) / 2 */
padding-top: calc(50% - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
此处也可以选择使用
padding-bottom
此刻你再抬头时,看到了面试官那饱含了心满意足、孺子可教的热烈眼神...
最后的秘密
当padding-top
、padding-bottom
、margin-top
、margin-bottom
属性设置为百分比时,参考对象都是父级元素的宽度
要记住呀,下回还得考~
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞
、收藏
呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
【震惊】padding-top的百分比值参考对象竟是父级元素的宽度的更多相关文章
- WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象
原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...
- 当padding,margin,top为百分比值,具体数值如何计算
padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...
- css relative设置top为百分比值
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...
- jQuery获取点击对象的父级
一.使用$('body').on('click','.index',function(event){})绑定事件时,例: <div class="project-box"&g ...
- 左右margin top问题百分比值
不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...
- 使用padding后内容超出父级元素
解决方法:
- css百分比值到底参考谁?
一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
- CSS设置百分比值的问题
当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...
随机推荐
- 防sql注入函数
- 怎么绘制C语言选择和循环语句的思维导图
C语言是一门非常基础的计算机语言,是大部分本科学生的公共专业,在C语言的学习中,选择和循环语句是至关重要的部分,利用思维导图可以有效节约时间并加深知识点记忆. 接下来就为大家介绍一下我用iMindMa ...
- 如何在Visio 中插入各种数学公式?
在Visio 2007老版本中,插入公式可以直接在插入图片中选择,但是在后来的Visio2013中却无法直接通过插入图片的方法插入,那么该如何在visio 2013中插入公式呢? 具体的操作步骤如下: ...
- 下载器Folx的创建种子功能怎么使用
当我们想要分享一些自己制作的资源时,可以使用Folx的创建种子功能,在网络上分享种子,供他人下载,这个过程也被称为做种.作为种子创建者,需要在一定时间内保持做种进程,以便维持种子的生命期限,方便他人下 ...
- HTTPS原理剖析
一.HTTP隐患 客户端向服务器发送HTTP请求,服务器收到请求后返回响应给客户端: 抓包如图: 我们可以发现:HTTP报文明文传输(而TCP/IP是可能被窃听的网络):且客户端跟服务器之间没有任何身 ...
- CountDownLatch、CyclicBarrier、Semaphore、Exchanger 的详细解析
本文主要介绍和对比我们常用的几种并发工具类,主要涉及 CountDownLatch . CyclicBarrier . Semaphore . Exchanger 相关的内容,如果对多线程相关内容不熟 ...
- VC与VB
VB调用VC dll的返回方式 第一种类型:数值传递注意:在VB中,默认变量传递方式为ByRef为地址,而传递值就是用ByVal,还要注意在C++中,int类型的变量是32位的,在VB中要用long型 ...
- java12(eclipse断点调试)
选择结构switch 1.格式: switch(整型数据){ case 值A:System.out.println("");break; case 值B:System.out.pr ...
- 秒极啊!手把手带你进行shiro授权拦截器的重写,学到了学到了
shiro整合前后端分离的springboots,Vue项目真的是有很多大坑啊. 今天我的主题是:如何设置shiro过滤器. 遇到问题:我的项目是前后端分离的,shiro里面有一个shiroFilte ...
- JZOJ2020年8月11日提高组T1 密码
JZOJ2020年8月11日提高组T1 密码 题目 Description 在浩浩茫茫的苍穹深处,住着上帝和他的神仆们,他们闲谈着下界的凡人俗事,对人世间表现的聪明智慧,大加赞赏.今天他们正在观赏大地 ...