首页 css 正文

我要投稿

css中字体居中-10种让你受益匪浅的CSS使用方法

bendan520 css

2023-09-05 0 7,661 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

◆◆

CSS 方法的大杂烩

◆◆

Safari 中 z-index 的层次结构问题

在Safari浏览器下（这个Safari浏览器包括iOS Safari、iPhone上的Momo浏览器、MacOSX系统上的Safari浏览器），当我们使用3Dtransform变换时，如果祖先元素没有overflow:hidden/scroll/auto等限制会直接忽略自身和其他元素的z-index堆叠顺序设置，直接使用现实世界的3D视角进行渲染。例如下图场景中，图中红框上方的模块使用3Dtransform变换来执行旋转动画，而在Safari浏览器下，二维码的笔划层的z-index被忽略，真实的——动画使用世界 3D 视角。使成为。出现重叠错误：

解决方案：

Parentcss中字体居中，任意父级，非body级别，设置overflow:hidden可以恢复和其他浏览器一样的渲染。

以毒攻毒。有时，页面比较复杂，我们无法为父元素设置overflow:hidden，那么我们可以为受影响的元素设置一个足够大的translateZ值，例如translateZ(100px)。

兼容文本居中

正常的文本居中方式是让元素高度和line-height相等，而在Android环境中，当字体大小

解决方案：

确定微调的系统环境（Android/IOS）；

font-size、height、width都放大到2倍，并借助transform进行缩放

height: 1rem;
width: 2rem;
font-size: 0.5rem;

变成：
height: 2rem;
width: 4rem;
font-size: 1rem;
transform: scale(0.5);

但由于放大后占用空间，左右会留白，需要借助负边距margin进行调整：-0.35rem-0.45rem0；

有一个解决方案，将rem改为px。

2个标签做90度旋转的bug

动画效果定义如下（sass代码）：

@keyframes official-featured_rotate {
	10%,50%{
      transform:rotateY(90deg);
    }
    60%,100%{
      transform:rotateY(0deg);
    }
}
&-rotate {
    position: absolute;
    width: rem(350/2);
    height: rem(160/2);
    transform-style:preserve-3d;
    transform:translate3d(0,0,0);
    &.ani_rotate {
        animation:official-featured_rotate 5s linear 0s infinite;
        animation-delay: 2s;
    }
    &__item {
        width: rem(350/2);
        height: rem(160/2);
        position: absolute;
        &:nth-child(1) {
            transform: translateZ(rem(350/4));
        }
        &:nth-child(2) {
            transform: rotateY(90deg) translate3d(0,0,rem(350/4));
        }
    }
}

这里有两个a标签，旋转90度的效果使得两个a可以循环显示。这里两者的基本样式是一样的，宽度和高度也是一样的。而Android下（iOS正常）只有打开页面能看到的第一个a标签才能正常跳转并正常绑定storm。第二个a不能跳，于是我以为点击风暴就可以跳，但是任何风暴的绑定都不生效。

解决方案：

经过测试发现，旋转过程中（只要不是完全旋转90度），点击依然可以正常。所以我把旋转角度改为89.99度，一切正常。动漫疗效改为：

@keyframes official-featured_rotate {
    10%,50%{  
      transform:rotateY(-89.99deg);  
    }
    60%,100%{  
      transform:rotateY(0deg);  
    }  
}

然后我查了一下 stackoverflow()。这个解决方案上面也提到过。

使用currentColor来简化css

设置border-color、background-color等颜色时，可以使用currentColor[与当前元素的字体颜色相同]来简化css。

.div{
    color: rgba(0,0,0,.85);
    font-weight: 500;
    text-align: left;
    padding: 20px;
    border: solid 1px currentColor;
}

禁用红色滤镜作为样式

您可以直接向黑色图像添加滤镜，而无需剪切多余的图像。如图所示：

解决方案：

.coupon_style .disable {
 -webkit-filter: grayscale(1);
}

弯曲阴影的实现

功效：

代码：

扭曲阴影的实现

借助:before和:after，加上绝对定位的性质，可以生成一个圆。这时候就可以结合CSS3的倾斜属性skew和旋转属性死记硬背了。可以生成具有旋转角度的平行四边形。这时候就可以和原来的圆重叠起来，形成翘曲效果。

功效：

代码：

使用 -webkit-mask 进行屏蔽

功效图：

代码：

background: url("images/logo.png") no-repeat;-webkit-mask : url("images/mask.png");

mask.png中的蓝色表示不透明（alpha：1），其他部分是透明（alpha：0）。将其覆盖在背景图像上。注意：背景图片对应mask.png中的透明位置。使其透明，留下不透明的形状，即背景图片的可见形状与mask.png的可见形状相同，即“蒙版”。

图像自适应占位符表单

当图片没有正确加载时，或者加载完成之前，由于图片的高度为0，其容器会因为没有内容而崩溃，导致容器无法支撑高度，并且如果加载缓慢，图片加载后会闪烁。

在css中，当padding-top/bottom值为比例时，其值是以其父元素的长度为参考对象的。因此，对于长宽比列固定的情况，可以使用padding-top/bottom进行图像自适应空间占用，以解决页面闪烁的问题。

如果只设置值padding-top/bottom作为比例，就会出现一个问题，就是这样设置容器的max-height属性就会失效css中字体居中，并且很难限制容器的最大高度容器。

为此，您可以向容器添加伪元素的子元素来支撑内容。这个子元素有一个padding-top: 100%，同时给容器一个max-height，试图限制容器的高度。最后内容使用绝对定位只需添加方法即可。喜欢：

#container{
    width: 50%;
    max-height:300px;
    background-color:#ddd;
    /*由于margin存在塌陷的问题，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个overflow:hidden来保证伪元素的margin不会塌陷。*/
    overflow:hidden;
    position: relative; /* 父容器相对定位 */
}
.placeholder::after{
    content:"";
    display:block;
    margin-top:100%;
}
img{
    position:absolute;  /* 内容绝对定位 */
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */
    width:80%;   /* 控制图片不溢出，因此这里使用的图片实际宽度受父容器影响 */
}

并且对于可变长宽比的图片，这样做可能会导致图片显示不完整，所以使用时要小心。

页面自适应最佳实践

经过小项目实践，以下CSS是基于rem、vm、calc的最佳实践代码：

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}