CSS中的一些小实现(2)_怎么把css里的所有px除以2-优快云博客

本文探讨了在Chrome、IE、Firefox等不同浏览器中定制滚动条样式的CSS方法，包括更改宽度、颜色等，并介绍了处理浏览器兼容性的策略。此外，还分享了网格布局(grid)、position布局的实用技巧，以及如何实现文字溢出换行和背景模糊效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中的一些小实现(2)

改变Chrome/IE/Firefox浏览器的滚动条样式

Chrome

   	*::-webkit-scrollbar{ //滚动条整体部分
   	    z-index: 11;
   	    width: 8px;
   	}
   	*::-webkit-scrollbar-thumb {  //滚动条里上下可以移动的小方块
   	    width: 8px;
   	    background: #e0e0e0;
   	}
   	*::-webkit-scrollbar-track {  //滚动条里的轨道
   	    background: #fff;
   	}

IE: IE浏览器貌似不能改变滚动条的宽度

    -ms-overflow-style:none;
    scrollbar-track-color:#fff;
    scrollbar-dark-shadow-color:#fff;
    scrollbar-3dlight-color:#fff;
    scrollbar-face-color:#e0e0e0;
    scrollbar-shadow-color:#fff;
    scrollbar-arrow-color:#fff;
    -ms-scrollbar-track-color: transparent;

Firefox：Firefox浏览器能够改变滚动条宽度的属性：

    scrollbar-width: none;  //系统默认的滚动条宽度
    scrollbar-width: thin;  //系统提供的瘦滚动条
    scrollbar-width: auto;  //不显示滚动条但依然可以滚动
    scrollbar-color: #efefef #fff;  //设置滚动条滑块，滑轨颜色

在面对需要设置滚动条宽度的需求时，用IE/Firefox浏览器系统本身滚动条是很难实现，如果非要显示，可以使用Javascript描述对应的div 插入标签中，如果不一定要显示，那么可以尽力隐藏，例如：

	//当有滚动条的内层宽度 > 其父层宽度 可以隐藏掉滚动条
	
	.parent{
		width:230px;
	}
	.child{
		-moz-width: 247px;
		overflow: hidden;
	}

处理浏览器兼容的方法

由于内核不同导致在不同的浏览器相同的样式很多时候会呈现不同的效果，有时不尽如人意，因此需要了解一些解决浏览器兼容的方法：

使用浏览器的一些私有属性: 使用它们后则在指定浏览器中才识别

//chrome
-webkit-margin-start:0px;
-webkit-margin-end:0px;
...

//IE
-ms-overflow-style:none;
...

//Firefox
-moz-width: 247px;
...

使用浏览器专属类（是添加了特有的前缀/后缀的类）

一些时常用到样式效果

文字溢出换行
其他一些小状况：
a.背景模糊而字体不变：

 background: rgba(219,218,212,0.5);

grid 布局：

<style>
    .wrap{
        margin: 0 auto;
        display:grid;
        width:600px;
        grid-template-columns:1fr 3fr 1fr ; //水平方向一行分成不同比例的三部分（列）
        grid-template-rows:80px 220px 80px;   //垂直方向上分成不同高度的三部分
        grid-gap:5px;
        color:#fff;
    }
    .title{
        background:red; 
        grid-column:1/3;  //从第一列网格线开始，到第三条网格线
    }
    .aside{
        background:#e15671;
        grid-column:3/4; //从第三条网格线开始到第四条网格线
        grid-row:1/span 2; //从第一行网格线开始，合并2个单元格
    }
    .nav{
        background:#e15671;
    }
    .main{
        background:#033333;
    }

    .footer{
        background:#e15671; 
        grid-column:1/4;
    }
</style>

<div class="wrap">
        <header class="title">title</header>
        <nav class="aside">aside</nav>
        <div class="nav">nav</div>
        <div class="main">main</div>
        <footer class="footer">footer</footer>
</div>

在这里插入图片描述

position 布局

首先需要说明的是position 默认值为static ,initial 表示设置属性为默认值（也就是static）

static : 没有定位，元素出现在正常的流中,1⃣️此时不受top/bottom/left/right/z-index约束；2⃣️若是块级元素像div，p 等width自定沾满整个屏幕(width:100%)；3⃣️ 当有明确width/height块级元素 (div，p等) 的外边距设置为auto时，其外边距会将剩余空间撑满，则可以达到水平居中的效果。
relative：元素相对于其正常位置进行定位。与static的2⃣️、3⃣️相似，但是这样的元素会受到left/bottom/top/right/z-index作用，而left与margin-left 不同，其中left:xx 指的是该元素以外的left位置添加xx 且元素整体位置向右移动xx；margin-left:xx 指的是该元素位置内部的content外左边聚，整体位置不会被挪动。
fixed：相对于浏览器窗口进行定位，使用left/right/top/bottom定位
absolute：相对于除static定位以外的第一个父元素的绝对定位，若父元素都是static，那么将有可能找不到其相对定位的元素。

//实现div水平垂直居中
.mydiv{
  width:600px;//有明确宽度
  position:absolutely;
  margin:auto;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

sticky：该定位基于用户规定的位置，在页面被滚动时（超出目标区域）定位在某个固定的位置（目前不是特别普遍）。