前端基础学习-css如何保持div等高宽比

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。

下面以高宽 2:1 为例,通过2种方式来实现这种效果。

方式一:利用定位实现

.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<div class="wrapper">
    <div class="inner">
        这是内容
    </div>
</div>

说明:其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

方式二:利用伪元素

<style>
.wrapper {
  background: #ccc;
  width: 10%;
}
.wrapper::before {
  content: ‘‘;
  padding-top: 200%;
  float: left;
}
.wrapper::after {
  content: ‘‘;
  display: block;
  clear: both;
}
</style>
<div class="wrapper">
    这是内容
</div>

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度,创建一个响应正方形。 此方法还允许内容正常放置在元素内部。

总结

二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。

个人推荐使用方法二,这样可以减少div的嵌套。不过方法一的兼容更好

原文地址:https://blog.51cto.com/14284898/2381519

时间: 2024-10-29 21:21:19

前端基础学习-css如何保持div等高宽比的相关文章

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

前端基础学习css

一.伪类 anchor用于控制链接效果 a:link (没有访问过的链接),定义链接的常规状态 a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用) a:visited(访问过的链接) ,能清楚判断访问过的链接 a:active(在鼠标按下时的状态) 例子: Title.{             : : : }         .{             : : : }         .:.{             : }         :{             ::

前端基础学习-css实现波浪线及立方体

这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html <div class="card-list"> <div class="wave-container"> <div class="wave"></div> <!-- 实现波浪线的div --> <div cla

前端基础学习-CSS表头固定

纯CSS实现表头固定之所以难,主要在两点.一是占有最大市场份额的IE6不支持position:fixed.另一个,是人们想破头都想在一起表格中实现这种效果.不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks--我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了.碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了. 我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗.因此前些狂热鼓吹D

前端基础学习-CSS实现柱形图

CSS在处理排版之强大,没有做不到,只有想不到.下面我们将一同实现一个柱状图. 先打好一个具体的框架.我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充. <ul class="chart"> <li><em>使命召唤</em><span>: </span><strong>35%</strong></li> <li><em&

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

前端基础之CSS快速入门

前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式来美化一下前面的组件,让我们的页面更美观. 在开始css这部分之前,我们需要先在此着重提一下div这个标签,div标签在网页的标准化布局上起到了决定性的因素,我们通过使用div+css,可以完美的让我们的每个组件去到它自己应该去的地方. <div></div> 我们在学习css样式前,

javaweb基础学习—— css

1 导入方式:(优先级:离的越近,优先级越高.导入样式优先级最低) 内部样式,行内样式,外部样式,导入样式. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,p,h1{ /*宽度*/ width:100px; /*高度*/ height:10