当前位置: 首页 > news >正文

css 特别样式记录

一、

 这段代码神奇的地方在于, 本来容器的宽度只有1200px,如果不给img赋予宽度100%,那么图片 会超出盒子,如果给了img赋予了宽度100%,多个图片会根据自己图片大小的比例,去分完那1200px,如图二。

 <div className={styles.imgContainer_item}>
        <img src={item.img} className={styles.imgContainer_item_img} alt="" />
       <div className={styles.imgContainer_item_bg}></div>
 </div>

---------------------

 .imgContainer {
        width: 1200px;
        height: 400px;
        display: flex;

        .imgContainer_item {

          .imgContainer_item_img {
            width: 100%;
          }

          .imgContainer_item_bg {}
        }
      }

------------------------------------

踩坑记录: 图1图二是我需要的 ;  如果 & 多加了一个空格 ,就会变成了给它下面的所有子元素增加:hover。  

 

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/2688.html

相关文章:

  • 面试题:线程池中线程抛了异常,该如何处理?
  • 关于我对 jeecg-boot 的项目理解、使用心得和改进建议
  • 项目管理之5W2H项目定义法
  • linux 下的java gate服务断掉的原因及解决思路
  • JDK版本和Gradle版本配套关系
  • uniapp 安装 u-view 组件库
  • spring面试常遇见的问题(01)
  • alsa音频pcm设备之i2c调试
  • C调用Objective-C的类和方法
  • JSX的本质
  • 高级深入--day34
  • 罗技鼠标接收器丢失或损坏后用另一个接收器配对的方法
  • SQL数据库管理工具RazorSQL mac中文版特点与功能
  • 网络安全常见问题隐患及其应对措施
  • web前端面试-- http的各个版本的区别(HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP/3.0)
  • 类概述介绍
  • 【监督学习】基于合取子句进化算法(CCEA)和析取范式进化算法(DNFEA)解决分类问题(Matlab代码实现)
  • ArcGIS在VUE框架中的构建思想
  • oracle的update语句where条件后的索引字段为空时不执行
  • ppt怎么压缩到10m以内?分享ppt缩小方法
  • 大数据学习(11)-hive on mapreduce详解
  • maven-plugin-shade 详解1
  • 浅谈AI大模型技术:概念、发展和应用
  • 【MySQL系列】- SELECT语句执行顺序
  • 记一次edu站点并拿下的过程cnvd
  • angular ag-grid api
  • 使用Proxyman抓取Android的https请求
  • Git使用入门
  • 正点原子嵌入式linux驱动开发——pinctrl和gpio子系统
  • ubuntu 上vscode使用cmake编译运行c++程序