css小技巧及问题

arks_惊蛰

已于 2024-03-24 16:20:57 修改

阅读量22

点赞数

文章标签： css 前端

于 2023-10-29 11:33:56 首次发布

本文链接：https://blog.csdn.net/weixin_44133966/article/details/134101246

版权

宽度适应内容

容器是个块级元素，但是内容只有一部分，让背景色和文字一样宽度，也就是宽度适应内容可以使用新的css特性width:fit-content

div {
	width: fit-content;
}

文字适应背景色

当父元素的背景色和文字的颜色有冲突时（颜色相同），可以使用这种自适应的差值算法来解决颜色问题
文字适应背景色，mix-blend-mode: difference;

.title {
	mix-blend-mode: difference;
}

保持元素比例

保持元素的宽高比，比如视频容器或者盒子的容器永远保持一个比例，当你设置了宽度会帮你自动计算高度，设置高度同理
aspect-ratio: 16 / 9;

video {
	width: 400px;
	aspect-ratio: 2 / 1;
}

元素阴影区别于盒子阴影

给不规则元素设置描边的阴影，这里不能使用box-shadow，需要使用filter:drop-shadow(x,y,blur,color)

.imgs {
	filter: drop-shadow(0,0,10px,#fff);
}

定位问题

最外层盒子的zindex如果小于其他盒子的zindex ，那内部的盒子再大也无法盖住

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: rgb(38, 32, 138);
        position: absolute;
        z-index: 100;
      }
      .box1 div {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 99;
        background-color: yellow;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        position: relative;
        z-index: 95;
      }
      .box2 div {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 90999;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div></div>
    </div>
    <div class="box2">
      <div></div>
    </div>
  </body>
</html>

env()和constant()设置安全区域

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

.footer {
	/* 先constant再env */
	height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
	height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
	padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
	padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
}

盒子样式100%时下面多出一块

当盒子是100%时还是出现了滚动条，是因为对其方式是基线对齐，调整为top或者其他的就可以解决这个问题
盒子内的文字会影响到外部盒子，文字，图片等默认是基线对齐

.box {
 width:100%;
 height:100%;
 vertical-align: middle;
}

arks_惊蛰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫