CSS

1. css概念

CSS(Cascading Style Sheets) 层叠样式表(结构,表现,行为)中的表现

2. CSS引入方式*

2.1.行内样式

在开始标签上加style属性,样式值是style的属性值
直接使用标记的style属性
<div style=" width:100px; height:100px; background-color:#F00;”>hi</div>

2.2 内嵌式

所有的样式都写在<style></style>内,<style></style>一般放在<head></head>内

2.3 外链式

所有的样式均写到一个单独的文件内(该文件后缀名.css),通过
<link rel="stylesheet" href="文件.css" type=”text/css”>
来连接到html文件里。link标签一般放到head标签内部

2.4 导入式(了解)

使用@import指令可以将css文件中的css样式导入到不同的地方
    a. 导入式的结果和直接书写是同样的效果
    b.导入式可以共享样式代码
    c.可以在内嵌式里使用导入,也可在css文件中使用
    d.导入样式的使用方法
      @import url(“sheet1.css”);
      @import“sheet1.css”;

3. 样式优先级:(就近原则)

原则:谁离标签近,谁的优先级高

CSS语法规则

选择器{
    样式属性名 : 属性值 ;
    ...
}

4. CSS 选择器

基础选择器

  • 1.标签(元素)选择器
    标签名{ } ----------p{ } a{ }
  • 2.类选择器
    .类名{ }------------ .class{ }
  • 3.id选择器
    id值{ } ------------#id{ }
  • 4.通配符选择器(选择所有)
    *{ }

复合选择器

  • 5.后代选择器(包含选择器)
    选择符a 选择符b {规则} -----a b{ }
  • 6.直接后代(子元素)选择器
    选择器 a > 选择器b(选择器b必须是选择器a的子)
    .box>span
  • 7.分组选择器(逗号分开)
    div,span,p{ }
    1. 相邻兄弟选择器(+)
<style type="text/css">
            .main h1+p{
                background-color: #7FFFD4;
            }
</style>

<div class="main">
    <p>1</p>
    <h1>2</h1>
    <p>3</p>    //选中
    <h1>4</h1>
    <p>5</p>  //选中
    <p>6</p>
</div>
  • 9.伪类选择器
    a:link{color: #000000;} 访问前
    a:visited{color: #0000FF;} 访问后状态
    a:hover{ color: #00FF00;} 鼠标悬停状态
    a:active{color: #8A2BE2;} 鼠标激活状态

5. 选择器优先级:

权重:
着重! important;(10000)>内联样式(1000)>id(100)> class (10)>标签(元素选择器)(1)> 通配符(0.5)
! important;

易忘的css属性

div {
    cursor: pointer;
}

6. css长度单位

px和em

  • px,像素
      根据显示器分辨率的不同,像素的大小也是不同的
  • em,以当前字符的高度为基准
      如果当前字体的高度为12px,那么1em就是12px
      注意:一般以font-size为准,如果没有定义font-size,则以浏览器默认大小(16px)为准
  • cm/mm/pt/pc
      主要用在非显示器输出上,如打印
      如果网页在显示器上显示,则这些单位将转换为一定的像素显示,即长度也是依靠显示器分辨率的

7. css中颜色的表示

网页中颜色采用RGB模式显示(显示器)

1.RGB颜色在CSS中的表达方式

A.直接使用颜色的英文单词,如red
注意:很多浏览器不支持颜色的单词表示

1. 使用三色的数值,如rgb(120,222,100)

注意:数值在0~255之间
使用三色的百分比,如rgb(10%,20%,100%)
red rgb(255,0,0)    blue rgb(0,0,255)   black(0,0,0)
green rgb(0,255,0)   white rgb(255,255,255)

2. 使用三色数值的十六进制,如#0000ff

注意:推荐使用这种方式,十六进制值前加#
rgb red #ff0000 #f00    blue #0000ff #00f   black #000000 #000

8. css中字体样式 ( font )

1. font-family

指定字体
可以为文字指定多个字体,不同字体间用“,”隔开
字体名字中间有空格的,要用双引号引起来

2. font-size

字体大小
多用px/em单位

3. font-style

字体倾斜效果
normal不倾斜、oblique和italic****倾斜
Italic是使用文字的斜体,Oblique是让没有斜体属性的文字强制倾斜!

4. font-weight

字体粗细
大多浏览器可以实现:正常和加粗效果


image.png

9. 文本属性

1. text-indent

段落内容首行缩进(悬挂缩进)

2.字词间距
  • 英文文本
    letter-spacing 字母和字母间距 : normal / 数值
    word-spacing 单词和单词间距
  • 中文文本
    letter-spacing 字和字之间的间距

3. text-align

文本的水平位置

  • left,左对齐(默认值)
  • right,右对齐
  • center,居中对齐
  • justify,两端对齐
  • justify对于主要用于英文
    只能对多行中的非最后一行进行两端对齐

4. vertical-align

baseline/top/text-top/middle/bottom/.. 垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

  • text-transform

5.英文字母大小写转换

  • uppercase 全大写
  • lowercase 全小写
  • capitalize 首字母大写

6.text-decoration(下划线/中划线上划线)

文本的装饰效果

  • none 无修饰
  • underline 下划线
  • line-through 中划线/删除线
  • overline 上划线

7. overflow:

内容溢出处理

overflow: visible(默认)/ 溢出部分 可见
hidden(超出部分隐藏)/
scroll(出现滚动条)/
auto(浏览器自动处理)
text-overflow:clip(不显示省略标记,简单裁切) | ellipsis(文本溢出显示省略标记)文本溢出处理
white-space: normal / pre(空白被保留)/nowrap(不换行)/pre-wrap(只对中文起作用,强制换行)....
word-break:break-all(只对英文起作用,以字母作为依据,强制换行)/break-word(只对英文起作用,以单词作为依据,强制换行)
元素空白的处理

overflow-x:hidden;
overflow-y:scroll;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

1.单行超出隐藏

div {
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //用省略号显示
  white-space:nowrap; //不换行
}

2.多行超出隐藏

div{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
  -webkit-line-clamp:2; //显示的行数
}

3.表格中单行超出隐藏

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */}
td{
  width:100%;
  word-break:keep-all;   // 不换行
  white-space:nowrap;   // 不换行
  overflow:hidden;
  text-overflow:ellipsis;
}

4.css多行文本省略号,字母,数字不能变为省略号

在多行文本省略号的基础上添加 word-wrap:break-word;
( 通知浏览器不按单词处理元素)

b.兼容各种浏览器的方法
(1)利用伪类(IE6/IE7不支持)

  <style>
    .content {
      display: inline-block;
      width: 400px;
      height: 56px;
      line-height: 28px;
      margin: 50px 0 0 50px;
      border: 1px solid red
      overflow: hidden;
    }
    .ellipsis::after{
        content: "...";
        display: inline;
    }
  </style>
</head>
<body>
  <div class="app">
    <span class="content">你问我为何时常沉默,有的人无话可说,有的话无人可说.你问我为何时常沉默,有的人无话可说,有的话无人可说.
    </span>
    <span class="ellipsis"></span>
  </div>
</body>

(2)利用定位和padding-right

 <style>
    .content {
      width: 400px;
      height: 56px;
      line-height: 28px;
      margin: 50px 0 0 50px;
      border: 1px solid red;
      overflow: hidden;
      padding-right: 12px; /* 留出省略号位置 */
      position: relative;
    }
    .ellipsis{
        position: absolute;
        right:10px;
        bottom: 0;
    }
  </style>
</head>
<body>
  <div class="content">你问我为何时常沉默,有的人无话可说,有的话无人可说.你问我为何时常沉默,有的人无话可说,有的话无人可说.
    <span class="ellipsis">...</span>
  </div>

滚动条设置

/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 30px; /*对垂直流动条有效*/
    height: 20px; /*对水平流动条有效*/
}
/* 滚动条背景样式 */
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
    background-color: red;
    border-radius: 8px; 
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 7px;
    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    height: 5px;
    width: 10px;
    background-color:cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    /* border-radius: 50%; */
    background:khaki;
}

10. 伪类

  • :link 未访问状态
  • :visited 访问后状态
  • :hover 鼠标悬停状态
  • :active 鼠标激活状态

原则:
LoVe HAte 爱恨原则

11. display & visibility

display

CSS使用display设置的标签的显示方式

  • block ------- “块”元素(独占一行,可设置宽高)
  • inline -------- “行内”元素(多个元素占一行,不能设置宽高)
  • inline-block ------ 行内块元素(多个元素占一行,可以设置宽高)
  • none ------ 隐藏(空间释放)

<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容

visibility

visibility:hidden(元素不可见,但空间依然被占用)
visibility:visible(元素可见)

12. 盒子模型

a. border

边框的三个方面(webkit、firefox和ie)

  • border-width 边框宽度
  • border-color 边框颜色
  • border-style 边框样式

     none 无边框
     solid 实线
     dotted 点状线
     dashed 虚线
     double 双实线

缩写:

border : border-width值 border-style值 border-color值 ;
border-top
border-bottom
border-left
border-right

分开单独设置:

border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;

使用综合属性

border-left:1px #00F solid;
注意:三个值没有先后顺序,中间用空格隔开

b. padding(内边距)

边框和内容之间的空白宽度
缩写:

padding : 值 ;------ 四个内边距一样
padding : 值1 值2 ; -----值1代表上、下内边距,值2代表左、右内边距
padding :值1 值2 值3 ;--值1代表上内边距,值2代表左右内边距,值3代表下内边距
padding : 值1 值2 值3 值4 ; 值1代表上内边距,值2代表右内边距,值3代表下内边距,值4代表左内边距,按照顺时针方向,上右下左。

注意:这个部分只有空白,不能设置外观样式,颜色等,只能设置空白的宽度

padding的综合设置

例:padding:2px;(四个内边距都为2px)

padding的单边设置

例:padding-left:2px;(左边的边框和内容之间的距离为2px)

c. margin(外边距)

缩写: 同padding

margin : 值;
margin : 值1 值2;
margin : 值1 值2 值3;
margin : 值1 值2 值3 值4;
margin:0 auto; 块元素水平居中标签和它相邻的标签之间的空白宽度

外边距的设置是相叠加的

margin的综合设置

例:margin:10px;(和四边临近的标签的距离都为10px)

margin的单边设置

例:margin-left:10px;(标签距左边10px)

特别

<body>标签的margin代表内容与浏览器边框的距离

两个行内元素的margin-right和margin-left,采用“和”
两个块元素的marign-top和margin-bottom,采用“最大值”

13. background

a. background-color

定义标签的背景颜色

b. background-image

定义背景图片,可定义多背景
background-image: url(images/bg-hotlink.png);

background:red url(xx.png) no-repeat -200px 300px;

backgroung-color:red;
background-image: url(xxx.png);
background-repeat:no-repeat;
background-position:-200px 300px;

c. background-repeat

定义背景图片的显示方式

repeat,图片重复
repeat-x,图片横向重复
repeat-y,图片纵向重复
no-repeat,图片不重复

d. background-position

定义背景图片的位置
直接使用两个定位单词,例:background-position: right top;
使用x、y坐标,例:background-position: 20px 30px;

e. background-size

定义背景图片的大小

background-size: length | percentage | cover | contain;

cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。(可能会裁剪图片)
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(可能会出现空白)

f. background-origin

定义背景图片的渲染位置

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

g. background-attachment

定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment:fixed(固定)| scroll(默认)

14. 文档流

标准文档流”

Normal Document Stream
浏览器解析HTML代码的基本方式,根据标签的不同“display”来确定标签的定位和显示方式

image.png

15. Folat(浮动)

float:造成标签“浮动”,影响“文档流”的空间

float:left;“左浮动”
float:right;”右浮动”
none 默认 不浮动

folat浮动之后display自动变为block
对span元素添加一个float:left,span元素已经“块”化。

16. position(定位)

除了基于“文档流”的定位,CSS还定义了标签的其他定位方式,CSS使用position属性指定标签的定位方式

position的值

static 默认值,即使用基于“文档流”的定位
relative 相对定位,即在“文档流”的基础上,结合left和top属性,相对定位
absolute 绝对定位,即脱离“文档流”,并基于它的“包含框”,使用left和top属性来定位
fixed 固定定位,即特殊的绝对定位,即它的“包含框”为浏览器

a. position:relative;

relative 相对定位:相对于原来正常文档流的自己定位

注意
  相对与原来的位置,使用left,right进行偏移
  原来的位置对于后继元素的定位(float)依然有效
  对于使用float的元素,realative也同样起作用

b. position:absolute;

absolute 绝对定位

注意:
  绝对定位脱离了”文档流“,
  使用绝对定位时,注意找准”包含框“,即包含该标签,并且距它最近的父,position不等于static的标签
  如果没有,那么将以浏览器左上角为准来定位

特点:
  只定义position:absolute;没设置left和top,标签位置仍安“文档流”定位,但已经“脱离文档流”

b. position:fixed;

fixed(固定定位)
fixed 固定定位
始终相对于浏览器定位

17. 清除浮动

  浮动的元素会脱离正常文档流,释放空间不占用高度而浮于文档上方,使其父元素高度坍塌。常见情况有,下面的元素向顶部移动以及浮动导致父元素高度为零,这时就需要清除浮动。

清除浮动的4种方法:
  1. 给父元素手动添加 height
  2. 给父元素加overflow:hidden( 原理是voerflow会触发BFC(块级格式化上下文),BFC渲染页面的规则中,浮动元素也占用高度)
  3. 在所有有浮动的元素后加一个空元素,给此空元素加样式
    clear:both / left / right / none

clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 不浮动

  1. 给父元素加伪元素 ::after(给需要清除浮动的父元素,添加类名clearfix,在css中添加伪类)
.clearfix::after{ 
     display:block;
     content:""; 
     clear:both ;
}

clear清除浮动
例:

<style>
        .box{
            width:300px;
            height: 200px;
            background-color: #ccc;
        }
        .box::before{                      
            display: block;                     
            content:"哈哈哈哈";               
        }                               
        .box::after{
            display:block;
            content:"呵呵呵";
        }
伪元素清除浮动
.box{
    width:1000px;
    margin:0 auto;
    background-color: #ccc;
/*orerflow:hidden;*/
}
.box .left{
    float: left;
    width:300px;
    height: 200px;
    background-color: #f00;
}
.box .box2{
    float: left;
    width:500px;
    height: 100px;
    background-color: #00f;
}
.clearfix::after{
    display: block;
    content:"";
    clear:both;
}
</style>
</head>
<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="box2"></div>
    </div>
</body>

18. 列表样式

list-style

list-style-type 列表样式类型

  • none 无列表样式
  • disc 实心圆
  • circle 空心圆
  • square 实心方块
  • decimal 数字
list-style-image

列表样式图片
  url("图片路径")
  list-style-position
列表样式位置
  outside 样式在外侧
  inside 样式在内部
缩写
  list-style:none

opacity 不透明度

rgba(0,0,0,0.5)【只透明背景】
opacity【文字图片都透明】
取值范围 0-1
兼容ie8以下版本
filter:alpha(opacity=数值) 数值取值范围0-100

.box{
            /*display: none;*/
            /*opacity: 0;*/
            /*visibility: visible;*/
            visibility: hidden;
            width: 500px;
            height: 300px;
            background-color: rgb(255,0,0);
        }
        .box:hover{
            /*background-color: rgba(255,0,0,.4);*/
            opacity: 0.4;
            filter:alpha(opacity=40);
        }
        /*img{
            opacity:0.4; 
        }*/

列表样式

  • list-style-type: disc;实心圆
  • list-style-type: circle; 空心圆
  • list-style-type: none; 无样式
  • list-style-type: square; 实心方块
  • list-style-type: decimal; 阿拉伯数字
  • list-style-image:url("images/chui.png"); 列表样式图片
  • list-style-position: inside;
  • list-style:none;

盒子模型

W3C 盒子模型:
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content

image

IE 盒子模型:

image

和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。

box-sizing的使用
如果想要切换盒模型也很简单,这里需要借助css3的box-sizing属性

box-sizing: content-box --------是W3C标准盒子模型
box-sizing: border-box ---------是IE盒子模型
inherit:继承父元素的box-sizing

box-sizing的默认属性是content-box

弹幕标签marquee

marquee的作用是创建一个滚动的文本字幕

语法:<marquee>...</marquee>; 在标记“…”之间添加要进行滚动的内容。

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

<html>
<head>
<style type="text/css">
#dynamic_text
{
  width:740px;
  height:32px;  
  margin:20px auto 10px auto;
  border:1px solid gray;
  float:left;
}
</style>
</head>
<body>
<div id="dynamic_text">
<marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0" weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
    <p style="color:#1F202B;font-size:12px;font-family:宋体;">国务院教育督导委员会办公室主任、教育部教育督导局局长何秀超,教育部基础教育一司司长吕玉刚,湖南省人民政府副省长、秘书长向力力,中南大学党委书记高文兵、校长张尧学,教育部和湖南省相关部门负责人参加督查。</p>
</marquee>
</div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 713评论 0 0
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 273评论 0 1
  • # CSS样式规则overflow 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,005评论 0 1
  • 一、CSS简介 1、简单介绍 CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何...
    千年幸福论阅读 820评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,311评论 2 66