zqy233的前端学习笔记

主题

回到顶部
索引

基础属性

animation/transition

animation

是一个简写属性，用于设置六个动画属性：

属性名介绍
animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay规定在动画开始之前的延迟
animation-iteration-count规定动画应该播放的次数
animation-direction规定是否应该轮流反向播放动画

示例：

css
animation: showText 2s ease-in-out ifinite 5s;

animation: showText 2s ease-in-out ifinite 5s;

通过 @keyframes 规则，能够创建动画，原理是，将一套 CSS 样式逐渐变化为另一套样式

在动画过程中，能够多次改变这套 CSS 样式，如下，定义动画的开始时间和动画结束时间的css

css
 @keyframes showText {
    from {
      background-position-x: 0%;
    }
    to {
      background-position-x: 100%;
    }
  }
  @keyframes hideText {
    0% {
      background-position-x: 100%;
    }
    100% {
      background-position-x: 0%;
    }
  }

 @keyframes showText {
    from {
      background-position-x: 0%;
    }
    to {
      background-position-x: 100%;
    }
  }
  @keyframes hideText {
    0% {
      background-position-x: 100%;
    }
    100% {
      background-position-x: 0%;
    }
  }

transition

使用多个动画效果，使用逗号间隔即可

css
transition: transform 0.3s ease-out, width 2s ease-in;

transition: transform 0.3s ease-out, width 2s ease-in;

切换class可以触发transition动画

js
const white = document.querySelector(".white")
white.onclick = () => {
  white.classList.toggle("small")
}

const white = document.querySelector(".white")
white.onclick = () => {
  white.classList.toggle("small")
}

transition和animation的区别

1、transition 需要hover、class变化等触发，这就需要点击事件、鼠标移入事件等；而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画

2、transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等

3、transition关注的是样式属性的变化，属性值和时间的关系是一个三次贝塞尔曲线；而animation作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果

4、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了

文字

右端文字参差不齐

css
text-align: justify;

text-align: justify;

不换行

强制不换行

css
white-space:nowrap;

white-space:nowrap;

中文不换行

只对中文起作用，强制换行

css
white-space:pre-wrap;

white-space:pre-wrap;

英文数字不换行

只对英文起作用，以字母作为换行依据

css
word-break:break-all; 

word-break:break-all;

只对英文起作用，以单词作为换行依据

css
word-wrap:break-word;

word-wrap:break-word;

文本过长变成省略号

需要设置不换行，这样超出部分隐藏且以省略号形式出现

css
  width:100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  width:100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

英文文本大写

css
text-transform: capitalize; 

text-transform: capitalize;

icon和文字不对齐

可以使用vertical-align 指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐高度

css
i {
   font-size: 25px;
   vertical-align: -3px;
}

i {
   font-size: 25px;
   vertical-align: -3px;
}

文字间距

需要搭配padding-left一起使用，不然文字会偏左

css
letter-spacing: 20px;
padding-left:10px;

letter-spacing: 20px;
padding-left:10px;

滚动

滚动条样式

谷歌浏览器

css
/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
  width: 10px;
  heigth: 10px;
  background-color: #0099ff;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
  background-color: #fff;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #0099ff;
  /* box-shadow: inset 0 0 5px #0099ff; */
  /* background: linear-gradient(#00DBDE 0%, #FC00FF 100%); */
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
  height: 100px;
  background-color: #000;
}

/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
  width: 10px;
  heigth: 10px;
  background-color: #0099ff;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
  background-color: #fff;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #0099ff;
  /* box-shadow: inset 0 0 5px #0099ff; */
  /* background: linear-gradient(#00DBDE 0%, #FC00FF 100%); */
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
  height: 100px;
  background-color: #000;
}

ie浏览器

css
      /*滚动条箭头的颜色*/
      scrollbar-arrow-color: #49b1f5;
      /*滚动条滑块按钮的颜色*/
      scrollbar-face-color: #49b1f5;
      /*滚动条整体颜色*/
      scrollbar-highlight-color: #49b1f5;
      /*滚动条阴影*/
      scrollbar-shadow-color: #49b1f5;
      /*滚动条轨道颜色*/
      scrollbar-track-color: #fff;
      /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
      scrollbar-3dlight-color: pink;
      /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
      scrollbar-darkshadow-color: pink;
      /*滚动条基准颜色*/
      scrollbar-base-color: pink;

      /*滚动条箭头的颜色*/
      scrollbar-arrow-color: #49b1f5;
      /*滚动条滑块按钮的颜色*/
      scrollbar-face-color: #49b1f5;
      /*滚动条整体颜色*/
      scrollbar-highlight-color: #49b1f5;
      /*滚动条阴影*/
      scrollbar-shadow-color: #49b1f5;
      /*滚动条轨道颜色*/
      scrollbar-track-color: #fff;
      /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
      scrollbar-3dlight-color: pink;
      /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
      scrollbar-darkshadow-color: pink;
      /*滚动条基准颜色*/
      scrollbar-base-color: pink;

平滑滚动

a标签跳转时平滑滚动

html
<a href="#section2">点击我会平滑滚动到下面的第二章</a>

<a href="#section2">点击我会平滑滚动到下面的第二章</a>
css
html {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

滚动条隐藏

方法一，设置父盒子 overflow:hidden，子盒子 overflow:auto，设置子盒子的宽度比父盒子大，从而父盒子会遮住子盒子的滚动条

方法二，设置滚动条宽度为0，兼容性没有方法一好

css
 ::-webkit-scrollbar {
      width: 0px;
    }

 ::-webkit-scrollbar {
      width: 0px;
    }

滚动条不影响页面宽度

滚动条的显示和隐藏会改变页面宽度，切换频繁的情况下体验较差，使用以下css

css
overflow:overlay; 

overflow:overlay;

鼠标选中文本颜色

css
  ::selection {
      background: #3eaf7c;  /*选中背景色 */
      color: #ffffff;  /* 选中文字颜色 */
    }

  ::selection {
      background: #3eaf7c;  /*选中背景色 */
      color: #ffffff;  /* 选中文字颜色 */
    }

定位垂直居中

定位属性方法一

子绝父相，设置子元素top，left, right, bottom 都为0，margin: auto;

注意此类定位属性只对添加了position属性且值为非static的元素生效

css
        .father {
            position: relative;       
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .son {
            position: absolute;       
            top: 0;                   
            left: 0;                 
            right: 0;                 
            bottom: 0;                
            margin: auto;             
            width: 150px;
            height: 150px;
            background-color: pink;
        }

        .father {
            position: relative;       
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .son {
            position: absolute;       
            top: 0;                   
            left: 0;                 
            right: 0;                 
            bottom: 0;                
            margin: auto;             
            width: 150px;
            height: 150px;
            background-color: pink;
        }

定位属性方法二

子绝父相，top，left,都为50%；transform: translateX(-50%) translateY(-50%);

css
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      transform: translateX(-50%) translateY(-50%);
      background-color: pink;
    }

    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      transform: translateX(-50%) translateY(-50%);
      background-color: pink;
    }

行内元素

设置 line-height值等于父元素宽度

css
 .father {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background-color: red;
        text-align: center;
      }

      .son {
        padding: 10px 10px;
        display: inline;
        background-color: pink;
      }

 .father {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background-color: red;
        text-align: center;
      }

      .son {
        padding: 10px 10px;
        display: inline;
        background-color: pink;
      }

background

缩写 注意！缩写时使用background-size属性，则前面必须有/间隔符号，且必须设置background-position属性

css
background:#fff url(hero.jpg) no-repeat top right/cover;

background:#fff url(hero.jpg) no-repeat top right/cover;

全写

默认 background-position: 0% 0%;

css
background-color: #fff;
background-image: url(hero.jpg);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;

background-color: #fff;
background-image: url(hero.jpg);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;

border

设置四个角的border-radius

css
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 2px solid #999999;

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 2px solid #999999;

不同间距的border线

使用background-image模拟border

css
width: 100%;
height: 10px;
background-image: linear-gradient(
  to right,
  #ccc 0%,
  #ccc 50%,
  transparent 50%
);
background-size: 18px 1px;
background-repeat: repeat-x;

width: 100%;
height: 10px;
background-image: linear-gradient(
  to right,
  #ccc 0%,
  #ccc 50%,
  transparent 50%
);
background-size: 18px 1px;
background-repeat: repeat-x;

设置border导致字体缩进

js
text-indent:20px;

text-indent:20px;

css选择器

css奇偶选择

2n匹配0，2，4，6...，其中0匹配不到，所以也有严谨的写法为2n+2，即从2开始匹配

css
 /* 奇数 */
:nth-child(odd) {
}
:nth-child(2n+1) {
}
/* 偶数 */
:nth-child(even) {
}
:nth-child(2n) {
}
:nth-child(2n+2) {
}

 /* 奇数 */
:nth-child(odd) {
}
:nth-child(2n+1) {
}
/* 偶数 */
:nth-child(even) {
}
:nth-child(2n) {
}
:nth-child(2n+2) {
}

css倍数选择

3n匹配0，3，6，9...，其中0匹配不到，所以也有严谨的写法为3n+3，即从3开始匹配

css
:nth-child(3n) {
}
:nth-child(3n+3) {
}

:nth-child(3n) {
}
:nth-child(3n+3) {
}

first-child

有时候使用了:first-child后却发现没有效果，其实是因为用错了:first-child

css
<div>
    <h2>我是一个h2</h2>
    <p>我是一个p</p>
</div>
<style>
   p:first-child{
     color:#f00;
}
</style>

<div>
    <h2>我是一个h2</h2>
    <p>我是一个p</p>
</div>
<style>
   p:first-child{
     color:#f00;
}
</style>

会发现，p元素样式无效，这是因为div的第一个子元素不是p标签，而是h2标签，因此这种情况下其实是为选中到p标签的，应该使用first-of-type

first-of-type表示一组兄弟元素中其类型的第一个元素

css
<style>
/* 选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何 */
   p:first-of-type{
     color:#f00;
}
</style>

<style>
/* 选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何 */
   p:first-of-type{
     color:#f00;
}
</style>

calc

css计算属性，可以通过计算设置高度

css
height: calc(100vh - 80px);

height: calc(100vh - 80px);

border-box

padding不影响盒子宽高，作为width和height一起计算

css
box-sizing:border-box;

box-sizing:border-box;

vw，vh和%

vw和vh是直接相对于可视窗口

%是相对于父元素

:root

:root 表示一个HTML文档的根（顶级元素），所以它也被称为根元素，可以在根元素中定义变量，再在其他元素中使用

css
:root {
  --foo: #7F583F;
  --bar: #F7EFD2;
}
a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

:root {
  --foo: #7F583F;
  --bar: #F7EFD2;
}
a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

text-decoration

可以设置文本中一条线的位置，可以去除a标签下划线

html
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>
</html>

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>
</html>

好看的box-shadow

box-shadow参考网站

https://getcssscan.com/css-box-shadow-examples

浏览器兼容前缀

css
i:hover {
      -webkit-transform: rotate(540deg); /* Safari / Chrome */
      -moz-transform: rotate(540deg); /* Firefox */
      -o-transform: rotate(540deg); /* Opera */
      -ms-transform: rotate(540deg); /* IE */
      transform: rotate(540deg);
}

i:hover {
      -webkit-transform: rotate(540deg); /* Safari / Chrome */
      -moz-transform: rotate(540deg); /* Firefox */
      -o-transform: rotate(540deg); /* Opera */
      -ms-transform: rotate(540deg); /* IE */
      transform: rotate(540deg);
}

箭头绘制

css
i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

pointer-events: none

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。 元素应用了该 CSS 属性，链接啊，点击事件啥的都变成了 “浮云”。 pointer-events: none 的作用是让元素实体 “虚化”。 例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。 当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去

margin/padding

  • 属性值为4个时，对应 上 右 下 左
  • 属性值为3个时，对应 上 左右 下
  • 属性值为2个时，对应 上下 左右
  • 属性值为1个时，对应 上右下左

table

为表格设置合并边框模型：

css
table {
  border-collapse: collapse;
}

table {
  border-collapse: collapse;
}

如果thead和tbody数量不一致,表格的右下角会出现黑线,这是表格border的默认颜色

这时可以设置table的border颜色和表格td一致即可,示例:

css
table {
  border-collapse: collapse;
  border: 1px solid rgba(220, 229, 243, 1);
}
td {
   border: 1px solid rgba(220, 229, 243, 1);
}                                           

table {
  border-collapse: collapse;
  border: 1px solid rgba(220, 229, 243, 1);
}
td {
   border: 1px solid rgba(220, 229, 243, 1);
}

input

清除默认样式

css
input {
        border: none;
        outline: none;
        background-color: transparent;
        color: #000000;
        width: 244px;
      }

input {
        border: none;
        outline: none;
        background-color: transparent;
        color: #000000;
        width: 244px;
      }

placeholder字体颜色

input::placeholder

css
input::placeholder {
        color: #007a9f;
      }

input::placeholder {
        color: #007a9f;
      }

checkbox样式

不能直接使用css，而是使用after遮住原先的checkbox，给after设置样式

css
 input[type="checkbox"] {
        cursor: pointer;
        position: relative;
        width: 20px;
        height: 20px;
        margin: 2.5px 20px 0px 0px;
        font-size: 14px;
      }

      input[type="checkbox"]::after,
      input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: -2.5px;
        width: 25px;
        height: 25px;
        border: 1px solid #009cc3;
        border-radius: 7px;
        background-color: #004557;
      }
      input[type="checkbox"]:checked::after {
        content: "✓";
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

 input[type="checkbox"] {
        cursor: pointer;
        position: relative;
        width: 20px;
        height: 20px;
        margin: 2.5px 20px 0px 0px;
        font-size: 14px;
      }

      input[type="checkbox"]::after,
      input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: -2.5px;
        width: 25px;
        height: 25px;
        border: 1px solid #009cc3;
        border-radius: 7px;
        background-color: #004557;
      }
      input[type="checkbox"]:checked::after {
        content: "✓";
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

input type样式

html
    <div class="file-upload">
      <div class="file-upload-text">Upload 上传</div>
      <input name="upfile" class="file-upload-input" id="upfile" type="file" accept="image/*" />
    </div>
    <style>
      .file-upload {
        width: 100px;
        height: 40px;
        line-height: 40px;
        position: relative;
        overflow: hidden;
        border: 1px solid #0f996b;
        border-radius: 4px;
        font-size: 16px;
        color: #0f996b;
        text-align: center;
      }
      .file-upload-input {
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
        width: 300%;
        height: 300%;
      }
    </style>

    <div class="file-upload">
      <div class="file-upload-text">Upload 上传</div>
      <input name="upfile" class="file-upload-input" id="upfile" type="file" accept="image/*" />
    </div>
    <style>
      .file-upload {
        width: 100px;
        height: 40px;
        line-height: 40px;
        position: relative;
        overflow: hidden;
        border: 1px solid #0f996b;
        border-radius: 4px;
        font-size: 16px;
        color: #0f996b;
        text-align: center;
      }
      .file-upload-input {
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
        width: 300%;
        height: 300%;
      }
    </style>

input type=number上下箭头

css
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
        -webkit-appearance: none;
}
input[type="number"]{
   -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
        -webkit-appearance: none;
}
input[type="number"]{
   -moz-appearance: textfield;
}

transform

  • translate（平移）
  • skew（倾斜）
  • rotate（旋转）
  • scale（缩放）
  • matrix（矩阵操作，可涵盖前四者，威力十分强大）

matrix

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

  • 参数1 缩放比例

  • 参数2 z轴

  • 参数3 z轴

  • 参数4 z轴

  • 参数5 x轴位置

  • 参数6 y轴位置

这些值表示以下函数:matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

js
transform: matrix(0.46, 0, 0, 0.56, 468.391, 424.111)

transform: matrix(0.46, 0, 0, 0.56, 468.391, 424.111)

表格

设置表格宽高合并

colspan和rowspan

表格不能设置宽度无效

值描述
automatic默认。列宽度由单元格内容设定。
fixed列宽由表格宽度和列宽度设定。
inherit规定应该从父元素继承 table-layout 属性的值。

为table加入以下css

css
table-layout:fixed

table-layout:fixed

table-layout:fixed无效

th或td设置colspan后table-layout:fixed无效

回流（reflow）与重绘（repaints）

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流

回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算

CSS中的定位、隐藏

回流的危害在于重新对DOM树进行渲染，而脱离文档流之后，进行的任何操作，都不会造成回流！如果有需要经常进行复杂操作的地方，不妨使用position：absolute/fixed定位；或者是display：none，使之脱离文档流后进行操作，操作完成后再进入到文档流之中

CSS中的顽固属性

以下这些属性，只要是改动了他们的值，就会造成回流，建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）

脱离文档流

指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

怎么脱离文档流

  • float
  • absolute
  • fixed

css高度随宽度变化

https://m.qy.cn/jszx/detail/5262.html

Released under the MIT License.

Copyright © 2022.4-2024.7