其他css问题

发表于 更新于 分类于 本文字数： 11k 阅读时长 ≈ 10 分钟

css相关能写一万年，考虑分开写了，太多了

flex布局

更多参见阮老师blog
1.意为弹性布局，块元素：display:flex;行内元素：display:inline-flex;
2.不同内核浏览器需要加前缀区分，如：display:-webkit-flex; /Safari/ 非规范属性值：display:-webkit-box
3.设为flex布局后，子元素的float,clear,vertical-align属性将失效。 非规范属性：-webkit-box-orient：vertical //垂直排列子元素
4.flex属性：
1）flex-direction:row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
2)flex-wrap属性: nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3)flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4)justify-content:flex-start | flex-end | center | space-between | space-around
5)align-items: flex-start | flex-end | center | baseline | stretch;
6)当使用了flex-direction:column之后,未定宽的元素会自动适应宽度为100%；给元素加个非默认值align-self:stretch外的值就可以

grid布局

grid布局比起flex布局更加灵活，flex布局只有横轴纵轴概念，grid布局则多了个网格概念，可以控制每个单元格样式

清除所有a标签在点击时出现的特效

清除所有a标签在点击时出现的特效：a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

文字与图片不能垂直居中对齐

给图片添加css样式
vertical-align:text-bottom；
vertical-align只适用于行内块元素

css实现禁止点击事件

pointer-events: none;
阻止点击事件，变为默认光标，阻止触发hover，active，阻止JS点击事件
none:
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

  • 扩展：如果有一个公共组件，里面有个可移动元素，父元素设置pointer-events: none;，并且子元素设置pointer-events: auto;，可以实现子元素移动同时父元素不可点击并且不影响被父元素遮盖的元素点击事件，比如小程序里可拖动组件如果全屏拖动必须area标签设置全屏，然后下面的元素就无法选中。

img标签和同级div之间的间隙处理

给img标签设置 vertical-align:middle;display:block;

在移动端手机APP中禁止长按来阻止其他手机自带默认事件（如：iPhone的3Dtouch）

1
2
3
4
5
6
7
8
*{
  /* 当你触摸并按住触摸目标时候，禁止或显示系统默认菜单 */
  touch-callout: none; 
  -webkit-touch-callout: none;
  /* 用户能否选中文本 */
  -webkit-user-select: none; 
  user-select: none;
}

文本超出后显示省略号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 一行 */
p{
   width:40px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
/* 多行 */
p{
    overflow: hidden;                /* 超出部分隐藏 */
    text-overflow: ellipsis;         /* 显示省略号来修饰被剪掉的文本 */
    display: box;
    display: -webkit-box;
    line-clamp: 3;        /* 非规范属性，实现规定文本行数 火狐不支持这个属性 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;    /* 规定框的子元素应该被水平或垂直排列 */
    -moz-box-orient: vertical;       /* 支持火狐的写法 */
    word-break: break-word;
} 
*line-clamp*
限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

升级版：https://codepen.io/xboxyan/pen/VwpPNbm?fileGuid=YcHxPHhHvDtpqvDw

word-break 已弃用，但是如果想单词不换行，只有特长单词一行放不下才换行，只能用这个值；

自定义鼠标指针

cursor: url(/路径/cursor.cur), url(two.svg) 5 5,auto;

url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个url值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。
可选 x，y 坐标。两个小于 32 的无单位非负数。

文字竖排排列显示方案

1.writing-mode:lr-tb或writing-mode:tb-rl
参数：
<1>、lr-tb：从左向右，从上往下
<2>、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。
2.对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
3.利用html br 换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。

-webkit-overflow-scrolling

用来控制元素在移动设备上是否使用滚动回弹效果.
兼容安卓和IOS的写法如下

1
2
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ 
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

Bug
当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个z-index值就可以了。

1
2
3
-webkit-overflow-scrolling: touch; 
position:absolute; 
z-index:1;

overscroll-behavior可以控制只触发当前层的滚动效果

overscroll-behavior: auto | contain | none

auto:（默认值），即滚动到边缘后继续滚动外部的可滚动容器
contain: 默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），并且会阻止默认的滚动溢出行为
none:相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为
contain和none的行为差异体现主要在移动端

overflow-anchor属性改变滚动行为来控制可视区内容

overflow-anchor: auto | none

auto:（默认值），即滚动时不会受内容变化影响。滚动条变化，可视内容不变
none:即滚动时会受内容变化影响，可视区插入内容会显示插入的内容。滚动条不变，可视内容变化

css3滤镜效果：-webkit-filter

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

字体抗锯齿效果

Webkit在自己的引擎中支持了这一效果。
-webkit-font-smoothing
它有三个属性值：
none —— 对低像素的文本比较好
subpixel-antialiased——默认值
antialiased ——抗锯齿很好
.icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; //Gecko也推出了自己的抗锯齿效果的非标定义
}

弹层出现禁用背景body滚动条

height:100%;overscroll:hidden;
touch-action:none;//禁止触发默认的手势操作。
pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
pan-y：可以在父级元素内进行垂直移动的手势操作。
manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持；
注：touch-action只支持具有行内块，块级的元素

will-change提高页面滚动、动画等渲染性能css3

参考张鑫旭blog:
http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

支持webkit内核浏览器的滚动条样式自定义

1
2
3
4
5
6
::-webkit-scrollbar{width: 5px;height: 8px;background-color: #aaa} /*滚动条垂直方向的宽度与水平方向的高度*/ 
::-webkit-scrollbar-button{background-color: #aaa} /*滚动条按钮*/ 
::-webkit-scrollbar-track{background-color: #aaa} /*滚动条轨道*/ 
::-webkit-scrollbar-track-piece{background-color: #aaa} /*滚动条垂直方向轨道件*/ 
::-webkit-scrollbar-thumb{background-color: #aaa} /*滚动条轨道上的按钮*/ 
::-webkit-scrollbar-corner{background-color: #aaa} /*滚动条轨道上的滚动角*/

页面加滤镜

1
2
3
4
5
6
7
8
9
10
/* 高斯模糊 */
filter: blur(px)；
/* 转换为灰度图像 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);

mask

css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。
mask-reference:设置遮罩图片的路径
masking-mode:设置遮罩图片的模式
position:设置遮罩图片的位置
bg-size:设置遮罩的大小
repeat-style:设置遮罩图片的重复性
compositing-operator:设置遮罩图层的组合操作

1
2
3
.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

clip 图像裁剪

1
2
3
*{
  clip:rect(0px,0px,0px,0px) //四个值分别对应上右下左
}

滚动动画

html, body { scroll-behavior:smooth; }
凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！
如：返回顶部

js处理：
target.scrollIntoView({
behavior: “smooth”
});
我们随便打开一个有链接的页面，把首个链接滚动到屏幕外，然后控制台输入类似下面代码，我们就可以看到页面平滑滚动定位了：

1
2
3
document.links[0].scrollIntoView({
    behavior: "smooth"
});

box-shadow添加多个不同的阴影

用逗号分隔即可
如：

1
*{box-shadow: 0 3px 3px 0 rgba(243,132,0, 0.35), 0 -6px 2px 0 rgba(244, 149, 0,0.35) inset;}

背景色渐变

1
2
3
4
5
6
7
8
9
10
*{
/* 渐变轴为45度，从蓝色渐变到红色 */
background-image:linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
background-image:linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image:linear-gradient(0deg, blue, green 40%, red);
}

iphoenX适配问题(利用media限制iPhone X屏幕尺寸)

1
2
3
4
5
6
7
8
9
10
/* css部分，利用media做你想要的适配，我这里通过一个白色div留出安全距离防挡 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .adapt {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}

position:sticky

1.父级元素不能有任何overflow:visible以为的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。
2.同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
3.sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。

css设置暗黑模式

1
2
3
4
5
6
@media (prefers-color-scheme: dark) {
    body {
        color: white;
        background: black;
    }
}

CSS all

CSS all 简写属性 将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

  • 取值
    initial
    该关键字代表改变该元素或其父元素的所有属性至初始值。
    inherit
    该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values
    unset
    该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。

css设置图片img标签显示样式

object-fit属性

  • 支持：chrome: >= 31.0; IE: >= 16.0; firefox: >= 36.0; safari: >= 7.1;

    值 描述

    fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。

    contain 保持原有尺寸比例。内容被缩放。

    cover 保持原有尺寸比例。但部分内容可能被剪切。

    none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。

    scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

    initial 设置为默认值

    inherit 从该元素的父元素继承属性。

object-position属性

object-position 属性与 object-fit 属性一起使用，指定图像或视频应如何在其内容框中使用 x/y 坐标进行定位。

1
2
3
4
img {
  object-fit: cover;
  object-position: bottom right;
}

卡片翻转效果实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
  .box{
    width: 50px;
    height: 50px;
    transition: 0.6s;
    transform-style: preserve-3d;/*子元素将保留其 3D 位置*/
  }
  .box.rotate {
    transform: rotateY(180deg);
  }
  .front{
    width: 50px;
    height: 50px;
    background: green;
    backface-visibility: hidden;/* 定义当元素不面向屏幕时是否可见，hidden：背面是不可见的 */
  }
  .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    width: 50px;
    height: 50px;
    background: red;
  }
</style>
<div class="box">
  <div class="front"></div>
  <div class="back"></div>
</div>

:empty 选择器

:empty代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

  • 之前判断数据为空显示暂无数据需要判断数据length为0显示一个包裹暂无数据文案的标签，而用了:empty伪类选择器，只需要在外层div加一个伪类就可以实现；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .container {
        width: 400px;
        height: 400px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container:empty::after {
        content: "—— 没有更多了 ——";
    }

gap属性

当我们需要每个子元素之间距离等分而又除不尽时，就可以用到gap属性，gap属性它适用于Grid布局、Flex布局以及多列布局，并不一定只是Grid布局中可以使用。
比如我们要让每个元素之间隔开20px， 那么使用gap我们可以这样：

1
2
3
4
.wrap{
  display: flex | grid；
  gap: 20px;
}

background-clip 实现文本背景图

1
2
3
4
5
.text{
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}

:invalid 伪类

选择任何未通过验证的<form>、<fieldset>、<input>或其他表单元素。

:focus-within 伪类

当元素或其任意后代元素被聚焦时，将匹配该元素。换言之，它表示:focus伪类匹配到该元素自身或它的后代时，该伪类生效。

mix-blend-mode:difference

mix-blend-mode属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。

*-line-start和*-block-end相关属性

其中 inline 和 block 表示方向， start 和 end 表示起止方位。

在中文和英文网页环境中，inline元素（文字、图片、按钮等）的默认是从左往右水平排列的；block元素（如<div>、<p>元素等）默认是从上往下垂直排列的。

因此，margin-inline-start就表示内联元素排列方向的起始位置，就是“左侧”，margin-inline-end就表示内联元素排列方向的终止位置，就是“右侧”；margin-block-start就表示块级元素排列方向的起始位置，就是“上面”，margin-block-end就表示块级元素排列方向的终止位置，就是“下面”。

由此拓展出的border-inline和border-block相信可以举一反三了；

flex 布局 子元素不设置宽高，高度撑满父元素的问题

在 flex 布局中，我们通过 align-items 来控制元素在交叉轴上的对齐方式。

它可能取5个值：
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch (默认值）: 如果子元素未设置高度或者高度为auto，将占满整个容器的高度。

当我们没有给子元素增加高度的时候，其在交叉轴方向的对齐方式就是默认值 stretch，因此他的高度与父元素的高度一致。
所以如果想要自适应高度，子元素需单独设置align-self:flex-start，或者父元素不设置高度，靠子元素撑开;

多个标题竖向排列，有中文扩号【「导致顶端无法对齐解决

1
2
3
4
5
6
7
8
9
<style>
  p[title^="【"],p[title^="「"]{
      text-indent: -0.5em;
  }
</style>
<p title="【你好，晚安，早安，午安】">【你好，晚安，早安，午安】</p>
<p>你好，晚安，早安，午安</p>
<p title="「你好，晚安，早安，午安」">「你好，晚安，早安，午安」</p>
<p>你好，晚安，早安，午安</p>

扩展：

[attribute^=value] p[title^=”【”] 选择其title属性值以【 开头的每个<p>元素。
[attribute=value] [title=flower] 选择带有包含flower一词(而且必须是前后都有空格才可以，当然中文亦可以)的title属性的所有元素。

怎么使position:fixed元素相对于屏幕视口位置改为相对于祖先元素位置

当元素设置position:fixed元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的transform、perspective、filter或backdrop-filter属性非none时，容器由视口改为该祖先。

所以只需要祖先元素设置任意其中的一个值非none，就会使元素重回文档流，当然同时也意味着元素失去fixed浮动的特性。

不定高元素设置高度渐变动画

1
2
3
4
5
6
7
8
9
10
11
12
/* 因为不定高，无法设置高度动画，所以换个方式，设置最大值，保证最大值不会小于实际高度 */
/* 如果还是不放心，可以包一个子元素，子元素设置相同max-height,并且设置滚动条 */
.autoDiv{
  max-height:0;
  &.act{
    max-height:1000px;
  }
  .childDiv{
    max-height:1000px;
    overflow-y:scroll;
  }
}

white-space参数

1
2
3
4
5
6
7
8
p {
  white-space: normal;  /* 连续的空白符会被合并 */
  white-space: nowrap;  /* 和 normal 一样合并空白符，但阻止文本换行 */
  white-space: pre;     /* 连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。*/
  white-space: pre-wrap;/* 连续的空白符会被保留。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。*/
  white-space: pre-line;/* 连续的空白符会被合并。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。*/
  white-space: break-spaces;/* 与 pre-wrap 的行为相同，但空白占空间并且可被截断 */
}

inset

在处理位置时，您可以使用 inset 属性，而不是使用 top、right、bottom、left 属性。

1
2
3
4
5
6
7
8
9
10
11
12
div {
  position: absolute;
  top: 20px;
  right: 25px;
  left: 16px;
  bottom: 23px;
}
/*可以这样替代上面写法*/
div {
  position: absolute;
  inset: 20px 25px 16px 23px;
}

选择前几个元素

1
2
3
&:nth-child(-n + 4) {
  margin-bottom: 0.2rem;
}

视觉文案居中

我们知道，中文标点字符基本和中文字符占同样的像素宽，就导致视觉上文案会偏左（如果标点符号在结尾时）；所以就有了下面的方案：

1
2
3
4
5
6
7
8
9
10
<!-- 利用了绝对定位不占父元素空间的特点 -->
<style>
  p{
    position:relative;
  }
  span{
    position:absolute;
  }
</style>
<p>智能加成，加亮加实力<span>。</span></p>

backdrop-filter

简直就是神仙属性,可以在父元素设置模糊作用到子元素上