李莎_20210112李莎

学员日志 580 2021年1月12日 0 云创动力

知识点总结

### 一、CSS

1.4 选择器

@TOC

1.4.4 ID选择器:网页标签ID与ID选择器同名，会适用此样式。ID要唯一

1.4.4.1 元素编号

与现实生活中每个人拥有一个唯一的公民身份号码(身份证编号)一样，
在HTML页面上每个元素都应该有一个唯一的编号，浏览器可以通过这个编号来管理该元素。
这个编号就是 元素编号，也称作 元素标识符 ( element identifier )
元素编号可以通过元素的 id 属性(attribute)来指定:

<div class="wrapper" id="first"> 
    <input type="text" name="wd" id="wd" > 
    <input type="submit" value="百度一下" id="button-baidu" > 
</div> 
<div class="wrapper" id="second"> 
    <input type="text" name="q" id="q" > 
    <input type="submit" value="360搜索" id="button-360" > 
</div>

作为元素标识符，我们应该尽力保证 id 属性取值的唯一性。

1.4.4.2 id selector

id 选择器也称作 id 选择符，英文中称作 id selector ，其基本用法为:

#elementId {
 
 }

其作用是选择页面上 id 属性(attribute)中等于指定值的元素。

1.4.5 伪类：网页元素的各种状态

a:link{ 
    color: #555555; 
    text-decoration: none; 
}
a:visited{ 
    color: #555555; 
}
a:hover{ 
    color: orange; 
    text-decoration: underline; 
}
a:active{ 
    color: red; 
}
a:link:未访问状态 
a:visited:访问过后状态 
a:hover：鼠标悬停状态 
a:active：激活选定状态 
注：定义顺序必须是此顺序 
/* :first-child 第一个子元素 */ 
    p:first-child{ 
        color: red; 
    } 
/* :last-child最后一个子元素 */ 
    p:last-child{ 
        color: red; 
    }

1.4.6 后代选择器又称为包含选择器:空格即代表是后代

/*后代*/ 
li span{
    color: #0000ff; 
}
li a{
    color: black; 
}
.mydiv a{ 
    
}
#div1 a{ 
    font-size: 30px; 
}
/*后代与伪类结合*/ 
li a:hover{ 
    color: red; 
}

<div class=”mydiv”> 
    <a href=”#”>是是</a> 
</div> 
<div id="div1"> 
    <a href="#">是是</a>
</div>

1.4.7 子元素选择器：直接子标签适用此样式

>是子选择器的标志 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
            h1 > strong {
                color:red;
            } 
        </style> 
    </head> 
    <body> 
        <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> 
        <h1>This is <em>really <strong>very</strong></em> important.</h1> 
    </body> 
</html>

子代选择器和后代选择器不同在于，只能出现在当前容器下的子类受用，不出现隔代继承。

1.4.8 通用(配)选择器

*{ 
    margin: 0; 
    padding: 0; 
}

1.4.9 组合选择器

li,p,#div1,.mydiv{ 
    font-size: 16px; 
    color: red; 
}

二、常用CSS属性

2.1 元素尺寸

元素尺寸设计元素宽度和高度两个属性。

2.1.1 宽度

在CSS代码中通过 width 属性可以控制元素的宽度，其用法为:

width : value ;

比如:

width : 500px ;

宽度取值可以使用像素为单位，也可以使用百分比，比如:

width : 50% ;

采用百分比时需要注意，元素的实际宽度都是相对于其父元素的宽度来确定的。

2.1.2 高度

在CSS代码中通过 height 属性可以控制元素的高度，其用法为:

height : value ;

2.2 边框 (border)

元素的边框涉及属性较多，不仅涉及粗细、样式、颜色等属性，
还可以针对某一条边来设置边框的粗细、样式、颜色等。

2.2.1 四周边框

所谓四周边框，就是批量设置四条边的边框，让四条边具有相同样式的边框。

2.2.1.1 四周边框粗细

批量设置四边边框粗细可以通过 border-width 属性来实现:

border-width : width ;

2.2.1.2 四周边框风格

批量设置四边边框风格可以通过 border-style 属性来实现:

border-style : none | solid | double | dotted | ... ;

2.2.1.3 四周边框颜色

批量设置四边边框颜色可以通过 border-color 属性来实现:

border-color : color ;

2.2.1.4 四周边框

批量设置四边边框的粗细、风格、颜色可以通过 border 属性来实现:

border : width style color ;

注意： border 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( color )
##### 2.2.2 顶部边框
所谓顶部边框，就是单独设置顶部的边框，让顶部边框具有独立的样式。
###### 2.2.2.1 顶部边框粗细
单独设置顶部边框粗细可以通过 border-top-width 属性来实现:
css border-top-width : width ;
###### 2.2.2.2 顶部边框风格
单独设置顶部边框风格可以通过 border-top-style 属性来实现:
css border-top-style : none | solid | double | dotted | ... ;
###### 2.2.2.3 顶部边框颜色
单独设置顶部边框颜色可以通过 border-top-color 属性来实现:
css border-top-color : color ;
###### 2.2.2.4 顶部边框
依次设置顶部边框的粗细、风格、颜色可以通过 border-top 属性来实现:
css border-top : width style color ;
注意 border-top 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
##### 2.2.3 底部边框
所谓底部边框，就是单独设置底部的边框，让底部边框具有独立的样式。
##### 2.2.4 左侧边框
所谓左侧边框，就是单独设置左侧的边框，让左侧边框具有独立的样式。
##### 2.2.5 右侧边框
所谓右侧边框，就是单独设置右侧的边框，让右侧边框具有独立的样式。
##### 2.2.6 圆角边框
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
这个属性允许你为元素添加圆角边框
例如：给div元素添加圆角的边框
css div { border:2px solid; border-radius:25px; }
#### 2.3 外边距
margin 属性设置元素的外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
##### 2.3.1 设置四周外边距
设置四周填充一致
css margin: value;
margin 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上和下一样，左和右一样（对称的值一样）
css margin: value1 value2 ...;
##### 2.3.2 让块元素横向居中显示
css margin: value auto;
##### 2.3.3 外边距折叠
理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。

<!DOCTYPE html> 
<html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
        .one { 
            margin-bottom: 50px; 
        }
        .two { 
            margin-top: 30px; 
        } 
    </style> 
    </head> 
<body>
    <div class="container"> 
    <p class="one">I am paragraph one.</p> 
    <p class="two">I am paragraph two.</p> 
    </div> 
</body> 
</html>

2.4 内边距(填充)

padding 属性设置元素的填充
内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框

2.4.1 设置四周填充

设置四周填充一致

padding: value;

padding 如果值超过一个，按上右下左的顺序渲染，如果缺省则上和下一样，左和右一样（对称的值一样）

padding: value1 value2 ...;

2.5 盒子模型

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

2.5.1 盒模型的各个部分

CSS中组成一个块级盒子需要:

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

##### 2.5.2 标准盒模型
在标准模型中，如果你给盒设置 width 和 height ，实际设置的是 content box。 padding 和 border再加上设置的宽高一起决定整个盒子的大小。
> 注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。
> 盒子的范围到边框为止 —— 不会延伸到margin。

2.5.3 替代（IE）盒模型

使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

.box { 
    box-sizing: border-box; 
}

注：一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。
（注：IE8+ 支持使用 box-sizing 进行切换）

2.5.4 盒子模型和内联盒子

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由 <span> 元素创建的那些内联盒子。
在下面的示例中，我们在一个段落中使用了 <span> ，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
        span { 
            margin: 20px; 
            padding: 20px; 
            width: 80px; 
            height: 50px; 
            background-color: lightblue; 
            border: 2px solid blue; 
        } 
    </style> 
</head> 
<body>
    <p> 
        I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. 
    </p> 
</body>

2.6 display

display 属性规定元素应该生成的框的类型。
display属性的值：

block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。
##### 2.6.1 使用display: inline-block
display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
一个元素使用 display: inline-block ，实现我们需要的块级的部分效果：
设置 width 和 height 属性会生效。
padding , margin , 以及 border 会推开其他元素。
但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大。
#### 2.7 背景样式
CSS background 属性是许多普通背景属性的简写。如果你在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值.
css .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; }
我们通过分开使用各个普通背景属性的方式，看一下在CSS中使用背景可以做哪些不同的事情。
##### 2.7.1 背景颜色
background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 <color>值。背景色扩展到元素的内容和内边距的下面。
元素的背景是元素的总大小，包括填充和边界（但不包括外边距）。
| 值 | 描述|
|--|--|
| color |指定背景颜色。eg: #567895 black rgb(255,255,255) rgba(255,255,255,.5) hsl(h 色相 0 到 360, s 饱和度 0% 为灰色， 100% 全色, l 亮度 0% 为暗, 50% 为普通, 100% 为白) hsla() |
|transparent|指定背景颜色应该是透明的。这是默认|
|inherit|指定背景颜色，应该从父元素继承|
##### 2.7.2 背景图片
background-image 属性允许在元素的背景中显示图像.
默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个background-color属性，看看效果如何。

2.7.2.1 控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
> background-repeat 是 background-repeat-x 和 background-repeat-y的简写
###### 2.7.2.2 调整背景图像的大小
background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景
你也可以使用关键字:
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
###### 2.7.2.3 背景图像定位
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
> 注意：默认的背景位置值是(0,0)

最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
你可以使用像 top 和 right 这样的关键字

background-position: top center;

或者使用长度值, and 百分比：

background-position: 20px 10%;

你也可以混合使用关键字，长度值以及百分比:

background-position: top 20px;

最后，您还可以使用4个值的语法来指示到盒子的某些边的距离:

background-position: top 20px right 10px; 
/* 将背景从顶部调整20px，从右侧调整10px */

注意： background-position 是background-position-x 和 background-position-y 的简写

2.7.3 渐变背景

渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置。
网上有许多渐变生成器，比如这个可以创建一个渐变，然后复制并粘贴生成它的源代码

linear-gradient 线性梯度渐变，延伸到整个盒子上

radial-gradient 有一个固定的大小，因此会重复
css background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
##### 2.7.4 多个背景图像
也可以有多个背景图像—在单个属性值中指定多个 background-image 值，用逗号分隔每个值
其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image ：
css background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;
##### 2.7.5 背景附加
另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由 background-attachment 属性控制的，它可以接受以下值:

scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。

fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。

local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。
##### 2.7.6 background-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
值：

border-box 背景延伸至边框外沿（但是在边框下层）

padding-box 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。

content-box 背景被裁剪至内容区（content box）外沿

text 背景被裁剪成文字的前景色(这是一个实验性的 API，请尽量不要在生产环境中使用它。)
##### 2.7.7 使用background 的简写
经常看到使用 background 属性指定的背景。这种简写允许您一次设置所有不同的属性。
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与size, repeat 方式等等。可以在一次声明中定义一个或多个属性： background-clip 、background- color 、 background-image 、 background-origin 、background-position 、 background- repeat 、 background-size ，和 background-attachment 。
对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。
语法如下：

在每一层中，下列的值可以出现 0 次或 1 次：

<attachment>

<bg-image>

<position>

<bg-size>

<repeat-style>

<bg-size> 只能紧接着 <position> 出现，以"/"分割，如： " center/80% ".

<box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 background-origin(原点位置) 和 background-clip 。如果出现 2 次，第一次的出现设置 background-origin ，第二次的出现设置 background-clip 。

<background-color> 只能被包含在最后一层。
#### 2.8 处理不同方向的文本
默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。
然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。
##### 2.8.1 什么是书写模式
CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换到另一种模式。

writing-mode 的三个值分别是：

horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

因此， writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

2.9 溢出的内容

我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。

<style> 
    .box { 
    border: 1px solid #333333; 
    width: 200px; 
    height: 80px; 
    } 
</style> 

<div class="box">
    这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多，就会出 现溢出的情况。如果溢出设置为隐藏，则任何溢出都将不可见。
</div> 

<p>此内容在方框之外。</p>

一个盒子，在块方向上已经受到 height 的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。
为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？
只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。

2.9.1 overflow属性

你可以用 overflow 属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 overflow-x 生效而第二个对 overflow-y 生效。否则， overflow-x 和 overflow-y 将会被设置成同样的值。例如， overflow: scroll hidden 会把 overflow-x 设置成 scroll ，而 overflow-y 则为 hidden。

2.10 CSS的值

2.10.1 长度

最常见的数字类型是 <length> ，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

2.10.1.1 绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。
|单位|名称 |
|--|--|
| cm | 厘米 |
| mm | 毫米 |
| Q | 四分之一毫米 |
| in | 英寸 |
| pc | 十二点活字 |
| pt | 点 |
| px | 像素 |
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。唯一一个经常使用的值，估计就是px(像素)。

2.11 修饰字体文字

color:字体颜色 

font-size:字体大小,通常用像素(px)来定义大小 

font-weight:字体粗细 

- bold 加粗 
- normal 正常 
- 100~900为字体指定了 9 级加粗度，数字 400 等价于 normal，而 700 等价于 bold 

font-famliy:字体 

- Serif 字体 
- Sans-serif 字体 
- Monospace 字体
- Cursive 字体 
- Fantasy 字体 

font-style:字体风格 

- normal - 文本正常显示 
- italic - 文本斜体显示 
- oblique - 文本倾斜显示 

text-decoration：字体加横线 

- none 无 
- underline 下划线 
- overline 上划线 
- line-through 贯穿线 
- blink 文本闪烁 

text-align:字体所处位置 

- left 
- right 
- center 
- inherit 继承父元素的text-align属性值 

line-height:行高，一般要纵向居中设置为 height 的高度 

text-indent:首行字的缩进 建议用em（缩进多少倍数）做为单位 

text-shadow：3px 4px 5px #AAA阴影 (CSS3的效果) 

- 3px向右偏移的像素值 
- 4px向下偏移的像素值 
- 5px 模糊效果 
- #AAA 阴影颜色

vertical-align 设置元素的垂直对齐方式。 

- baseline 默认。元素放置在父元素的基线上。 
- sub 垂直对齐文本的下标。 
- super 垂直对齐文本的上标 
- top 把元素的顶端与行中最高元素的顶端对齐 
- text-top 把元素的顶端与父元素字体的顶端对齐 
- middle 把此元素放置在父元素的中部。 
- bottom 把元素的顶端与行中最低的元素的顶端对齐。 
- text-bottom 把元素的底端与父元素字体的底端对齐。

/* 溢出文本处理 */ 
overflow: hidden; /* 溢出部分 隐藏 */ 
white-space: nowrap; /* 空白部分 不换行 */ 
text-overflow: ellipsis; /* 溢出的文本变成省略号 */

2.12 阴影

box-shadow 属性可以设置一个或多个下拉阴影的框

2.13 透明度

opacity 用于设置元素的透明度，值的范围是 0~1 。1 为不透明， 0 为完全透明

2.14 鼠标样式

cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair
用户也可以自定义一个鼠标样式:

cursor: url(xxx),auto;

2.15 修改滚动条样式

::-webkit-scrollbar 滚动条整体部分（宽高等） 
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是 垂直滚动条还是水平滚动条） 
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） 
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） 
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

/* 滚动条整体部分 */ 
.lyric-container::-webkit-scrollbar{ 
    width: 15px; 
    height: 15px; 
}
/* 定义滚动条的轨道颜色、内阴影及圆角 */ 
.lyric-container::-webkit-scrollbar-track{ 
    background: rgb(239, 239, 239); 
    border-radius:2px; 
}
/* 滚动条里面的小方块 */ 
.lyric-container::-webkit-scrollbar-thumb{ 
    background: #bfbfbf; 
    border-radius:10px; 
}
/*定义两端按钮的样式*/ 
.lyric-container::-webkit-scrollbar-button { 
    background-color:cyan; 
}
/* 滚动条里面的小方块鼠标悬停的样式 */ 
.lyric-container::-webkit-scrollbar-thumb:hover{ 
    background: #333; 
}

心得体会

今天是到西安学习的第二天，我们继续复习了前端CSS的部分相关知识，又重新复习了之前学过的知识，也接触到了部分新知识，html是一种标记语言，CSS是层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。学习CSS会使我们的网页更加美观，学习前端语言需要熟练掌握CSS，这是非常有必要的。

无奋斗，不青春。

2023年10月
一	二	三	四	五	六	日
« 9月
						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