Note

CSS

2022年07月22日 Friday · 7 min read

结构选择器

> 子选择器

只会选择当前标签下一级的标签

main div>p { ... }

同级选择器

~ 选择后面

在同级中选择后面的元素

main div p~h1 { ... }

+ 选择挨着的

选择同级中贴在一起的标签

main div p+h1 { ... }

属性选择器

  • 单个属性不含值

    选择含有指定属性的标签时选中

    h1[title] { ... }
    
  • 多个属性不含值

    可以指定多个标签,同时含有时选中

    h1[title][id] { ... }
    
  • 属性含值

    指定含有特定的属性与值时选中

    h1[title="title"] { ... }
    
  • 属性指定开头值

    属性的值开头含有指定的值时选中

    h1[title^="title"] { ... }
    
  • 属性指定结尾值

    属性的值结尾含有指定的值时选中

    h1[title$="title"] { ... }
    
  • 属性模糊指定值

    当值的任何位置含有指定内容时选中

    h1[title*="title"] { ... }
    
  • 属性指定值为词

    属性指定值必须为单独的词时选中

    h1[title~="title"] { ... }
    
  • | 指定值

    以指定值开头或者指定值后面以 - 连接则选中

    h1[title|="title"] { ... }
    

奇偶数选择

  • odd:奇数
  • even:偶数
tr:nth-child(odd) {
    background-color: #ccc;
}

tr:nth-child(even) {
    background-color: #F9F9F9;
}

禁止选中文字

/* 禁止选中 */
.noSelect {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

object-fit 图片自适应

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

背景图片自适应

background-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(../img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

滚动条样式

/* 滚动条 */
body::-webkit-scrollbar {
    /* 滚动条整体样式 */
    /* 高宽分别对应横竖滚动条的尺寸 */
    width: 10px;
    height: 1px;
}

body::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

body::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

高斯模糊

backdrop-filter: blur(1px);

CSS 去除手机端点击高亮

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

动画属性

  • 动画名称
  • 持续时间
  • 运动曲线(匀速linear)
  • 何时开始
  • 播放次数(无限infinite)
  • 是否反方向(逆播放alternate)
  • 动画起始或者结束的状态(保持forwards/回到起始backwards)
animation: name duration timing_function delay iteration_count direction fill_mode;

流媒体检测网页宽度

@media screen and (max-width: 980px) {
    ...
}

文本溢出

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*数字是几就显示几行*/
-webkit-box-orient: vertical;

英文溢出

word-break: break-all;

文本超出换行

white-space:如何处理元素中的空白

white-space: normal;
  • normal: 默认, 被浏览器忽略空白
  • pre: 空白被浏览器保留.
  • nowrap: 文本不会换行, 会在同一行上继续, 一直走到需要换行为止
  • pre-wrap: 保留空白符序列, 但正常换行
  • pre-line: 合并空白符序列, 但正常换行
  • inherit: 从父元素继承white-space这个属性

word-wrap:是否允许浏览器在单词内断句

overflow-wrap: break-word;
  • 现在更名为了overflow-wrap
  • normal: 默认, 只在允许的断字点换行
  • break-word: 在实在找不到换行点的时候, 就断单词换行

字体间距

letter-spacing: 2px;

flex 布局

通过给父盒子添加属性来控制子盒子的排列方式

display: flex;

flex-warp

设置子元素是否换行

属性值 说明
warp 换行
nowarp 不换行
flex-wrap: wrap;

flex-direction

决定子盒子的方向排列

属性值 说明
row 默认值,从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
flex-direction: row;

justify-content

设置主轴上子元素排列方式

属性值 说明
flex-start 默认值,从头部开始,如果主轴是 x ,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是 x 轴则水平居中)
space-around 平分剩余空间
space-between 先两边贴上,再平分剩余空间(重要)
justify-content: space-between;

align-item

设置测轴上子元素的排列方式(单行)

属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认)(子盒子不要设置高度)
align-items: stretch;

align-content

设置测轴上子元素的排列方式,只针对多行

属性值 说明
flex-start 默认值,从测轴头部开始排列
flex-end 从测轴尾部开始排列
center 在测轴的中间显示
space-around 子元素在测轴平分剩余空间
space-between 子元素先分布在两头,再平分剩余空间
stretch 设置子元素高度平分父元素高度
align-content: center;

flex-flow

flex-direction 与 flex-warp 的复合属性

flex-flow: direction warp ;

flex-flow: column wrap;

IOS hover 失效问题

a:hover 设置的样式在 iOS 系统的浏览器内显示不出来,看来在 iOS 系统的移动设备中,需要在按钮元素或 body/html 上绑定一个 touchstart 事件才能激活 :active 状态。

1、js代码document.body.addEventListener('touchstart',function(){});
2、html里或者body直接加<body ontouchstart>

两个或多个文字长度对齐

x:最大字数,y:当前字数

公式为:

(x - y) / (y - 1)

如当前一些文字中,最大的字数是三位,则两位的 css 为

.info-text-t2 {
    letter-spacing: 1em; /* (3 - 2) / (2 - 1) */
}

IOS 无法选择 input 框

input 框与它的父类都需要加上一个属性

-webkit-user-select:text !important;

通用 CSS 字体

font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC",
        "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei",
        "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;