css 常用操作

Bonrui

已于 2024-06-18 16:12:34 修改

阅读量4.8k

点赞数 1

分类专栏： HTML CSS 文章标签： css3 html

于 2018-01-12 20:58:14 首次发布

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

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

一、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 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些