Web前端之CSS层叠样式表相关案例

文章目录

一、CSS介绍
- 1、定义
- 2.特点及优势
- - 1）特点：
  - 2）优势：
二、基本语法
- 1）CSS页面引入
- - i、方法一：内联式
  - ii、方法二：嵌入式
  - iii、方法三：外联式
三、常用CSS样式
- 1、文本设置
- 2、颜色表示法
四、基本选择器
- 1、标签选择器
- 2.id选择器
- 3、类选择器
- 4.层级选择器
- 5.组选择器
- 6.伪类及伪元素选择器
五、盒子模型
六、CSS浮动
- 1.定义
- 2.浮动规则
- 3.清除浮动
七、典型布局案例
- 1、分页
- 2.导航条
八、总结

一、CSS介绍

1、定义

CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简单来说：CSS --层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML 元素,从而实现美化HTML网页。

2.特点及优势

1）特点：

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说，CSS具有以下特点：

丰富的样式定义。 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改。 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用。 CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠。 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩。 在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

2）优势：

为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

二、基本语法

1）CSS页面引入

格式：选择器（属性：值；属性：值；属性：值；…）

i、方法一：内联式

内联式:通过标签的style属性,在标签上直接写样式
< div style=“width:100px；height:100px：color:red”>…< /div>

简单代码如下：

DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>内联式引入</title>
</head>
<body><div style="color: red;font-size: 30px">内联式页面引入</div>
</body>
</html>

运行结果

注：这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使用这种方式来写样式。

ii、方法二：嵌入式

嵌入式:通过style标签,在网页上创建嵌入的样式表。
比较常用，需要写在head里。
< div>是最简单的标签选择器

简单代码如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>CSS简单案例</title>
<!--    CSS样式声明：写在head标签里面-->
<!--    1.div是最简单的标签选择器-->
<!----><style type="text/css">div{border: 1px solid red;width: 300px;height: 300px}</style>
</head>
<body><div ><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
</body>
</html>

运行结果

注：这种方法是比较常用的一种，一般在写首页的时候通常会用到这种方式，因为网站首页加载快慢会直接影响用户的体验，所以网页的加载速度就要快。那么这种方式不会影响加载速度，又将样式整合到了标签中，所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。

iii、方法三：外联式

外联式:通过link标签,链接到外部样式表到页面中。最常用，写在head里。

简单代码如下:

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>外联式引入样式</title><link rel="stylesheet" type="text/css" href="main.css">
</head>
<body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
</body>
</html>

运行结果

注意： 样式表位置建议写相对路径，CSS样式文件建议直接存到CSS目录中，创建一个CSS目录，再在里面创建一个main.css文件，用来编辑样式代码。

三、常用CSS样式

1、文本设置

2、颜色表示法

刚开始我们在模仿别人的页面去做的时候，如果看到人家用的好看的颜色想拿来用，直接看页面的源代码去找，箭头点击想要的颜色区域，右边查看源代码使用到的颜色。

关于CSS的样式有很多很多，用的时候去官网查看即可–菜鸟教程，W3C

简单的代码示例如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>CSS基本的样式</title><style type="text/css">a{/*去掉超链接的文本装饰下划线*/text-decoration: none;}ul>li{/*去掉列表的文本装饰的前面的点*/list-style: none;/*给列表每一行设置行高*/line-height: 30px;}</style>
</head>
<body><a href="#">百度一下
</a><ul><li>1</li><li>2</li>
</ul>
</body>
</html>

运行结果

四、基本选择器

1、标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。

举例:

简单代码如下：

*{margin:0;padding:0} <!--*表示对所有元素进行操作,外边距、内边距都设置为0-->
div(color:red)<div>...</div>   <!--对应以上两条样式-->
<div class="box">...</div>  <!--对应以上两条样式>

2.id选择器

通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

先设置标签的id号，再去使用id标签:

#box{color:red}<!--#后面加id名--><div id="box">...</div>  <!--对应以上一条样式，其它元素不允许应用此样式-->

简单的代码实现如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>CSS简单案例</title>
<!--    CSS样式声明：写在head标签里面-->
<!--    1.div是最简单的标签选择器-->
<!----><style type="text/css">div{border: 1px solid red;width: 150px;height: 150px}#box{border: 1px solid blue;width: 200px;}</style>
</head>
<body><div ><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div><!--设置div标签的id号信息为box-->
<div id="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div><div ><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
</body>
</html>

运行结果

中间突出的盒子为id选择器设置的样式。

3、类选择器

通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。

如：
定义：类名（样式设置）

red {color : red}
big {font-size : 20px}
mt10 {margin-top : 10px}

使用:

< div class= " red ">…< /div>
< h1 class="red big mt10 ">…< /h1>
< p class=" big mt10 ">…< /p>

简单代码示例如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><style type="text/css">table{/*    标签选择器*/border: 1px solid black;width: 50%;text-align: center;/*    如果是块级元素，居中：margin:0 auto如果是行级元素，居中：text-align:center*/margin: 0 auto;/*设置表格的上外边距*/margin-top: 90px;}#table_title{/*    id选择器，设置表格的表头*/font-weight: bold;color: blueviolet;font-size: 30px;}.odd{/*类选择器*/background-color: lightgray;}.odd:hover{/*    当鼠标经过odd类对应的标签时，元素的样式*//*    是原来字体的百分之120*/font-size: 120%;background-color: gray;}</style>
</head>
<body><table><caption id="table_title">表格标签</caption><tr><td>1-1</td><td>1-2</td></tr><tr class="odd"><td>2-1</td><td>2-2</td></tr><tr><td>3-1</td><td>3-2</td></tr><tr class="odd"><td>4-1</td><td>4-2</td></tr>
</table>
</body>
</html>

运行结果

图中颜色深的地方为鼠标经过时的样式。

4.层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.box span{color : red}
.box .red{ color : pink}
.red{color : red}

< div class=box"><span>...</span><a href="#" class="red">...</a>
</div><h3 class="red">...</h3>

5.组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box3{background:gold}<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>

简单案例如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box1,.box2,.box3{/*组选择器：逗号分割，多个选择器，如果有同样的样式设置，可以使用组选择器*/width: 100px;height: 100px;border: 2px solid;border-color: chocolate;}.box1{background-color: bisque;}.box2{background-color: beige;}.box3{background-color: antiquewhite;}</style>
</head>
<body><div class="box1">div1
</div>
<div class="box2">div2
</div>
<div class="box3">div3
</div>
</body>
</html>

运行结果

6.伪类及伪元素选择器

常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字'；} #经过盒子之前显示的信息
.box3:after{content:'行尾文字'；} #经过盒子之后显示的信息<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>

简单代码如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素选择器</title><style type="text/css">.box1,.box2,.box3{width: 100px;height: 100px;border: 2px solid;border-color: chocolate;}.box1{background-color: bisque;}.box2{background-color: beige;}.box3{background-color: antiquewhite;}.box1:hover{font-size: 150%;}.box2:before,.box3:before{/*before:所有选择的标签前面添加信息*/content: "行首文字";}.box3:after{/*after：后面添加信息*/content: "行尾文字";}</style>
</head>
<body><div class="box1">div1
</div>
<div class="box2">div2
</div>
<div class="box3">div3
</div>
</body>
</html>

运行结果

图中div1为鼠标经过时放大的样式。

五、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

Margin(外边距)–清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

比如：

那么盒子总宽度为: 300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px

代码为：

< div>这里是盒子内的实际内容。有25px内间距，25px绿色边框，25外间距。< /div>

再比如：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框 +下边框+上边距+下边距

代码为：

<style>
.ex
{width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>

<body>
<img src="250x250px.gif" width="250" height="250" >
<div class="ex">上面的图片是250px宽，这个元素的总宽度也是250px。</div>
</body>

简单的盒子实现代码：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">.box{/*    设置内边距为25px*/padding: 25px;/*    外边距为25px 让div块级元素居中*/margin: 25px auto;/*    设置边框为25px，颜色为绿色*/border: 25px solid greenyellow;/*设置盒子的宽度*/width: 200px;/*    文本居中*/text-align: center;}</style>
</head>
<body><div class="box">盒子模型
</div>
</body>
</html>

运行结果

盒子模型典型案例：实现电影简介界面的标签：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型案例</title><style type="text/css">.box,img{width: 232px;height: 322px;}.box{border:2px solid brown;}.detail{font-size: 12px;padding: 8px;margin: 0 auto;border: firebrick solid 2px;}</style>
</head>
<body>
<div class="box"><div class="taobao-image"><img src="./大圣归来.jpg"></div><div class="detail">大闹天宫后四百年多年，齐天大圣成了一个传说，在山妖横行的长安城，孤儿江流儿（林子杰 配音）与行脚僧法明（吴文伦 配音）相依为命，小小少年常常神往大闹天宫的孙悟空（张磊 配音）。</div>
</div>
</body>
</html>

运行结果

六、CSS浮动

1.定义

CSS的Float浮动，会使元素向左或向右移动，其周围的元素也会重新排列。浮动，往往是用于图像，但它在布局时一样非常有用。
float是css样式中的定位属性，用于设置标签对象（如：< div>标签盒子、< span>标签、< a>标签、< em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

2.浮动规则

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。

如下：

简单案例如下：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>CSS浮动</title><style type="text/css">.box,img{width: 126px;}.box{border:2px solid brown;/*让所有的div标签向左浮动，排在同一行*/float: left;/*    设置外边距*/margin: 5px;padding-bottom: 10px;}.detail{font-size: 12px;height: 20px;padding: 8px;margin: 0 auto;/*如果指定信息超出，那么则隐藏信息（使用hidden），此处作为一个滚动条查看（auto）*/overflow: auto;}</style>
</head>
<body><div class="box"><div class="taobao-image"><img src="./大圣归来.jpg"></div><div class="detail">大闹天宫后四百年多年，齐天大圣成了一个传说，在山妖横行的长安城，孤儿江流儿（林子杰 配音）与行脚僧法明（吴文伦 配音）相依为命，小小少年常常神往大闹天宫的孙悟空（张磊 配音）。</div>
</div><div class="box"><div class="taobao-image"><img src="./大圣归来.jpg"></div><div class="detail">大闹天宫后四百年多年，齐天大圣成了一个传说，在山妖横行的长安城，孤儿江流儿（林子杰 配音）与行脚僧法明（吴文伦 配音）相依为命，小小少年常常神往大闹天宫的孙悟空（张磊 配音）。</div>
</div><div class="box"><div class="taobao-image"><img src="./大圣归来.jpg"></div><div class="detail">大闹天宫后四百年多年，齐天大圣成了一个传说，在山妖横行的长安城，孤儿江流儿（林子杰 配音）与行脚僧法明（吴文伦 配音）相依为命，小小少年常常神往大闹天宫的孙悟空（张磊 配音）。</div>
</div>
</body>
</html>

运行结果

CSS浮动案例：电影排行页面显示

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>电影排行榜</title><style type="text/css">*{/*去除所有的内边距和外边距*/padding: 0;margin: 0;}.content{width: 300px;height: 200px;}img{width: 80px;height: 120px;float: left;}.content p{height: 120px;font-size: 12px;line-height: 20px;}</style>
</head>
<body><div class="content"><img src="./大圣归来.jpg"><p>大闹天宫后四百年多年，齐天大圣成了一个传说，在山妖横行的长安城，孤儿江流儿（林子杰 配音）与行脚僧法明（吴文伦 配音）相依为命，小小少年常常神往大闹天宫的孙悟空（张磊 配音）。</p></div>
</body>
</html>

运行结果

案例说明：当要浮动图片和文字时，只需要将页面浮动。

3.清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

案例：网站主页设计

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>网站主页设计</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 100%;border: 1px solid black;line-height: 150%;}.header,.footer{/*0.5em=8px*/padding: 0.5em;background-color: chocolate;color: yellow;/*清除向左浮动*/clear:left;}.left{border: 1px solid greenyellow;float: left;width: 20%;height: 100px;padding: 1em;}.content{float: left;width: 60%;height: 100px;padding: 1em;}</style>
</head>
<body>
<!--
网站主页：头部（header）主体部分：leftcontent尾部（footer）
-->
<div class="container"><div class="header"><h1 class="header">安安零食铺</h1></div><div class="left"><ul><li>辣条</li><li>膨化食品</li><li>麻辣鸭货</li><li>甜品</li></ul></div><div class="content"><h2>零食屋浏览导航</h2><p>饼干、糖果、巧克力、即食面等品种齐全，选择多样，价格低于市场。而且配有送货上门服务，只要您需要，只要您下单，我们马上送上门！</p></div><div class="footer">Created in 2020 by anning.</div>
</div>
</body>
</html>

运行效果

七、典型布局案例

1、分页

特征布局:翻页(所需知识点:盒子模型、内联元素)

在实现分页之前，先介绍一个属性；
display属性： 规定元素应该生成的框的类型
它的常用属性有：

值	相关描述
none	表示此元素不会被实现
block	表示此元素将显示为块级元素，此元素前后都会带有换行符
inline	默认的，此元素显示的是内联元素，元素前后没后换行符
inline-block	行内块元素。（CSS2.1新增的值）
list-item	此元素会作为列表显示

代码：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>分页案例</title><style type="text/css">*{margin: 0;padding: 0;}.container{/*    当块级元素要居中时，直接使用margin*/margin:0 auto;width: 50%;}.pagination>li{/*删除无序列表前面的标记*/list-style: none;/*行内块元素，即将元素改为一行内每个元素均为块元素*/display: inline-block;/*   设置宽度和高度 */width: 50px;/*设置字体大小*/font-size: 12px;/*字体居中*/text-align: center;/*添加边框*/border: 1px solid greenyellow;background-color: yellow;/*    设置内边距，上下为5px，左右为10px*/padding: 5px 10px;}.pagination>li>a{/*    删除超链接的下划线*/text-decoration: none;/*    设置字体颜色*/color: black;}.pagination>li:hover{background-color: gold;font-size: 14px;}</style>
</head>
<body><div class="container"><h1 style="text-align: center">分页案例</h1><ul class="pagination">
<!--        可以将上一页下一页改为小于大于号，&lt;表示大于，&gt表示小于--><li><a href="#">&lt;&lt;</a> </li><li><a href="#">1</a> </li><li><a href="#">2</a> </li><li><a href="#">3</a> </li><li><a href="#">...</a> </li><li><a href="#">18</a> </li><li><a href="#">19</a> </li><li><a href="#">20</a> </li><li><a href="#">下一页</a> </li></ul>
</div>
</body>
</html>

运行效果

可见，鼠标移动的过程当中字体和外框就会随之浮动变大，效果比较美观了。
注意:

有一个 & lt; & lt; 和 & gt; & gt;
这是 << 和 >>的转义字符，直接写<< 和>>是写不了的
padding 属性的默认值是有4个的，且该属性可以有1-4个值。

2.导航条

特征布局:导航条01(所需知识点:盒模型、行内元素布局)
特征布局:导航条02(所需知识点:盒模型、浮动、定位、字体对齐)

代码：

<!DOCTYPE HTML >
<html lang="en">
<head><meta charset="UTF-8"><title>导航栏案例</title><style type="text/css">*{margin: 0;padding: 0;}.container{margin: 0 auto;width: 100%;height: 40px;background-color: lightpink;overflow: hidden;}.leader>li{list-style: none;display: inline-block;background-color: lightpink;font-size: 20px;text-align: center;width: 100px;height: 40px;padding-top: 12px;}.leader li:hover{background-color: palevioletred;font-size: 23px;}.leader>li>a{text-decoration: none;color: black;}</style>
</head>
<body><div class="container"><ul class="leader"><li><a href="#">首页</a> </li><li><a href="#">网站建设</a> </li><li><a href="#">程序开发</a> </li><li><a href="#">网络营销</a> </li><li><a href="#">案例展示</a> </li><li><a href="#">联系我们</a> </li></ul>
</div>
</body>
</html>

运行效果

八、总结

1.CSS的三种引入方式：1）内联式<p style="font-size:20px;">...</p>2)嵌入式-在head中<style>p{font-size:20px}</style>3)外联式-也在head中<link rel="stylesheet" type="text/css" href="CSS/main.css"
2.CSS选择器1)标签选择器2）id选择器  #id名称{样式}3）class选择器  .类名称{样式}4）组合选择器  选择器1，选择器2{样式}5）层级选择器  .leader>li>a{样式} 或 .leader li a{样式}6）伪选择器 li:hover{}--鼠标经过的地方的设置   li:after{}---内容末尾添加内容  li:before{}---内容前面添加的内容
3.CSS中比较重要的设置1）居中时：-块级元素：margin:0 auto;-行内元素：text-align:center2)设置显示问题：display:inline-block,inline,block ---在块级元素内设置行内元素3）去掉相关文本装饰text-decoration:none ---去掉下划线list-style:none ---去掉默认乱序列表前的圆点4）盒子模型padding 内边距margin 外边距border 边框padding-top 上内边框padding-bottom 下内边框padding:0px 2px 3px 9px;--(上，右，下，左内边距）padding:0px 2px 3px;---(上，左右，下内边距）padding:0px 2px;---(上下，左右内边距）5)浮动设置浮动：float:right/left ---(向左或向右浮动)取消浮动： clear:right/left/both; --(清除向左/向右/两边的浮动)6）overflow:hidden;scroll;auto;--(隐藏超出边框的内容；滚动条显示隐藏内容；自动循环滚动隐藏内容）