css 样式相关

css 的引用方式

1. 外联样式：通过 link 标签进行引入 css 样式，在引入的外部 css 文件中进行 css 的编写。
2. 内联样式：在当前文件中，在写入 style 标签中进行 css 的编写
3. 行内样式：在元素标签上通过，style=“” 进行 css 的编写。

<!-- 外联样式 -->
<link rel="stylesheet" href="./houdunren.css" />

<!-- 内联样式 -->
<style>
  h1 {
    color: white;
  }
</style>

<!-- 行内样式 -->
<h1 style="font-size: 100px">houdunren.com</h1>

CSS 变量相关使用

参考教程@阮一峰

MDN 官方文档

一、 变量声明

!!! 注意： 由于css作用域不同，一般建议在 :root 元素中声明全局变量，这样就可以全局使用变量

• css 变量又叫做 css 自定义属性
• 变量名必须以 -- 开头，用于标识 css 变量($ 用于声明scss变量; @ 用于声明 less变量)

注意： css 变量 大小写敏感， --header-color 与 --Header-Color 是两个不同的变量

:root {
  --cross_width: 450px;
  --cross_height: 450px;
}

二、var() 函数

1. 在声明了 css 变量时候，使用 var() 函数，可以引用变量

:root {
  --cross_width: 450px;
  --cross_height: 450px;
}

.cross {
  width: var(--cross_width);
  height: var(--cross_height);
}

2. var() 函数, 还可以接受第二个参数，作为默认值

• 当引用的变量不存在时,将使用第二个参数作为默认值

.cross {
  width: var(--cross_width, 300px);
  height: var(--cross_height, 300px);
}

注意，变量值只能用作属性值，不能用作属性名。

三、 变量类型

1. 如果变量类型是 字符串，可以直接与字符串拼接在一起
2. 如果变量类型是 数字，必须使用 calc() 函数

---------------------- 变量类型为字符串 ---------------------- .mask {
}
.cross {
  --cross_width: 450px;
  --cross_name: "hello";
}
.cross:after {
  content: var(--cross_name) "world";
}

---------------------- 变量类型为数字 ---------------------- .mask {
}

.cross {
  --cross_width: 450px;
  --cross_height: 450;
}

.cross_item {
  /* 无效 */
  height: var(--cross_height) px;
  /* 有效 */
  height: calc(var(--cross_height) * 1px);
}

注意： 如果变量值带有单位，就不能写成字符串

.cross {
  /* 无效 */
  --cross_width: "450px";
  width: var(--cross_width);
}
/* 有效 */
.cross {
  --cross_width: 450px;
  width: var(--cross_width);
}

四、变量作用域

1. css 变量在声明时，作用域为声明它元素的选择器中。

比如： 在 .cross 中声明了 --cross_width 变量，那么在 .cross 中可以使用这个变量

在 :root 中声明了 --cross_width 变量，那么在 .cross 中也可以使用这个变量

默认在 :root 中声明的变量为全局变量，可以在全局使用

:root {
  --cross_width: 450px;
  --cross_height: 450px;
}

.cross {
  width: var(--cross_width); // 在 .cross 中可以使用 --cross_width 变量
}

css 在 css 文件内部引入其他 css 文件

1. 通过 @import url(其他css文件路径); 来在 css 文件内部引入其他 css 文件;
2. 注意: 引入语句后一定要添加 ;

@import url('./common/hd.css');

@import

@import:url(common.css) screen; 第二个参数是设置设备类型

如果一个项目中需要引入多个 css 文件的时候有两种方式.

• 1. 在 html 文件中通过多个 link 标签引入 css 文件.
• 2. 创建一个公共的 css 文件, 并在改 css 文件中 通过 @import 语法将其他所有的 css 文件都引入该文件中,然后在 html 文件中通过一个 link 标签来引入这个公共的 css 文件.

@import:url(common.css) only screen and (mix-width:768px);

css 选择器

1. 相邻兄弟选择器 + : h1 + h2 ,只对 h1 后面紧挨着的 h2 元素生效(同级).
2. 兄弟选择器 ~ : h1 ~ h2 ,对所有 h1 后面的 h2 元素生效(同级).
3. 属性选择器 [属性名='属性值'] :只对拥有该属性和属性值的元素生效(所有).
   • 该选择器可以值填入属性名,不对属性值进行约束.
   • [属性名^='属性值'] : 对属性值以开头进行约束生效
   • [属性名$='属性值'] : 对属性值以结尾进行约束生效
   • [属性名*='属性值'] : 对属性值中任何位置只要包含所选关键词的元素都生效
   • [属性名~='属性值'] : 对属性值中包含所选关键词,且必须是一个独立单词的元素生效
   • [属性名|='属性值'] : 对属性值中包含所选关键词,且必须以 - 连接的元素生效

<h1 title="houdunren">后盾人</h1>
<h1 title="houdunren.com">houdunren.com</h1>
<h1 title="www. houdunren .com">www.houdunren.com</h1>
<h1 title="houdunren-com">houdunren-com</h1>

// 两个标签都有 title 属性,所以两个标签元素都会生效
h1[title] {
  color: white;
}
// 两个标签都以 houdunren 开头,所以两个标签元素都会生效
h1[title^='houdunren'] {
  color: white;
}
// 只有第二个标签以 com 结尾,所以只有第二个标签元素会生效
h1[title$='com'] {
  color: white;
}
// 所有标签中都包含 houdunren,所以对所有的标签都生效
 h1[title*='houdunren'] {
  color: white;
}
// 只有第三个标签 houdunren 是一个独立的单词,所以第一个和第三个标签都会生效
h1[title~='houdunren'] {
  color: white;
}
// 只有第四个标签 houdunren-com 以 - 连接,所以 第一个标签和第四个标签都会生效
h1[title|='houdunren'] {
  color: yellow;
}

伪类选择器

• :link a 标签默认样式
• :visited a 标签访问过后对元素生效
• :hover 鼠标悬浮到元素上时对元素生效
• :active 元素被点击时生效
• :foucs 元素获取焦点时生效

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

锚点

1. a 标签的 href=‘#id 选择器名称’ 配合 id 选择器使用
2. 需要使用锚点跳转的 target(目标)元素 要有和 href 属性一样的 id 选择器.

// 点击 a标签,可以跳转到第二个div元素. 此时第二个div元素就是 target(目标)元素.
<a href="#hdcms">锚点</a>
<div>后盾人</div>
<div id="hdcms">hdcms</div>

// 对跳转过后的 taget目标元素进行样式整改.
div:target {
  color: white;
  font-size: 30px;
  font-weight: bold;
}

:empty 空伪类选择器

1. 当选择器所选元素内容为空时生效.

// 因为第二个 li元素中没有内容,所以会被 :empty 伪类选择器选中,然后清除该li元素.
<ul>
  <li>houdunren.com</li>
  <li></li>
</ul>

li {
  border: 1px solid #ddd;
  color: red;
}

li:empty {
  display: none;
}

首尾元素伪类

• :first-child 表示所有元素中的第一个
• :first-of-type 表示该种类型种的第一个
• :last-child 表示所有元素中的最后一个
• :last-of-type 表示该种类型种的最后一个

根据元素编号灵活选择

• :nth-child(n) 表示选中 所有元素中的第几个元素
• :nth-of-type(n) 表示该种类型中的 第几个元素

// 偶数
:nth-of-type(2n) {
  color: yellow;
}
:nth-of-type(even) {
  color: yellow;
}
// 基数

:nth-of-type(2n - 1) {
  color: yellow;
}
:nth-of-type(odd) {
  color: yellow;
}

排除选择器

:not(:first-child) 表示排除第一个元素

表单伪类

• input:disabled 表示 input 元素禁用时生效
• input:enabled 表示 input 元素不禁用时生效
• input:checked 表示 input 元素选中时生效
• input:required 表示 input 元素必填时生效
• input:optional 表示 input 元素不必填时生效

// 整改 input 选中时,label 的颜色
<form>
  <input type="checkbox" id="box" />
  <label for="box">男</label>
  <input type="checkbox" id="girl" />
  <label for="girl">女</label>
</form>

 input:checked + label {
  color: green;
}

css 权重等级

• 通配符 * :0
• 标签名选择器: 1
• class 类选择器: 10
• id 选择器:100
• 行内样式:1000
• !import:10000

css font-family 字体

1. 一般一个项目会配置多个字体,是为了解决某些用户中没有个别字体的情况
2. 可以通过 css 中 @font-face 来引入我们自己想要的字体
   • format 属性是,指定引入字体的类型,以便于浏览器可以处理该种字体

 @font-face {
  font-family: 'myselfFont';
  src: url('./斗鱼追光体.otf') format('opentype');
}
body {
  font-family: myselfFont;
}

css 转换大小写

font-variant: small-caps; 小型大写
text-transform: uppercase; 大写
text-transform: lowercase; 小写
text-transform: capitalize; 首字母大写

css 文本缩进

text-indent:2em;
单位建议使用 em,可以理解为字体的宽度.(是以当前字体大小为基础)

p {
    font-size: 16px;
    text-indent: 2em;// 此时表示缩进两个字符
  }

css 文本排版方式

writing-mode: vertical-lr; //表示从左向右排列,默认的是从上到下排列

• 

css 隐藏 display 与 visibility的区别

1. display:none; 这中隐藏方式，会销毁所选元素，不会保留元素位置
2. visibility:hidden; 这种隐藏方式，不会销毁所选元素，会保留元素位置
   • visibility:hidden ,相当于给元素设置了一个 opacity:0; 的属性.

css fit-content

1. width:fit-content ;可以根据内容的长度来决定元素的宽度
   • 简单来说就是宽度自适应

css box-shadow

box-shadow: 10px 10px 8px rgba(100, 100, 100, 0.8);

• 阴影其实是元素在水平和垂直方向上的偏移量
• 属性从左到右依次是:
  • 水平偏移量 , 垂直偏移量, 阴影模糊程度, 阴影颜色

注意:如果没有水平垂直方向上偏移量,只有模糊程度的话,元素四周都会生成阴影.

box-shadow: 0 0 8px rgba(100, 100, 100, 0.8); 这样会生成一个四边阴影的元素

box-shadow 可以设置多组属性.

注意:多组属性之间使用 逗号',' 隔开

box-shadow: 10px 10px 8px rgba(100, 100, 100, 0.8) ,10px 10px 8px rgba(100, 100, 100, 0.8)

::before 和 ::after

1. 前缀伪元素和后缀伪元素,相当于在所选元素前添加了一个元素.
2. 可以对添加的 前缀伪元素和后缀为元素 当成一个行内块标签,普通元素可以进行的 css 设置,前后缀伪元素同样可以设置
3. 前后缀伪元素可以通过 content:attr(属性); 来获取所选元素的 标签属性.

h2::after{
  content:attr(title);  //获取 h2标签的 title属性
  content:attr(data-name);  //获取 h2标签自定义的 data-name 属性
  content:url(1.png);  // 添加图片

css postion 属性

static 定位(正常定位)

是元素 position 属性的默认值，包含此属性的元素遵循常规流 1。

relative 定位(相对定位)

postion 属性值为 relative(相对定位) 的元素在不设置 top、right、bottom、left 这些属性时，其自身在文档中的定位效果与 static 并无区别，通过 top,bottom,left,right 的设置相对于其正常（原先本身）位置进行定位。可通过 z-index 进行层次分级 。

• 会脱离文档流,但是为保留其在文档中的位置

absolute 定位(绝对定位)

absolute（绝对定位）与 relative（相对定位）之间的区别是：relative（相对定位）并没有脱离文档流，而 absolute（绝对定位）脱离了文档流；relative（相对定位）相对于自身在常规流中的位置进行偏移定位，而 absolute（绝对定位）相对于离自身最近的定位祖先元素的位置进行偏移定位。

• 脱离文档流,不保留其在文档流中的位置
• 会参照离自身最近的且拥有 position 属性的元素进行定位.
• 如果没有 设置 top right bottom left ,则 该元素会脱离文档流,保留在原来的位置.
• 如果元素没有设置 宽高的时候,可使用 position:absolute; 来设置元素的尺寸.

使用 绝对定位 实现 元素水平垂直居中

<div class="main">
  <div></div>
</div>

.main {
  width: 300px;
  height: 300px;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid tomato;
  // 如果不给父元素设置相对定位,子元素就相对于文档进行定位.
  position: relative;
}
.main div {
  width: 100px;
  height: 100px;
  background-color: pink;
  // 下面是关键代码
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
// 第二种居中方法
position:absolut;
top:50%;
left:50%;
transform:translate(-50%,-50%)

fixed 定位(固定定位)

fixed（固定定位）和 absolute（绝对定位）很像，但也有两点不同：absolute（绝对定位）相对于定位祖先元素进行偏移定位，而 fixed（固定定位）相对于窗口进行偏移定位；absolute（绝对定位）的定位祖先元素可以是相对定位的元素，而 fixed（固定定位）的定位祖先元素只能是窗口。

sticky 定位(粘性定位)

sticky（粘性定位）类似 relative 和 fixed 的结合，当元素设置 position 属性为 sticky 时，如果 top、right、bottom、left 四个属性都不设置具体值，sticky（粘性定位）不会生效，其表现效果与 static 一致 3。
当在 top、right、bottom、left 四个属性中至少设置一个具体值时，元素具备两种状态 — 类似 relative（相对定位状态）和类似 fixed（固定定位状态）。以 top:10px 为例 ：当元素相对于窗口顶部的距离大于 10px 时，元素处于类似 relative（相对定位状态），一旦元素相对于窗口顶部的距离小于或等于 10px 时，元素立马切换到类似 fixed（固定定位状态）

css 栅格系统

参考文章@后盾人

css transform 移动

transform 属性是给元素添加动作.

css transition 过度

transition 属性是给元素的动作添加过度的效果,使动作看起来更顺滑

transitionend 事件

css 提供的事件,当动画结束的时候可以触发该事件.

let div = document.getelementById('end')
div.addEventListener('transitionend',function(e)=>{
    console.log(e)
})

transition-timing-function:steps; 步进动画

transition-timing-function:steps; 该属性会给元素添加一个 类似于秒针停顿的过度效果

• 说白了就是类似于关键帧一样, 一帧一帧的动,给人一种停顿的感觉

css 关键帧动画

1. 先写一套由关键帧定义的动画 由 @keyframes name {}来定义
2. 使用 @keyframes 定义的动画,给需要动画的元素绑定 animation-name:name; 属性
3. 注意:每次动画结束后,元素都会回到最开始的位置,所以我们每次操作都是以原始位置为基础

在线教程文档@后盾人

移动的方块:

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

.box {
width: 400px;
height: 400px;
margin: 0 auto;
border: 1px solid #ddd;
}
.animation {
width: 100px;
height: 100px;
background-color: tomato;
animation: hd 2s;
}
// 定义关键帧动画
@keyframes hd {

// 两帧动画
/* from {
    background-color: tomato;
}
to {
    background-color: pink;
} */

// 多帧动画
        25%{
            transform: translateX(300px);
        }
        50%{
             transform: translate(300px,300px);
        }
        75%{
            transform: translate(0,300px);
        }
}

animation 添加多个动画

animation-name:name1,name2,name3;

• 1. 越往后添加的动画,权重越高,优先执行权重高的动画.
• 2. 也就是说,当不同的动画之间 属性重叠的时候,会优先执行后面添加的动画中的属性.

animation 同时声明关键帧规则

25%,75%{ } 这样写表示,25 帧和 75 帧时,动画的动作是一样的

animation 方向

css 响应式布局

1. 媒体设备使用详情

• style 默认为所有设备提供样式
• 可以在 style 标签中通过 media 属性指定设备

<style media="screen,print"></style>

css 媒体查询

参考文章@i小杨

::v-deep ,/deep/, >>> 三种样式穿透的区别

1. ::v-deep 用于sass
2. /deep/ 用于less
3. >>> 用于css

css 实现一个椭圆

给 元素添加 border-radius 属性, 值一定要为 百分比.

• 不设百分比

  • border-radius:100px;
  • 

• 设百分比

  • border-radius:50%;
  • 

css 实现水平垂直居中的方式。

• 参考文章@Link-L
• 参考文章@MomentYY

方法1：绝对定位 + translate //不需要设置父元素

 .son{ position: absolute;
               background: red;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);}
               
方法2: 父容器设置flex 布局 + 子容器设置margin: auto （推荐）能解决大多时候情况

  .father{
           display: flex;
           min-height: 100vh;  //=height:100%; 
       }
       .son {
           margin: auto;
       }
       
方法3：父容器设置flex 布局

 .father{
               display: flex;
               justify-content: center;/*水平居中*/
               align-items: center;/*垂直居中*/
               }
               
方法4:父元素相对定位，子元素绝对定位。

 .father{
        position: relative;
        width: 300px;
        height: 300px;
        background-color: skyblue;
        }

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

css—超出部分省略号显示（单行-多行）

单行超出显示省略号

.left-text-wrap {
  max-width: calc(100% - 180rpx);//固定宽度
  overflow: hidden;//超出隐藏
  text-overflow: ellipsis;//隐藏显示省略号
  white-space:nowrap;//强制文本不换行
}

多行文本显示省略号

.overflowTwo{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;//超出2行显示省略号，可修改数字
    -webkit-box-orient: vertical;
}

css flex:1 理解

flex：1 === flex：1 1 auto；

三个参数分别为：flex-grow flex-shrink flex-basis

• flex-grow: 定义项目得放大比例，默认为0 ，即如果存在剩余空间，也不放大；
• flex-shrink：定义项目得缩小比例，默认为1，即如果存在剩余空间不足，该项目将缩小；
• flex-basis：再给上面两个项目分配空间之前，计算项目是否有多余得空间，默认值为auto，即项目本身得大小；

css 实现 div铺满全屏

参考文章@gcy_rose

定位法:
<style>
     * {
            margin:0;
            padding:0;
        }
		.box{
            position:absolute;
            width:100%; 
			height:100%;
			background-color:blue;
		}
        /* 定位之后元素会缩放至内容得大小 ,即由内容撑开，所以必须设置
            width:100%; 
			height:100%;
        */
</style>
或:
<style>
     * {
           margin:0;
           padding:0;
     }
	.box{
           position:absolute;
           top:0;
           bottom:0;
           left:0;
           right: 0;
           background-color:red;
	}
</style>

css解决 margin 击穿问题

1、给父元素设置外边框（border）或者内边距（padding）(不建议)
2、触发BFC（推荐）

1. 子元素或者父元素的float不为none
2. 子元素或者父元素的position不为relative或static
3. 父元素的overflow为auto或scroll或hidden
4. 父元素的display的值为table-cell或inline-block

参考文章@南山行者

css 不继承父元素的 css 样式

参考文章@weixin_39861882
参考文章@普通网友

解决办法：

• 恢复单个属性样式
  • font-size: initial;
• 恢复所有属性样式
  • all: initial;

css 解决连续数字字母不换行问题

word-wrap: break-word;
word-break: break-all;

css 为控制继承提供了四个特殊的通用属性值，每个 css 属性都能使用这些值。

inherit:

• 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

initial:

• 将属性的初始值应用于元素。实际上，就是“重置为默认值”。

unset:

• 将属性重置为自然值，也就是如果属性是自然继承的那么就是 inherit ，否则和 initial 一样。

revert:

• 表示使用样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于 unset 。(属性值 revert 目前只有很少的浏览器支持)

css3 增加了 all 属性，其值可以是上面四个之一，表示重置元素所有属性的值重置为其初始值，或继承值。

css 解决 浮动布局

参考文章@前端史塔克

css 固定导航栏头部

使用 position：sticky； 属性
使用改属性的好处：

• 将position设置为sticky，那么头部组件还会占有着上方空间，所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性，那么body下面的组件也要算出导航栏的长度，再设置top属性，这样一来就麻烦了很多

参考文章@梁帆

给需要固定的 容器添加该属性:

position: sticky;
top: 0;

css 去掉table表单里面td之间的间距

1. 采用了网上普遍推荐的方法，即td显示左上两个边，table显示右下两个边，进而实现但边框表格效果。
2. 最后，我们在table中增加css代码：border-collapse:collapse;用来消除单元格间距。
3. 参考文章@柳絮独白

最初效果：

• 

最终效果

• 

table {

border-right: 1px solid #804040;

border-bottom: 1px solid #804040;

border-collapse:collapse;

}


table td {

border-left: 1px solid #804040;

border-top: 1px solid #804040;

}

css 解决table中td列内容过多的问题（table表格美化）

问题：

• 当 td 表格中的内容过多时,会导致表格布局发生变化
  解决办法：
• 当 td 表格中的内容过多时,显示省略号。
• 参考文章@摸鲨鱼的脚

css部分代码:

    table {
            table-layout:fixed;/*table的内部布局固定大小，才可以通过td的width控制宽度*/
            word-wrap:break-word; /*允许长单词换到下一行*/  //可以不加改行代码
        }


    table td {
      text-align: center;
      // word-break: break-all; word-wrap:break-word;
      white-space: nowrap;/*规定段落的文本不进行换行*/
      overflow: hidden;/*超出隐藏*/
      text-overflow: ellipsis;/*隐藏的字符用省略号表示  IE*/
      -moz-text-overflow: ellipsis;/*隐藏的字符用省略号表示  火狐*/
    }

css 清除 ul li 工程标记

list-style:none ;

css 不继承父元素的高度和宽度

1. 给子元素设置为行内块元素

display:inline-block;

css 滚动条样式

使用方式: 给添加了 overflow:auto; 的容器添加下面的类名.
参考文章@程平在掘金

.scroll {
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #e7eaf0;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #e1e1e2;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-button {
    background-color: red;
    display: none;
  }
}

<div class="scrollBox scroll"></div>

.scrollBox{ overflow:auto; }

css 拉伸 resize 属性 (实现可拉伸的尺寸)

resize生效的条件

• 不支持内联元素
• 如果是块级元素,需要 overflow 属性的计算值不是 visible.
  注意: 块级元素必须配合 overflow属性,才能生效

参考文章 @朝阳 39

<template>
  <div style="padding: 30px">
    <div class="box"></div>
  </div>
</template>

<style scoped>
  .box {
    overflow: hidden;
    resize: both;
    border: 1px solid red;
    width: 300px;
    height: 100px;
    min-width: 200px;
    max-width: 600px;
  }
</style>

span 标签内容左对齐

两个同行 span 标签,当内容换行后,内容左对齐.

给两个 span 标签的父元素添加如下属性

text-align: justify;

• justify 文字向两侧对齐，对最后一行无效。

<div class="title">
  <span>2024-01-10</span>
  <span>关于集团2023年度技能大师工作室的表彰决定</span>
</div>

<style>
  .title {
    width: 300px;
    text-align: justify; //  左对齐主要属性
    > span:nth-child(1) {
      margin-right: 10px;
    }
  }
</style>