css

发表于 | 分类于

简介

CSS 知识点

CSS3说明

  • CSS3使用时一般带有私有前缀，对应关系如下
    • -webkit- 对应 Safari and Chrome
    • -moz- 对应 Firefox
    • -o- 对应 Opera
    • -ms- 对应 Internet Explorer

BFC

字体

  • 导出Excel使用Arial Unicode MS字体，打印出来较美观

table样式

1
2
3
4
/* 设置表格第一列无边框 */
table tbody tr td:first-child {border: none;}
/* 设置表格第三列无边框 */
table tbody tr td:first-child+td+td {border: none;}

响应式

弹性盒子模型(Flexible Box Model)

http://www.zhangxinxu.com/wordpress/?p=1338

  • display: box;
  • 作用于父元素上
    • display: box; 只有父元素声明了使用box模型，子元素才能使用box-flex属性
    • box-orient 用来确定子元素的方向，是横着排还是竖着排。horizontal | inline-axis | inherit：横排；vertical | block-axis：竖排
    • box-direction 用来确定子元素的排列顺序。normal | inherit：普通；reverse：反转(原本dom应该从左到右是1-2-3的，此时结果显示为3-2-1)
    • box-align 用来决定盒子垂直方向上的空间利用(同vertical-align一起记忆)。start(垂直方式则是向顶部对齐) | end | center | baseline(基线对齐，文字底边线) | stretch(默认值，拉伸)
    • box-pack 用来决定盒子水平方向上的空间利用。start(水平方向则是向左对齐) | end | center | justify(两端对齐)
    • box-lines 貌似暂不支持
    • box-flex-group 貌似暂不支持
    • box-ordinal-group 定义一个数字级别的，决定了显示位置，越小显示越靠前。也可基于此属性实现 box-direction: reverse 的效果
  • 作用于子元素上
    • box-flex: 2; 子元素占用宽度比例，此时只占用2份。如果其他子元素有定义width、margin值，则优先分配width、margin宽度
  • 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 只有父元素声明了使用box模型，子元素才能使用 box-flex 属性 */
.father { 
    display: box;
    display: -webkit-box; /* 支持其他浏览器也可以依次加上 */
    
    .child-a {
        box-flex: 1;
        -webkit-box-flex: 1;
        box-ordinal-group: 2; /* child-a 类型的元素将显示在 child-b 类型元素后面 */
        -webkit-box-ordinal-group: 2;
    }
    .child-b {
        box-flex: 1;
        -webkit-box-flex: 1;
        box-ordinal-group: 1;
        -webkit-box-ordinal-group: 1;
    }
}

Flex布局

  • 参考
  • display: flex; 开启flex布局
  • 作用在flex容器上
    • flex-direction 用来控制子项整体布局方向
      • row(默认从左到右) | column(默认从上到下) | row-reverse | column-reverse
    • flex-wrap 用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示
      • nowrap | wrap(宽度不足换行显示) | wrap-reverse(宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面)
    • flex-flow 是flex-direction和flex-wrap的缩写，如: flex-flow: row-reverse wrap-reverse;
    • justify-content 决定了水平方向子项的对齐和分布方式
      • flex-start | flex-end | center(水平居中) | space-between(两端对齐) | space-around | space-evenly
      • CSS的text-align有个属性值为justify，可实现两端对齐，可联合记忆
    • align-items 决定了垂直方向子项的对齐和分布方式，指的就是flex子项们相对于flex容器在垂直方向上的对齐方式
      • stretch(类似于flex-start) | flex-start(顶部对齐) | flex-end(底部对齐) | center | baseline(类似于flex-end)
    • align-content (只适用多行的flex容器)垂直方向每一行flex元素的对齐和分布方式，可以看成和justify-content是相似且对立的属性。和align-items区别参考：https://blog.csdn.net/cc18868876837/article/details/88138057
  • 作用在flex子项上
    • order 改变某一个flex子项的排序位置
    • flex-grow 扩展比例：默认值是0，表示不占用剩余的空白间隙；0-1表示占据的百分比(大于等于1表示全部占据)；如果多个子元素设置了此属性则其和表示占据空隙的比例，然后按照各自的比例进行分配占据的空隙
    • flex-shrink 收缩比例：主要处理当flex容器空间不足时候，单个元素的收缩比例；类似grow，0-1表示收缩比例(大于等于1表示收缩完全，正好填满flex容器)
    • flex-basis 定义了在分配剩余空间之前元素的默认大小，默认是auto，其值可以是像素或百分比
    • flex flex-grow flex-shrink flex-basis 的组合；flex: 1;等价于flex: 1 1 0%;
    • align-self

@media

  • 用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面
1
2
3
4
5
6
7
8
9
10
@media (min-width: 768px) {
    /* >=768的设备 */
    body { font-size: 12px; }
}
@media (min-width: 992px) { /* >=992的设备 */ }
@media (min-width: 1200) { /* >=1200的设备 */ }

@media (max-width: 1199) { /* <=1200的设备 */ }
@media (max-width: 991px) { /* <=992的设备 */ }
@media (max-width: 767px) { /* <=768的设备 */ }

cacl计算

  • 需要注意的是，运算符前后都需要保留一个空格
  • 支持+、-、*、/
1
2
3
4
.box {
    width: calc(100% - 10px);
    height: calc(100vh - 120px); /* 高度用可视高度，而不能用 100% */
}

vm/rpx/rem

SVG

  • SVG文档
  • loading图片案例(最终是一个灰色的圆环加载图片)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- svg根节点
    viewBox: 定义了画布上可以显示的区域(0,0坐标在左上角，X轴向右，Y轴向下)
    width/height: 画布的整体宽高
    fill: 颜色 
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#646568">
    <!-- path路径 
        d: 
            M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
            L = lineto(L X,Y) ：画直线到指定的坐标位置
            H = horizontal lineto(H X)：画水平线到指定的X坐标位置
            V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
            C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
            S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率
            Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
            T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
            A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
            Z = closepath()：关闭路径
    -->
    <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
    <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
        <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
    </path>
</svg>

常用CSS

  • 响应式布局，head中加<meta name="viewport" content="width=device-width,initialscale=1.0,maximum-scale=1.0,user-scalable=0">
  • 解决iPhone中 overflow:scroll; 滑动速度慢或者卡的问题：-webkit-overflow-scrolling : touch;

虚线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 水平虚线 */
.split-x {
  display: inline-block;
  width: 85%;
  position: absolute;
  left: 15%;
  top: 10px;
  border-top: 1px dashed #cccccc;
  height: 1px;
  overflow: hidden;
}

/* 垂直虚线 */
.split-y {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 80%; /* bottom: 0; */
    left: 50%;
    border: 1px dashed #eee;
}

文字省略/换行/缩放/删除线

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
32
33
34
/* 单行缩略（部分浏览器需要设置宽度） */
span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100px;
}

/* 多行省略 */
p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 对2行文字进行省略 */
    -webkit-box-orient: vertical;
}

/* 自动换行 */
span {
    word-wrap: break-word; /* 如果无效可试试下面 */
    /* overflow-wrap: anywhere; */
    /* white-space: normal; */
    /* word-break: break-all; */
}

/* 缩放 */
span {
    font-size: 12px; /* 谷歌浏览器最小字体 */
    transform: scale(0.75); /*缩小字体*/
}

<!-- 删除线 -->
<view style="text-decoration: line-through;">这是有删除线的文本</view>

滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box::-webkit-scrollbar {
    /* 单独修改此div的滚动条 */
}

/* 如果只定义::-webkit-scrollbar-thumb和::-webkit-scrollbar-track，而不定义::-webkit-scrollbar则会无效 */
::-webkit-scrollbar {
    width: 6px; /* 针对纵向滚动条 */
    height: 8px; /* 针对横向滚动条 */
}
/* 滚动条 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: tint(#adb0b8, 50%); /* 滚动条颜色，50%为半透明，100%为完全透明 */
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: red;
}
::-webkit-scrollbar-thumb:hover {
    background: tint(#adb0b8, 20%);
}
  • 隐藏滚动条(但是可以滚动)
1
2
3
4
5
6
7
#box {
  height: 300px;
  overflow-y: scroll;
}
#box::-webkit-scrollbar {
  display: none;
}

渐变色

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

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

    /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
    background: linear-gradient(0deg, blue, green 40%, red);
    background: -webkit-linear-gradient(0deg, rgb(251, 176, 30), rgb(229, 2, 18), rgb(192, 6, 156));
}

图片

  • 图片阴影
1
2
-webkit-filter: drop-shadow(10px 20px 20px rgba(0, 0, 0, 0.5));
filter: drop-shadow(10px 20px 20px rgba(0, 0, 0, 0.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
  • 显示原型图片(需要原图为正方形)
1
border-radius: 50%;

箭头动画(纯css)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* 箭头特效。向上箭头使用：<div class="sq-arrow sq-arrow_top"></div> */
.sq-arrow {
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0.8;
    
    -webkit-transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
    transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;

    &.sq-arrow_left {
        /* 设置帧名称sq-arrow-x，帧时间0.5s，ease-in-out缓慢进入退出，infinite继承父容器特效 */
        -webkit-animation: sq-arrow-x .5s ease-in-out alternate infinite;
        animation: sq-arrow-x .5s ease-in-out alternate infinite;

        /* 对元素进行变换，旋转135度 */
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    &.sq-arrow_right {
        -webkit-animation: sq-arrow-x .5s ease-in-out alternate infinite;
        animation: sq-arrow-x .5s ease-in-out alternate infinite;

        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    &.sq-arrow_top {
        -webkit-animation: sq-arrow-y .5s ease-in-out alternate infinite;
        animation: sq-arrow-y .5s ease-in-out alternate infinite;

        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    &.sq-arrow_bottom {
        -webkit-animation: sq-arrow-y .5s ease-in-out alternate infinite;
        animation: sq-arrow-y .5s ease-in-out alternate infinite;

        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
.sq-arrow:hover {
    -webkit-transition-delay: 0;
    transition-delay: 0;
    opacity: 1;
}

/* 左右箭头动画帧设置 */
@-webkit-keyframes sq-arrow-x {
    100% {
        left: 20px
    }
}
@keyframes sq-arrow-x {
    100% {
        left: 20px
    }
}
/* 上下箭头动画帧设置 */
@-webkit-keyframes sq-arrow-y {
    100% {
        top: 20px
    }
}
@keyframes sq-arrow-y {
    100% {
        top: 20px
    }
}

吸附效果(头部/底部导航)

  • position: sticky
1
2
3
4
5
.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
  • position: fixed
1
2
3
4
5
6
7
8
9
10
.top {
    position: fixed;
    left: 0;
    top: 0;
}
.bottom {
    position: fixed;
    left: 0;
    bottom: 0;
}

body背景图片平铺

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
    /*设置背景图片*/
    background-image: url("../images/background/back.jpg") ;
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;  /*关键*/
    background-position: center;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1600px;
    z-index: -10;
    zoom:1;
}

通过HTML转义字符完成部分简单图标

CSS实现文字横向滚动

子元素高度撑满剩余高度

1
2
3
4
5
6
7
8
9
10
11
12
/* 一: 需要设置所有父元素高度 */
.full-height { height: 100%; }
/* 二: 只要父容器的高度大于等于屏幕高度即可 */
.full-height { min-height: 100% }
/* 三: 使用flexbox布局 */
.container {
  display: flex;
  flex-direction: column;
}
.full-height {
  flex: 1;
}

常见问题

height: 100%; 无效 ^2

  • width和height属性，基于%设定宽高时，实际是根据父元素的宽高来的
  • 如果父元素没有设置高度，那么这个方法就无效。所以，一般需要将所有父元素的高度都设置为100% html, body, .box {height: 100%;}

overflow: auto; 无效

盒子内容溢出将在满足下列条件之一时出现

  • 一个不换行的行元素宽度超出了容器盒子宽度
  • 一个宽度固定的块元素放在了比它窄的容器盒子内
  • 一个元素的高度超出了容器盒子的高度
  • 一个子孙元素，由负边距值引起的部分内容在盒子外部
  • text-indent属性引起的行内元素在盒子的左右边界外
  • 一个绝对定位的子孙元素，部分内容在盒子外，但超出的部分不会被剪裁(overflow: hidden;)

子元素使用float导致父元素没有高度

1
2
3
4
5
6
7
8
9
/* 参考 https://www.jianshu.com/p/a1724eeb07a6 */
.container:after {
    clear: both;
    content:" ";
    display: block;
    width:0;
    height: 0;
    visibility: hidden;
}

z-index 失效

  • 使用
    • z-index元素的position属性要是relative，absolute或是fixed
    • z-index值越大就越是在上层
  • z-index在一定的情况下会失效
    • 父元素position为relative时，子元素的z-index失效
      • 将父元素position改为absolute或static
    • 该标签在设置z-index的同时还设置了float浮动
      • float去除，改为display：inline-block

父元素的高度无缘无故增加

绝对定位水平对齐

1
2
3
4
5
div {
    position: absolute;
    top: 90px; /* 高度一般不会伸缩 */
    transform: translate(50%, 0); /* 水平对齐 */
}

最后一个元素撑满当前行

1
2
3
4
5
6
.parent {
    display: flex;
    .last-box {

    }
}

CSS框架

30-seconds-of-css

TailwindCSS

  • Github 69.2k
  • 中文站
  • 原子风格：所有样式都基于 class，只需为 HTML 元素指定class，样式立刻生效
    • 比bulma更原子化
  • 它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类

bulma

daisyui

animate.css

postcss

emotion

styled-components

性能优化

  • 使用img图片比元素使用background(url)快
ChatGPT开源小程序