css 设置 div 宽高相等

2026-09-12

css设置div高度与宽度相等的一种方法

div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百分比时,padding-top和padding-bottom使用的也是宽度的百分比,而不是高度的!!!),使div变成正方形. 2.这样设置后,还有问题,div里的内容都被挤到底部了.另外考虑div里文字本身的高度,修改为: div.category{ width:33%; padding:14%

前端web设置div宽高一样

<div class="constant-width-to-height-ratio"></div> .constant-width-to-height-ratio { background: #333; width: 50%; } .constant-width-to-height-ratio::before { content: ''; padding-top: 100%; float: left; } .constant-width-to-height-r

css 设置div基于父元素宽度的宽高相等的样式

1. 前言在移动开发中,有时候需要设置一个宽高相等的div,并且为了使它能够适配更多的屏幕,于是需要让它的宽高和屏幕宽高成一定的比例.这里将提供一个css的解决方案,让一些后端开发不用再写繁琐的js. 2. 实现代码 html: <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div class="wrapper"

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+

css实现不定宽高的div水平、垂直居中

一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE8以上都能使用. IE8及IE8以下都会出现问题. <body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body&g

关于html中的设置body宽高的理解

有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效果了,没错! 接着,我们向body里面加个div,给背景设为白色,然后居中,并且不给div宽度.代码如下: 效果图上: 很显然,body的实际宽度是和子类div中的宽度一样的,那为什么body的背景是覆盖整个页面呢?这是别人的猜想: 于是乎,我们上代码: 效果图上: 果然因此我们得出一些结论:默认

input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽.border与padding不在值里面,在浏览器上显示可见. select width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding

vue 动态获取div宽高有时候为0的情况

项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化.  <template> <div class="wifiCollectCtrl"> <div id="wifiCollectID

Python设置浏览器宽高

# 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Chrom和chromdriver # 请联系QQ:878799579 from selenium import webdriver driver = webdriver.Chrome() driver.get('http://www.baidu.com') # 设置浏览器全屏 # driver.max

css中固定宽高div与不固定宽高div垂直居中的处理办法

固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px; 不固定高宽div垂直居中的方法方法一(此div元素应是 inline-block): 用一个"ghost"伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧

absolute和relative元素设置百分比宽高的差异

一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时,却是不同的结果. demo 用如下小demo测试: <aside class="container"> <div class="test"> </div> </aside> .container{ position: r

div宽高不确定，内容居中

当div的宽高不确定时候,内容居中:// 加在父级div中垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:center; display: -webkit-flex;

css background-image 自适应宽高——转载

就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../image/Click_03_temp.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;} 转载来源:https://blog.csdn.net/chenqk_123/

CSS设置DIV边框为圆角，添加背景色溢出的问题

这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: .demo{ position: absolute; top:0; height:100% ; border:1px solid #000; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } 个人觉

css/css3 未知元素宽高，垂直居中和水平居中

未知元素的宽高情况下垂直居中和水平居中第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-content: center; align-items: center; } 第二种 css3的transform .ele{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 第三种 displa

div宽高设置为百分比

如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:100%; height:100%; background-color:#B3AEAE; }

响应式网页中，如何只用CSS实现div的高和宽保持固定比例

引言: 如果div里是<img>,原生就支持. .item img { float: left; margin:5%; width: 20%; } >>>>>>>>>>>>>>>demo1请点击<<<<<<<<<<<<<< 正文: 1.使用媒体查询. @media only screen and (

css样式：宽高按一定比例进行自适应

纯 CSS 实现高度与宽度成比例的效果最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 CSS 定义如下: .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求:在保持 item 元素宽高比恒定(如高是宽的 1.618 倍)的情况下,使得 item 元素可以和父元素同比缩放. 我们知道,如果当 item 元素是图片,

【转】CSS设置DIV背景色渐变显示

[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColo

CSS设置DIV背景色渐变显示

本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE

css中盒子宽高的auto

CSS盒模型中,auto属性只适用于外margin和width,height,border和padding不适用.下面就来说说它的情况.这里所说的都是标准流盒子. 1.横向来说 (1)若设置width,magrin-left,margin-right中某个值为auto,剩下两个为指定值,则设为auto的属性会确定所需的长度,从而使元素的宽度等于父元素的width.例如,盒的横向长度必须等于400px,没有设置padding和border,margin-right和width设置为100px,左外

css 设置 div 宽高相等

热门专题