首页 > 其他分享 >【CSS】画自适应矩形

【CSS】画自适应矩形

时间:2023-09-05 21:23:01浏览次数:32  
标签:ratio 16 50% width aspect 画自 矩形 CSS

 

<html>
    <style>
        .box {
          /* 1. padding-top 根据父容器进行百分比计算数值的 */
          /* width: 50%;
          background: blue;
          padding-top: 50%; */
          /* 2. aspect-ratio: 规定了纵横比,这个纵横比可以用来计算自动尺寸以及其它布局函数服务 */
          /* 或者使用
          若为16/9 则为 width / height =  16/ 9
          */
          width: 50%;
          background-color: aqua;
          /* aspect-ratio: 1/1; */
          aspect-ratio: 16/9;
        }
      </style>
      <body>
        <div class="box"></div>
      </body>
      
</html>

 

标签:ratio,16,50%,width,aspect,画自,矩形,CSS
From: https://www.cnblogs.com/zjy4fun/p/17680827.html

相关文章

  • 【CSS】画三角形
    <html><head><title>CSS绘制三角形</title></head><body><div><h1>实心三角形</h1><divclass="filled-triangle-1"></div>......
  • 【CSS】伪类选择器和伪元素选择器
    伪类选择器用于指定所选元素的特殊状态,参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes伪元素选择器允许你对被选择元素的特定部分修改样式,不会真的修改dom结构,参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements<html><head>......
  • 矩形
    目录矩形应用应用1:Leetcode.223题目解题思路代码实现矩形应用应用1:Leetcode.223题目223.矩形面积给你二维平面上两个由直线构成且边与坐标轴平行/垂直的矩形,请你计算并返回两个矩形覆盖的总面积。每个矩形由其左下顶点和右上顶点坐标表示:第一个矩形由其左下顶......
  • 如何在Nuxt 3中为<html>和<body>标签添加Tailwind CSS类?
    在Nuxt3中为<html>和<body>标签添加TailwindCSS类,可以参考以下步骤:安装TailwindCSS:在项目根目录下运行以下命令安装TailwindCSS和其依赖:npminstalltailwindcss@latest@tailwindcss/typography@latestpostcss@latestautoprefixer@latest创建TailwindCSS配置......
  • 记录--CSS 滚动驱动动画 scroll()
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助CSS滚动驱动动画scroll()animation-timeline通过scroll()指定可滚动元素与滚动轴来为容器动画提供一个匿名的scrollprogresstimeline.通过元素在顶部和底部(或左边和右边)的滚动推进scrollprogresst......
  • 【css兼容】flex在低版本 chrome 浏览器的兼容问题
    https://blog.csdn.net/weixin_43841308/article/details/111246537 前言【感官】使用ElementUI构建如下布局【逻辑】具体代码:【现象】谷歌浏览器44.0.2403.125m版本显示main内容不全谷歌浏览器57.0.2987.133版本页面正常flex兼容性【猜想】display:flex在网站兼容性......
  • css设置滚动条样式
    首先给父盒子设置overflow:hidden;overflow-y:scroll;overflow-x:scroll;这样子盒子超出父级的高度和宽度时就会出现滚动条接着调整滚动条样式/*里面的代码可以根据自己需求去进行更改*//*设置滚动条的样式*/::-webkit-scrollbar{width:12px;}/*滚动槽*/......
  • [译]这几个CSS小技巧,你知道吗?
    前言在网页设计和前端开发中,CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观,还能提升用户体验,今天小编为大家介绍8个常见的CSS小技巧:1.修改滚动条样式下图是我们常见的滚动条,现在需要改变滚动条的宽度和颜色了,并把它画的圆一点。(常见的滚动条)......
  • CSS如何让鼠标放上时的小手样式
     cursor:pointer;参考:https://www.muzhuangnet.com/show/56515.html......
  • css学习
    字体:1、样式继承:例如font-size2、字体风格:font-style是否倾斜3、字体粗细:font-weight4、字之间的间隔:letter-spacing5、首行缩进:text-indent6、水平居中:text-align7、行高:line-heigh8、vertical-align:操作行内元素 ......