CSS（一）：笔记文字超长省略号替代 white-space 空格和换行处理 HTML 代码的空格通常会被浏览器忽略。

文字超长省略号替代

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block; /* 或者其他合适的display值 */
    width: 200px; /* 根据需求调整宽度 */
}

white-space 空格和换行处理

HTML 代码的空格通常会被浏览器忽略。

<p>  hello   world  </p>
输出：
hello world

可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。

如果希望空格原样输出，可以使用 <pre> 标签。

<pre>  hello  world  </pre>

或者

<p>&nbsp;&nbsp;hello&nbsp;&nbsp;world&nbsp;&nbsp;</p>

CSS 提供了一个 white-space 属性，可以提供更精确一点的空格处理方式。

值	描述
normal	默认值，表示浏览器以正常方式处理空格。
nowrap	不会因为超出容器宽度而发生换行。
pre	按照`<pre>`标签的方式处理。
pre-wrap	基本还是按照`<pre>`标签的方式处理，唯一区别是超出容器宽度时，会发生换行。
pre-line	意为保留换行符。除了换行符会原样输出，其他都与 normal 规则一致

text-overflow 规定当文本溢出包含元素时发生的事情

值	描述
clip	默认值，修剪文本。
ellipsis [ɪˈlɪpsɪs]	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

拓展

letter-spacing 调整文字间距

letter-spacing: 10px;

text-shadow 应用于阴影文本

text-shadow: h-shadow v-shadow blur color;
text-shadow: 5px 5px 5px #FF0000;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

可以解决使用 font-weight: bold; 后字体跳动的问题

text-decoration 定义文字下划线

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

word-break

定义了如何处理过长的单词或字符串，当这些内容不能适应其容器宽度时，可以决定它们是否应该被断开以适应容器的尺寸

标题
normal	默认值，仅在允许的断点处断开单词
break-all	任何地方都可以断开单词，即使是在单词中间
keep-all	只有在空格或者连字符等明确的断点处才断开单词

<template>
  <div class="box">
    <span>一二三四五六七八九十</span>
    <span>aaaaaaaaaaaaaaaaaa</span>
    <span> bbb cccccc ddddd </span>
    <span>http://www.baidu.com;</span>
    <span>http://www.zhihui.com</span>
  </div>
</template>

<style scoped>
.box {
  background-color: skyblue;
  width: 100px;
  word-break: normal
}
</style>

normal：中文会换行，英文会在遇到空格后换行

break-all：只要宽度超出就换行

keep-all：只有遇到空格且宽度不够时才会换行，中文也是

word-warp

用于指定是否可以在长单词或URL内部插入换行符以防止内容溢出其容器。

标题
normal	默认值，仅在允许的断点处断开单词
break-word	在长单词或 URL 内部允许换行，以避免内容溢出其容器

break-word：不仅空格会换行，中文和长单词也会换行，永远不会超出容器宽度

总结：

word-break 控制单词内断行的规则，而 word-wrap（或 overflow-wrap）允许长单词或URL在必要时断行以防止溢出。

对于需要在任何位置都可能断开单词的情况，比如为了适应不同语言的需求，可以考虑使用 word-break: break-all

当你需要确保内容不会溢出其容器，同时又希望保持内容的可读性时，可以选择使用 word-wrap: break-word

CSS字体样式属性及文本外观属性

calc

使用 calc() 函数来计算主体元素的宽度

.test {
  width: calc(10px + 20px);
}

在 SCSS 中可以通过 #{} 语法将 SCSS 变量转换为 CSS 变量，然后使用加法运算符 + 和乘法运算符 * 来计算宽度值

$main-width: 100px;
$main-padding: 10px;

.test {
  width: calc(#{$main-width} + #{$main-padding} * 2);
}

li 标签修改原点颜色

li {
    list-style-type: none;
}
li::before{
    content: "\2022";
    color: "red";
    margin-right: 0.5em;
}

opacity 透明度

[əʊˈpæsəti]

/* 透明度，取值范围"0.0~1.0" */
opacity: 0.5;

scale 缩放

页面中最小的 font-size 是 12px，想再小只能用缩放 transform: scale(0.8);

backdrop-filter 背景模糊

利用它可以实现磨砂玻璃效果：

<!-- 父组件 -->
<template>
  <div class="box">
    <img alt="Vue logo" class="logo" src="@/assets/images/pic1.webp" width="125" height="125" />
    <div class="words">背景模糊</div>
  </div>
</template>

<style scoped lang="scss">
.box {
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .words {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    // 重点
    background-color: rgba($color: #fff, $alpha: 0.1);
    backdrop-filter: blur(5px);
  }
}
</style>

filter 与 backdrop-filter 非常类似，可以取的值都是一样的，但是 filter 是作用于整个元素，backdrop-filter 是只作用于元素后面的区域。

height 和 line-height

height

height 属性定义了一个元素的高度。它可以用来指定元素的总高度，包括内容、内边距（padding）、边框（border）的高度。height 可以用以下单位表示：

长度：如 px、em、rem 或 %。
视口单位：如 vh、vw。
百分比：相对于父元素的高度。

height 属性用于确定元素的尺寸，无论里面是否包含文本或其它内容。当元素内容超出指定的高度时，可能会导致溢出，这时候可以通过设置 overflow 属性来处理溢出内容。

line-height

line-height 属性定义了行之间的高度，即行间距。这个属性影响文本行的垂直空间，它决定了基线上方和下方的空间大小。line-height 可以用以下单位表示：

长度：如 px、em 或 rem。
数值：无单位的数字，表示字体大小的倍数。
百分比：相对于元素的字体大小。

p { 
    font-size: 16px; 
    line-height: 1.5; /* 字体大小的1.5倍 */ 
}

如果 line-height 小于 font-size，则在多行时会导致文字重叠。

<template>
    <div class="parent">
        哈哈哈哈哈哈哈哈哈哈哈
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 100px;
    font-size: 24px;
    line-height: 12px;
}
</style>

height 与 line-height 比较

<template>
    <!--10个哈-->
    <div class="parent">
        哈哈哈哈哈哈哈哈哈哈
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 100px; 
    /* width: 300px; */
    font-size: 16px;
    height: 50px;
    line-height: 30px;
}
</style>

当 height > line-height 时：height: 50px; line-height: 30px;
当 height = line-height 时：height: 40px; line-height: 40px;

这时候文字内容是相对 DIV 上下居中的。
当 height > line-height 时：height: 30px; line-height: 50px;
height 不设置：line-height: 30px;

height 跟随 line-height 及实际行数变化。

vertical-align

太难了，贴几个链接吧

zhuanlan.zhihu.com/p/30759026

zhuanlan.zhihu.com/p/25808995

www.jianshu.com/p/ce7e4a997…

水平和垂直居中的方法

一、水平居中

1、text-align

适用于父元素是块级元素（如 <div>、<p>、<section> 等），子元素是行内元素（如文本、链接、图片等）。

注意以下情况会导致 text-align 失效：

元素设置了 float
子元素设置了 position: absolute; left: 0;

如果子元素也是块级元素且设置了具体宽度：那么子元素不会居中，子元素内的行内元素会相对子元素居中。

<template>
    <div class="parent">
        <div class="children">测试</div>
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: blue;
    text-align: center;
}
.children {
    background-color: red;
    width: 100px;
    // margin: 0 auto;
}
</style>

加了 margin: 0 auto; 后：

一句话总结：text-align 适用于块级元素内的行内元素（包括文本）的对齐。

2、margin

margin: 0 auto; 进行水平居中只适用于有宽度的块级元素。

<template>
    <div class="parent">
        <div class="children">测试</div>
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: blue;
}
.children {
    background-color: red;
    width: 50%; // 或固定宽度
    margin: 0 auto;
}
</style>

3、position 和 transform

同 margin 一样，也适用于有宽度的块级元素。

<template>
    <div class="parent">
        <div class="children">测试</div>
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: blue;
    position: relative;
    // height: 50px;
}
.children {
    background-color: red;
    width: 30%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>

这里为什么没有蓝颜色呢？因为当一个元素使用 position: absolute; 时，它会从正常的文档流中移除，从而不影响其父元素的尺寸。可以理解为没有东西开撑开父元素。只需要给父 DIV 一个高度就行了。

加了 height: 50px; 后：

4、flex

display: flex; justify-content: center; 几乎适用于任何情况。

display: flex 会将自己变成块级元素，即宽度 = 父元素的宽度；将子元素变成块级行内块级元素，即用了多少宽度就是多少宽度（前提是没有其他的一些 flex 配置）

<template>
    <span class="parent">
        <span class="children1">测试1</span>
        <div class="children2">测试2</div>
    </span>
</template>

<style lang="scss" scoped>
.parent {
    background-color: blue;
    display: flex;
    justify-content: center;
}
.children1 {
    background-color: red;
    width: 100px;
    text-align: center;
}
.children2 {
    background-color: yellow;
}
</style>

二、垂直居中

1、height 和 line-height

仅对文本有效，且需要知道父元素高度

<template>
    <div class="parent">
        <span class="children1">haha</span>
        <img class="children2" >
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 300px;
    height: 50px;
    .children1 {
        background-color: red;
        line-height: 50px;
    }
    .children2 {
        background-color: blue;
        width: 50px;
        height: 30px;
        line-height: 50px;
    }
}
</style>

2、vertical-align: middle

待完善

3、position 和 transform

不需要知道父元素具体高度

<template>
    <div class="parent">
        <span class="children1">haha</span>
        <img class="children2">
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 300px;
    position: relative;
    .children1 {
        background-color: red;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .children2 {
        background-color: blue;
        width: 50px;
        height: 100px;
    }
}
</style>

小技巧：有时候 top、bottom、left、right、50%、-50% 搞不清楚，只要记住 top、left、-50% 这 3 个关键词就好。

上图仔细看会发现黄色比蓝色高一点点，蓝色高度是 100px，黄色高度是 103.73px，为什么黄色高度不是 100px？

因为默认情况下，HTML 元素（特别是 <div>）会有一些内部的间距（padding）效果或边框的高度。

4、position 和 margin

需要知道父元素具体高度

<template>
    <div class="parent">
        <span class="children1">haha</span>
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 300px;
    position: relative;
    height: 50px;
    .children1 {
        background-color: red;
        position: absolute;
        height: 20px;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}
</style>

5、flex 和 align-items: center

不需要知道父元素具体高度

<template>
    <div class="parent">
        <span class="children1">haha</span>
        <img class="children2" >
    </div>
</template>

<style lang="scss" scoped>
.parent {
    background-color: yellow;
    width: 300px;
    display: flex;
    align-items: center;
    .children1 {
        background-color: red;
    }
    .children2 {
        background-color: blue;
        width: 50px;
        height: 30px;
    }
}
</style>

5、grid

6、table-cell

border

// 画正三角
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

border-sytle

属性值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-radius

设置圆角

border-radius: 10px;

/* 将盒子变成圆形 */
border-radius: 50%;

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-left-radius：右下角

使用 border-radius 画圆

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db; /* 设置背景颜色 */
  border-radius: 50%; /* 使用 border-radius 创建圆形 */
}

box-shadow

盒子阴影

语法

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]

值	是否必须	描述
inset	可选	默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框）
offset-x	必选	设置水平偏移量，如果是负值则阴影位于元素左边
offset-y	必选	设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果（即四周都有阴影）
blur-radius	可选	模糊距离。值越大模糊面积越大，默认为0，不能为负
spread-radius	可选	阴影尺寸。取正值阴影扩大，取负值阴影收缩，默认为0
color	可选	阴影颜色

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

border-image

图形边界

参考资料

设置border-image后border-radius不生效的问题解决

解决方法：css 加上 clip-path: inset(0 round 10px);

outline

也是用来绘制元素边缘的，与 border 有些类似，但是也有很大的差别：

border 改变元素尺寸并影响布局，支持圆角和单独边设置；
outline 不占用空间，不影响布局，通常用于焦点或选中状态，且不支持圆角。

<template>
  <div class="box">
    <div class="box1"></div>
    <div class="split"></div>
    <div class="box2"></div>
  </div>
</template>

<style scoped lang="scss">
.box {
  border: 10px solid red;

  .split {
    height: 50px;
    background-color: yellow;
  }

  .box1 {
    width: 100px;
    height: 100px;
    border: 10px solid #000;
  }

  .box2 {
    width: 100px;
    height: 100px;
    outline: 10px dotted #000;
  }
}
</style>

outline 有 3 个属性 outline-color、outline-style、outline-width，可以分开写也可以一起写，先后顺序不限。

纯 CSS 画图形

三角形

border

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 0;
  height: 0;
  border: 100px solid #000;
}
</style>

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 0;
  height: 0;
  border: 100px solid #000;
  // 底线在 上、右、下、左
  border-color: transparent transparent #000 transparent;
}
</style>

clip-path

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 200px;
  height: 100px;
  background-color: #000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
</style>

clip-path『剪裁』，常用函数：

函数	描述	参数
circle()	创建一个圆形裁剪区域	参数是半径和圆心的坐标
ellipse()	创建一个椭圆形裁剪区域	参数是横轴和纵轴的半径以及圆心的坐标
polygon()	创建一个多边形裁剪区域	参数是构成多边形的顶点坐标
path()	使用 SVG 路径来定义裁剪区域	参数是路径的字符串表示形式

clip-path 功能很强大，这里不做具体研究。

甚至可以利用它实现动画效果

圆

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
}
</style>

椭圆

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 200px;
  height: 100px;
  background-color: #000;
  border-radius: 100px / 50px;
}
</style>

border-radius: 100px / 50px; 表示水平方向半径 100px，垂直方向半径 50px

平行四边形

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 200px;
  height: 200px;
  background-color: #000;
  transform: skew(20deg); /* 使矩形倾斜形成平行四边形 */

  margin-left: 200px;
}
</style>

梯形

<template>
  <div class="box">
  </div>
</template>

<style scoped lang="scss">
.box {
  border-bottom: 100px solid #000;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}
</style>