如何不给div设置宽高，让它变成一个正方形，并且随着父元素变化。

最新推荐文章于 2022-10-11 15:20:37 发布
最新推荐文章于 2022-10-11 15:20:37 发布
阅读量506 收藏
点赞数 1
文章标签： css html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61175223/article/details/123397719
版权
本文探讨了CSS中`padding-bottom`属性使用百分比值的情况，通过两个示例展示了不同尺寸的父元素如何影响子元素的高度自适应。通过设置`padding-bottom: 100%`，子元素的内底边距会根据其父元素的宽度来确定，从而实现背景色填充整个父元素的效果。这种技巧常用于响应式设计和等宽高比的布局中。
摘要由CSDN通过智能技术生成

直接给div设置: padding-bottom: 100%;

<div style="width: 100px;height: 100px;border: 1px solid black;margin: 100px auto;">
    <div style="padding-bottom: 100%;background: red;"></div>
</div>

<div style="width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;">
    <div style="padding-bottom: 100%;background: red;"></div>
</div>

向前看2568
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS如何在宽高不确定的父元素内画一个正方形
webchang的博客
04-13 1740
使用CSS在宽高不确定的父元素内画一个正方形
div不设置宽和高实现水平和垂直居中
thickhair_cxy的博客
10-05 439
<div id="wrap"> <div class="box"> <h1>666</h1> <h1>666</h1> <h1>666</h1> </div> </div> 第一种方法（absolute+translate）不兼容ie8，因为这个transform属性不兼容ie8 #wrap { width: 10
css 布局：div高度跟随宽度的变化而变化，也就是不设置高度，使div无论如何都是一个正方形。宽度与高度等比例。2种方法实现。
PrimaryColor
12-22 2083
需要实现的效果图： 需求：二维码一行显示三个，添加二维码不是一个图片。 难点： 一行显示三个二维码，所以宽度不能设为固定值，因为有些手机屏幕要小或者大一点。 二维码是正方形，所以高度必须跟宽度一致，并且随着宽度的变化而变化。 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte.
div+css div不设置高度背景颜色或外边框不能显示的解决方法
da_ge_da的专栏
10-21 1659
在使用div+css进行网页布局时，如果外部div有背景颜色或者边框，而不设置其高度，在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。 大体结构     .outer{border:#F00 1px solid; background:#FF9 repeat;} .inner1,.inner2{flo
css实现容器(宽高不等的)内部自适应的正方形
codingWeb的博客
08-14 1701
先来看需求：容器(宽高不等的)内部自适应的正方形 方案一： 设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了： 代码如下： <!DOCTYPE html> <html lang="zh">
html div百分比居中,CSS实现div不设高度完全居中
weixin_36330238的博客
06-16 252
要求body下div垂直居中div内文字垂直居中div宽度和高度均为body宽度的一半分析div居中不难，考虑 margin 或者 left/top 配合 translate 属性实现关键点在于div高度等于body一半，由于body没有高度，设置div height： 50%；得到的结果是div的高度为0即使通过对body进行绝对定位的手段使得body高度为100vh，div高度设置50%也只能...
DIV+CSS基础教程笔记
sapphire7的博客
07-10 2351
缺点：1）显示样式和数据是绑定的在一起 2）布局的时候，灵活度不高 3）一个页面可能会有大量的元素，代码会冗余 4）增加带宽 5）搜索引擎不喜欢这样的布局优点：1）理解比较简单 2）不同的浏览器看到的效果一般是相同的 3）显示数据还是很好的 基本思想：数据和样式要分离 div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 ......
Div + CSS 基础
gjgj的博客
08-18 5223
DIV和CSS样式 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 DIV是html的一个标签 css是一个样式表 1、先写好样式 ...
HTML DIV CSS基础
Gzzsk1的博客
10-11 371
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。DIV是html的一个标签 css是一个样式表提示：以下是本篇文章正文内容，下面案例可供参考。
前端面试-CSS
wanglu458512的博客
09-19 2972
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
CSS教程：div设置float后高度不自动增加
01-19
相关文章：https://www.jb51.net/css/divcss-4952.html 　　　　https://www.jb51.net/css/divcss-5991.html 本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：1.额外标签法这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就
div不设置高度背景颜色或外边框不能显示
一直在追逐，一直在妥协
01-18 1892
针对这种问题，是因为各个浏览器的w3c标准不同，造成的不同浏览器之间的差异问题： 1.首先贴上代码： 无标题文档 .fotio{background:#0000CC; zoom:1; /* IE */} .fotio:after {content:".";height:0; line-height:0; font-size:0; } .ovosudsaca{ float:left;
不设置DIV宽度水平居中，div不设置宽度居中
蕃薯耀的博客
07-22 311
不设置DIV宽度水平居中，div不设置宽度居中 ================================ ©Copyright 蕃薯耀 2021-07-22 https://www.cnblogs.com/fanshuyao/ 方式一：使用浮动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>水平居中&l
在不设置 Div 元素的宽度（width）的情况下，如何让 Div 元素居中？
编码行者的博客
06-25 2446
原文出处：https://www.zhihu.com/question/19652330/answer/24592006 在不设置div宽度的情况下是div水平居中？这个问题困扰了我好久，问了一些大神也没能给出答案，突然间在网上看到了这篇文章，用了一下，能达到我要实现的效果，所以也借来转发一下，如需转发原文，请注明上面的原文出处，以尊重原创。 <div class="wrap"> ...
高度不确定的时候通过设置padding-bottom属性实现根据父元素宽度自适应变化的高度
cuimingjia0524的博客
05-28 1011
通过添加padding-bottom属性，属性值为父元素宽度的百分比；就会当成当前子元素的高度； 代码如下：padding-bottom的值是10%，显示的时候的实际高度就是父元素宽度的10%；会随着父元素的变化而变化； ...
当div的宽度为百分比时，如何设置成为一个正方形？
qq_41445106的博客
03-27 2062
正常情况下，要想设置一个正方形我们只需要设置特定的宽高即可 div { width: 100px; height: 100px; } 若未知宽高，只知道div的宽度是百分比，怎么设置成为一个正方形呢？ 此时将padding-top/padding-bottom也设置为百分比，正好和width相等，就成了一个正方形。 div { width: 20%; padding-top: 20%; background: red; } ...
做一个宽高为父元素宽度一半的正方形
qq_56392992的博客
09-04 1548
做一个宽高为父元素宽度一半的正方形 .outer { width: 200px; height: 200px; margin: 100px auto; border: 1px solid black; } .inner { width: 50%; padding-bottom: 50%; backgroun
给定宽度，不用height画出正方形
前端产品工程师
03-29 603
body{ width:100%; font-size:0; text-align:center; } div{ display:inline-block; width:20%; position:relative; &:before{ content:"";...
html div 正方形,纯 CSS 实现自适应正方形
weixin_35661054的博客
06-01 666
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？方案一：CSS3 vw 单位CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width...
如何让一个div根据内容自适应大小 而不是继承父盒子的宽高
最新发布
03-24
可以使用CSS的属性：display: inline-block;...来实现div根据内容自适应大小，而不是继承父盒子的宽高。具体代码如下： <div style="display: inline-block; width: auto;">这是一个自适应大小的div</div>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值