css中width和padding-top实现正方形

最新推荐文章于 2022-09-09 15:50:15 发布
最新推荐文章于 2022-09-09 15:50:15 发布
阅读量210 收藏
点赞数
原文链接：http://www.cnblogs.com/zhaobao1830/p/7078569.html
版权 
.div{
   width: 100%;
   height: 0;
   padding-top: 100%
}

这个时候，padding-top的值与width相等，所以可以让div宽高一样，值为width的值

转载于:https://www.cnblogs.com/zhaobao1830/p/7078569.html

aiguai2216
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css——正方形头图固定设置（padding-top）
肖的博客
04-13 647
<div class="image-father"> <img class="img" :src="food.image" alt=""> </div> .image-father { position: absolute; width: 100%; height: 0; paddi...
秋招学习 - CSS 实现自适应正方形
vivi_in_purple的博客
10-23 351
实现一个自适应正方形关键就是使这个div的height=width。 利用CSS3新增的 vw, vh, vmin, vmax vw - 1/100视口宽度为一个单元； vh - 1/100视口高度为一个单元; vmin - 1/100 Min{视口宽，视口高}为一个单元; vmax - 1/100 Max{视口宽，视口高}为一个单元; .square{ width: 50%; /*50%父元素宽*/ height: 50vw; /*视口宽度的50%*/ background-color:
如何实现一个最大的正方形
Lovely Ruby 的手账
07-06 603
思路 用 padding-bottom:100% 撑起来，padding-top: 100%;也同理 展示 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padd
巧用padding生成正方形DIV
weixin_34242658的博客
06-14 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum...
css容器长宽比（用padding-top来控制高度）
weixin_45695200的博客
09-08 806
div上设置一个自定义属性，值为长宽比，假设为4:3。 容器宽度width设为100%，高度height先设为0；（因为是用padding-top来控制高度的） 接着通过属性选择器，当自定义属性值为比如4:3的时候，padding-top就是 100% × 3/4 = 75% <div class="aa" data-ratio="4:3"></div>. .aa { position: relative; /*因为容器所有子元素需要绝对定位*/ height:
注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度
weixin_34128534的博客
04-10 191
定义和用法 padding-top 属性设置元素的上内边距（空间）。 说明 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。 注释：不允许使用负值。 默认值： 0 继承性： no 版本： CSS1 JavaScri...
用css实现正方形div 的两种方法
12-30
目标：实现一个正方形，这个正方形边长等于 方法一：使用单位vw， （ps我觉得这个是最简单的方法） html结构也很简单，只有一个div即可 <html> <body> </body> </html> .square{ ...
CSS实现正方形
XIAOLONGJUANFENG的博客
01-26 2150
正方形 以前有人问我怎么实现一个正方形，我就很纳闷！把块属性width和height设置成一样不就好了吗！ //这不就是个正方形 .div { width:100px; height:100px } 但这不是他想要的答案。也许是考虑到自适应的问题吧。 于是，我想到了最近在b站Steven老师那看到他用过的vw vh单位 //vw单位把屏幕宽分为100(vh同理，高) .div { width:20vw height:20vw } 俺想，酱不就好了吗！ 再稍微对样式补充一下,看一下具体效果 &l
css 圆凹角_CSS如何实现内凹角效果_Houdini, CSS, gradient, masking, Vue, Vue组件, scooped-corners, CSS自定义属性 教程_w3cpl...
weixin_39821330的博客
12-22 473
记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。上图展示的效果就是接下来所要聊的内凹角的效果。也就是说，通过下文的介绍，我们可以知道这种效果是如何做的，而...
padding-top黑科技
helianthus5的博客
01-13 288
项目背景：移动端加载图片，需要宽度充满屏幕，高度与屏幕宽度相等 解决办法： 代码如下 .img-content{ position: relative width: 100% height: 0 padding-top: 100%//保证图片高度和宽度相等的关键 } .img-content img{ position: absolute top: 0 le
css面试题
突维
07-07 145
盒模型 如何实现一个最大的正方形 一行水平居中，多行居左 水平垂直居中 如何实现左右等高布局 画三角形 link @import导入css BFC理解 回到顶部 盒模型 复制/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; margin: 20px; background: red; border: 2.
正确使用“width:100%“
weixin_43601701的博客
05-31 6318
文章目录不使用 绝对定位 时的width:100%;使用 绝对定位 时的width:100%; 不使用 绝对定位 时的width:100%; 这是一个div，里面没有任何的元素。等会要加入内容div <div style=" height: 120px; width: 200px; margin: 20px; border: 30px solid rgb(216, 186, 89); padding
css实现一个正方形
qq_33721778的博客
09-09 4164
vw是相对于视口的宽度。视口被均分为100单位的vw。宽度计算的，利用此特性就可以实现一个固定宽高比的div。宽高固定是最简单的情况了，只要设置对应的宽高就可以了。需要设置成0，内部就无法很好的显示子元素。确实可以实现正方形的效果，但是。padding设置为。
如何在移动端宽度自适应实现正方型？
weixin_30508241的博客
05-09 315
前言 在移动端如何让宽度自适应来实现一个正方形，也就是宽度设置为百分比。 方法一： 使用javascript/jquery <style> .wrap { 　　　　　width: 100%; 　　　　　background: thistle;　　　} .child { 　　　　　background: teal; 　　　　　width: ...
设置height:100%无效的原因以及两种解决方法
热门推荐
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
纯CSS实现自适应正方形
璃月之天涯的博客
07-31 1116
有时候我们需要实现这种自适应不同手机屏幕的等宽正方形，如图： 刚开始自己很困惑，宽可以计算，那么高怎么随着宽的变化而变化呢？ 后来查阅相关材料总结出两种方法： 方案一：设置垂直方向的padding撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素
利用padding-top/padding-bottom百分比，进行占位和高度自适应
weixin_30752377的博客
07-21 1044
在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。 比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px 这个小小的知识点，其实有很大的用处，应用也很广泛，就是进行提前占位，避免资源加载时候的闪烁，还可以让高...
正方形 css,CSS实现自适应的正方形
weixin_31491059的博客
08-03 737
总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。所以理论上只要能够将宽度属性应用在高度属性的方法都可以。方案一：CSS3 vw 单位.placeholder {width: 50%;height: 50vw;background:green;}image.png方案二：设置垂直方向的 padding 撑开容器在 CS...
padding-top 100%应用
elie_yang的博客
06-09 3430
这里学习到的是当margin padding 赋值为%百分比的时候，是按父元素的width为参照物，于是很多应用来先占位布局，再加载元素，例如图片的加载，防止页面抖动或闪一下的感觉，尤其网站状况不佳的情形下很容易出现！下面是一个应用padding 百分比的例子：&lt;div class="image-header" ref="imageHeader"&gt; &lt;img ...
CSS text-shadow详解：入门与实战示例
在这个例子中，文本将产生一个红色的、大小为5像素的正方形阴影，位于文本下方和右侧。 **实例2：兼容IE的滤镜语法** 为了在不支持`text-shadow`的IE浏览器中实现类似效果，可以使用滤镜： ```css .demo { filter:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值