CSS布局与优化技巧-CSDN博客

本文链接：https://blog.csdn.net/qinjm8888/article/details/79048096

一、transform影响fixed，transform限制position:fixed的跟随效果

元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动，但是transform可以把position:fixed干掉让其降级成absolute。
如下面代码：

<div style="transform:scale(1);">
    <img src="mm1.jpg"style="position:fixed;" />
</div>

本身应该不动的图片因为父级设置了transform而变成了absolute的效果。
更多transform影响css的介绍请参考：

CSS3 transform对普通元素的N多渲染影响 « 张鑫旭-鑫空间-鑫生活

二、iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

<body class="layout-scroll-fixed">
    <!-- fixed定位的头部 (absolute绝对定位也可以)-->
    <header></header>
    <!-- 可以滚动的区域 -->
    <main>
        <div class="content"><!-- 内容在这里... --></div>
    </main>
    <!-- fixed定位的底部 （absolute绝对定位也可以）-->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>
header, footer, main {display: block;}
header {position: fixed;//或者absolute
    height: 50px;left: 0;right: 0;top: 0;}
footer {position: fixed;//或者写成absolute
    height: 34px;left: 0;right: 0;bottom: 0;}
main {
/* main绝对定位，进行内部滚动 */
position: absolute;top: 50px;bottom: 34px;
/* 使之可以滚动 */
 overflow-y: scroll;
  /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
  -webkit-overflow-scrolling: touch;}
main .content {height: 2000px;}

三、平铺

# 使用CSS的object-fit属性, 需要注意的是，这种方法只适用于img标签
<div><img url=""/></div>
div{width: 100px;height: 150px;}
img{width: 100%;height: 100%;object-fit: cover;}

# background 方式
<div><img url=""/></div>
div{width: 100px;height: 150px;}
img{background-size: contain;background-position: center center;background-repeat: no-repeat;background-image: url("");

四、滚动条样式

::-webkit-scrollbar 滚动条整体部分，可以设置宽高背景样式
::-webkit-scrollbar-button 滚动条两端的按钮，可设置按钮背景
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
:horizontal 水平方向的滚动条
:vertical 垂直方向的滚动条

五、object-fit

fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器
contain：保持原有尺寸比例。内容被缩放
cover：保持原有尺寸比例。但部分内容可能被剪切
none：保留原有元素内容的长度和宽度，也就是说内容不会被重置
scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

六、var(--status-bar-height) 用法

在html标签上定义 --status-bar-height 属性(<html stayle="--status-bar-height: 0px"></html>)然后在css样式文件中就可以使用var(--status-bar-height)来获取属性值(.myheight { height: var(--status-bar-height)}还可以结合calc(var(--status-bar-height) + 0px)使用)

七、vh和dvh单位

Chrome 108 新增了一些视口单位其中包括dvh，在移动设备上视口大小会受动态工具栏(地址栏和标签栏)是否存在的影响，但是vh的大小是不变的，现在移动浏览器当网页向下滚动时动态工具栏会自动缩回此时100vh是整个视口高度，为应对动态工具栏增加了大视口(动态工具栏收缩时对应单位lv) 和小视口(动态工具栏扩展时对应单位sv) 的概念，还增加了一个动态视口的概念对应单位dvh，lv和sv仍然不会随着大小视口切换而改变，但是dvh会随着大小视口的切换而自动改变