css基础

最新推荐文章于 2022-08-18 19:54:27 发布

元气满满的凡诚

最新推荐文章于 2022-08-18 19:54:27 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： css postcss html html5

本文链接：https://blog.csdn.net/FanCheng2017/article/details/116358325

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css基础

1 css简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

2 css语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
//选择器	属性  ：  值            声明
	h1{  color  :  blue ; font-size : 12xp ; }
	h1,h2 {  color  :  blue ; font-size : 12xp ; }
选择器通常是您需要改变样式的 HTML 元素。

多个选择器用 , 号链接。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

实例

css

css属性书写顺序

布局定位属性: display position float clear visibility overflow
自身属性: width height margin padding border background
文本属性: color font text-decoration text-align vertical-align white-space break-word
其他属性: content cursor border-radius text-shadow background:linear-gradient

css注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束
/*这是个注释*/

css覆盖性

当标签的css属性冲突的时候循序就近原则，当不冲突的时候会补充。

css继承性

子标签会继承父标签的某些样式，如文本和字号。

行高的继承性

body {
	font: 12px/1.5 MIcrosoft YaHei
}

行高可以跟单位也可以不跟单位

如果子元素没有继承行高，则会继承父元素的行高。

子元素的行高为当前子元素的文字大小*1.5

3 css选择器

特定的选择器可以控制选定标签中的格式。

3.1 id选择器(IS)

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id选择器只允许一个对象使用，其他对象不允许使用。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

ID选择器不要以数字开头，会有浏览器不起作用。

语法格式：#S {…}（S为选择器名）
#id  /* #用来表示这是一个id选择器*/
{
 text-align:center;
 color:red;
}

3.2 class选择器(CS)

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

语法格式：.S{…}（S为选择器名）
.center {			/*class选择器用.开头表示*/
    text-align:center;
}
class选择器不要以数字开头，会有浏览器不起作用。

3.3 标签选择器(ES)

标签选择器，又叫元素选择器，即以 html 标签作为 css 修饰所用的选择器。

语法格式：S{…}（S为标签名）

当出现并列两个相同名的选择器时，后一个会覆盖前一个。
h3{			/*h3为标签，选择相应html文件中的所有此标签*/
 color:red;
}

3.4 包含选择器(PS)

选择器选定特定结构：指定标签必须所包含在另一个指定标签中

语法格式：A B{…}（A、B为HTML元素/标签，表示对处于A中的B标签有效。）
<style>
p{					/*标签选择器，选择p标签*/
  color:red;
}
div p{				/*包含选择器。选择div标签中的p标签*/
  color:yellow;
}
</style>
<p>red text</p>	
<div>
  <p>yellow text</p>	
</div>

3.5 子选择器(SS)

类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"子孙标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为包含选择器对应的标签内部的标签.

语法格式**：A>B{…}**（A、B为HTML元素/标签）
<style>
div>p{		/*只选定div标签中的p标签，其他标签不受影响*/
  color:red;
}
</style>
<div>
  <p>red text</p>
  <table>
    <tr>
      <td>
        <p>no red text;</p>  
      </td>
    </tr>
  </table>
</div>

3.6 兄弟选择器(BS)

选择制定标签同为兄弟标签的标签

语法格式：A~B{…}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style>
div~p{			/*选择与div标签为兄弟标签的p标签*/
  color:red;
}
</style>
<div>
  <p>no red text</p>
  <div>no red text</div>
  <p>red text</p>
</div>

3.7 通用标签

语法形式为：*** {属性：属性值} **。它的作用是匹配 html 中的所有元素标签。
*{		/*匹配html中所有标签*/
    color:red;
}

3.8 复合选择器

可以通过标签和标签中的class，id属性定位到要设置的标签。

标签名.class属性名标签名#属性名

<style>
    p.ClassName {
        text-transform:uppercase;
    }
    p#IdName {							/*选择含制定id的标签*/
        text-transform:lowercase
    }
</style>

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	子孙后代	较多	空格 .nav a
子代选择器	选择最近一级元素	直系后代	较少	大于号 .nav > p
并集选择器	选择某些相同样式的元素	集体声明	较多	逗号 .nav，p
连接伪类选择器	选择不同状态的元素	链接	较多	重点:hover {}
：focus选择器	选择获取焦点的表单	表单	较少	input:focus {}

3.9 选择器权重

复合选择器会有权重叠加的问题。

权重只会叠加，不会进位。

选择器	权重	备注
继承或者 *	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式	1.0.0.0
!important 重要的	无穷大

4 css样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

4.1 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部(<head>标签中)：
<head>
<link rel="stylesheet" type="text/css" href="文档名.css(路径)">
</head>

浏览器会从 .css 文件中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

👊不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。
p {
    margin-left:20xp 
}

4.2 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表.
<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
	</style>
</head>

4.3 内联样式

在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。但是损失掉样式表的许多优势。
<p style="color:sienna;margin-left:20px;">内联样式举例</p>

4.4 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来(若是相同的属性将会以优先级高的覆盖优先级低的)。

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
/*外部样式表*/
h3
{
 color:red;
 text-align:left;
 font-size:8pt;
}
/*内部样式表*/
h3
{
 text-align:right;
 font-size:20pt;
}
/*实际h3的样式是：*/
color:red;
text-align:right;
font-size:20pt;		/*因为内部样式表的优先级会高于外部样式表，所以会被内部样式表覆盖相同属性。*/

4.5 多重样式优先级

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

5 Backgrounds(背景)

CSS 背景属性用于定义HTML元素的背景。

常用于超大的图片或者装饰的小图片，精灵图。非常容易修改位置。

属性	描述	备注
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

常见图片格式：

1.jpg图像格式：JPEG、(JPG)对色彩的信息保存较好，高清，颜色多，产品类的图片常用jpg格式。

2.gif图像格式：GIF格式最多只能存储256色，所有通常用来显示简单的图形及字体，但是可以保存透明背景和动画效果。用于小动画。

3.png图像格式是一种新兴的网络图形格式，结合GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。用于透明图片。

4.PSD图片格式是photoshop的专用格式，可以存储图层，通道，遮罩等多种设计稿。可以从上面直接复制文字，获得图片，还可以测量大小和距离。

5.1 背景颜色

background-color 属性定义了元素的背景颜色.
选择器 {background-color:颜色代码;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：#ff0000
RGB - 如：rgb(255,0,0)
颜色名称 - 如：red

例：
body {background-color:#e0ffff;}

5.2 背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

// 选择器{
	background-image:url('文件路径');
}

body {background-image:url('图片名.jpg');}

5.3 背景图像-水平或者垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

background-repeat:repeat-x; 设置背景图像只在水平平铺

background-repeat:repeat-y; 设置背景图片只在垂直平铺

background-repeat:no-repeat；设置背景图片不平铺
选择器
{
background-image:url('图片路径');
background-repeat:repeat-x;	//设置背景图像只在水平平铺
或者 background-repeat:repeat-y;	//设置背景图片只在垂直平铺
}

5.4 背景图像-设置位置

可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

background-position:right top; 设置图像位置：右方

background-position:center top; 设置图像位置：中间

background-position:left top; 设置图像位置：左方

background-position:横坐标px 纵坐标px 设置图像位置

background-position: 方向纵坐标px 混合使用

background-position: 横坐标px 方向混合使用

选择器{
    background-image:url('图像路径');		//设置背景图像
	background-repeat:no-repeat;		  //设置背景图像不重复
	background-position:right top;			//设置图片位置
}

5.5 背景图像-简写属性

可以将这些属性合并在同一个属性中.

选择器名 {background:颜色代码 url('图片路径') 设置是否以及怎样平铺 设置左右中间位置

例子：
//设置不重复平铺，且背景图片靠右
选择器 {background:#ffffff url('图片路径') no-repeat right top;}

5.6 背景图像-是否能随页面滚动

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment:scroll; 背景图片随着页面的滚动而滚动，这是默认的。

background-attachment:fixed; 背景图片不会随着页面的滚动而滚动。

background-attachment:local; 背景图片会随着元素内容的滚动而滚动。

background-attachment:initial; 设置该属性的默认值。

background-attachment:inherit; 指定 background-attachment 的设置应该从父元素继承。

5.7 背景图像-半透明

设置背景图像的颜色及透明度：

background: rgba(红度，绿度，蓝度，透明度)

5.8 background-size

background-size属性用来指定背景图像的大小：

可选：长度 | 百分比 | cover | contain
指定长度时，只指定一个数字，会等比例缩放。
百分比为父盒子的宽度和高度。只指定一个百分比，会等比例缩放。
cover把背景图片扩展至足够大，以背景图像完全覆盖背景区域。可能会显示不全。
contain把图像扩展到最大尺寸，以使高度或者宽度完全适应内容区域。可能会出现空白区域。

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

5# shadow(阴影)

可以使用box-shadow属性为盒子添加阴影。

可以使用text-shadow属性为文字添加阴影。

阴影不占用空间。

box-shadow： 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色；
text-shadow：  水平阴影位置 垂直阴影位置 模糊距离  阴影颜色；

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影改为内部阴影。

5.8 背景图片-精灵图

精灵图主要针对于背景图片的使用，把多个小背景图片整合到一整张大背景图片中，通过背景显示区域来减少向服务器发送次数。

移动背景图片使用： background-position属性。

移动距离就是这个目标图片的x,y坐标。一般情况是向上向左移动，一般是负值。

bacground-position: url(路径) x y ;

5.9 字体图标

展示的是图标，本质是字体。

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，选装等。
兼容性：几乎支持所有的浏览器。

使用流程：下载相应的字体图标 --> 放入根目录 --> 在css中声明引入

6 Text(文本)

所有文本属性：

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距(字母之间的间距)
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距(单词之间的间距)

6.1 文本颜色

颜色属性被用来设置文字的颜色。

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<style>
	body {color:red;}
	h1 {color:#00ff00;}
	h2 {color:rgb(255,0,0);}
</style>

6.2 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

<!--设置文本居中-->
选择器 {text-align:center;} 

<!--设置文本右对齐-->
选择器 {text-align:right;}

<!--设置文本左对齐-->
选择器 {text-align:left;}

<!--设置文本每一行被展开宽度相等（如杂志和报纸）-->
选择器 {text-align:justify;}

6.3 文本修饰

text-decoration 属性用来设置或删除文本的装饰。上划线，下划线，删除线。

text-decoration属性主要是用来删除超链接的下划线

<head>
	<style>
		a {text-decoration:none;} /*设置body标签中的超链接无下划线*/
	</style>
</head>

<body>
	 <a href="//www.runoob.com/">runoob.com</a>
</body>

<style>
选择器 {text-decoration:overline;}         /*设置文本上划线*/
选择器 {text-decoration:line-through;}		/*设置文本删除线*/
选择器 {text-decoration:underline;}		/*设置文本下划线*/
选择器 {text-decoration:none;}		/*设置文本无装饰(多用于删除超链接下划线)*/
</style>

6.4 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<style>
选择器 {text-transform:uppercase;}  /*设置文本全部大写*/
选择器 {text-transform:lowercase;}	/*设置文本全部小写*/
选择器 {text-transform:capitalize;} /*设置文本开头字母大写*/
</style>

6.5 文本缩进

文本缩进属性是用来指定文本的第一行的缩进

可以设置像素，也可以用百分比。

<style>
    选择器 {text-indent:缩进像素xp}  /*设置文本首行缩进的像素*/
</style>

6.6 文本间距

控制字符(字母)之间的间距：letter-spacing:间距px;（汉字多用于此）

控制字(单词)间距：word-spacing:间距px;

<style>
    选择器{
        letter-spacing:间距px;	/*设置字符(字母)之间的间距*/
        word-spacing:间距px;		/*设置控制字(单词)间距*/
    }
</style>

7 字体

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

7.1 字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字或者一个单词，它必须用引号，如Font Family：“宋体”。

<style>
    选择器 {font-family:"Times New Roman", Times, serif;}
</style>

7.2 字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

<style>
选择器 {font-style:normal;}   /*设置正常文本格式*/
选择器 {font-style:italic;}   /*设置斜体文本格式*/
选择器 {font-style:oblique;}   /*设置倾斜的文字文本格式*/
</style>

7.3 字体大小

font-size 属性设置文本的大小。

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

以像素设置字体大小

设置文字的大小与像素，完全控制文字大小

可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

<style>
	选择器{font-size:40px;}		/*以像素设置文字大小*/
</style>

以em来设置字体大小

1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

IE浏览器调整文本的大小时，会比正常的尺寸更大或更小。

<style>
	h1 {font-size:2.5em;} /*以cm来设置字体大小*/
</style>

以百分比和em组合设置字体大小

在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

8 链接

不同的链接可以有不同的样式

可以改变链接点击，未点击，鼠标选中时的：

文本颜色，背景颜色，字体，修饰，字体大小。

8.1 链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

使用的是伪类。且有使用顺序需要注意哦。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

选择器 :link - 正常，未访问过的链接
选择器 :visited - 用户已访问过的链接
选择器 :hover - 当用户鼠标放在链接上时
选择器 :active - 链接被点击的那一刻

注意：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
link和visited是常驻属性，而active和hover是常驻属性中的改变属性。(设置好link和visited后，只需要更改active和hover少量属性，发生动作时，就会在link和visited基础上做出改变。)

<style>
	a:link {color:#000000;}      /* 设置未访问链接颜色*/
	a:visited {color:#00FF00;}  /* 设置已访问链接颜色 */
	a:hover {color:#FF00FF;}  /* 设置鼠标移动到链接上颜色 */
	a:active {color:#0000FF;}  /* 设置鼠标点击时颜色 */
</style>

8.2 文本修饰

text-decoration 属性主要用于删除链接中的下划线：

<style>
a:link {text-decoration:none;}    /* 设置未访问链接无下划线 */
a:visited {text-decoration:none;} /* 设置已经访问链接无下划线*/
a:hover {text-decoration:underline;}   /* 设置鼠标放到连接上时有下划线*/
a:active {text-decoration:underline;}  /* 设置点击时有下划线 */
</style>

8.3 文本颜色

背景颜色属性指定链接背景色：

<style>
选择器 :link {background-color:#B2FF99;}    /* 未访问链接 */
选择器 :visited {background-color:#FFFF85;} /* 已访问链接 */
选择器 :hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
选择器 :active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>

8.4 创建高级按钮

利用所学知识，联合使用创建高级按钮

<style>
    /*设置常显示样式*/
a:link,a:visited					
{
	display:block;			/*规定应该生成框的类型*/
	font-weight:bold;			/*设置字体宽度*/
	color:#FFFFFF;			/*设置字体颜色*/
	background-color:#98bf21;			/*设置背景颜色*/
	width:120px;			/*设置宽度*/
	text-align:center;			/*设置文字对齐方式*/
	padding:4px;			/*设置所有内边距属性*/
	text-decoration:none;			/*去除装饰(下划线)*/
}
    /*设置因动作改变的样式*/
a:hover,a:active					
{
	background-color:#7A991A;			/*设置字体背景色*/
}
</style>

9 列表

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

9.1 设置有序，无序列表图标

list-style-type属性指定列表项标记的类型是

<style>
ul.a {list-style-type:circle;}       /*设置无序列表标志为空心圆*/
ul.b {list-style-type:square;}       /*设置无序列表标志为实心方块*/
    
ol.c {list-style-type:upper-roman;}       /*设置有序列表标志为罗马数字*/
ol.d {list-style-type:lower-alpha;}       /*设置有序列表为小写字母*/
</style>

9.2 设置图片为标志类型

列表项标记的图像，使用列表样式图像

<style>
ul 
{
	list-style-image:url('图片路径');
}
</style>

9.3 简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

list-style-type
list-style-position (设置标记位置inside,outside)
list-style-image

<style>
ul 
{			/*标记类型   位置      图片路径*/
	list-style:square inside url("sqpurple.gif");
}
</style>

10 表格

10.1 表格边框

设置表格中的边框

表格有双边框。这是因为th/ td元素有独立的边界,与table的边框相独立。

<style>
    /*设置表格外框*/
table {
	border: 1px solid black; /*简写样式 border 宽度 样式 颜色*/
}
    /*设置表头的边框*/
th{
	border: 1px solid black;
}
    /*设置单个表格的边框*/
td {
	border: 1px solid black;
}
</style>

10.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

使th/ td元素和table的边框折叠，设置为单一的边框。

<style>
table {
    border-collapse: collapse;		/*设置表格的边框是否被折叠成一个单一的边框或隔开*/
}
</style>

10.3 设置边框的宽高

Width和height属性定义表格的宽度和高度。

<style>
e
{
	width:宽度px;
    height:高度px;
}
</style>

10.4 设置文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

vertical-align属性设置垂直对齐属性

<style>
table
{
	text-align:right;		/*设置表格水平右对齐*/
}
td
{	
	vertical-align:bottom;   /*设置垂直对齐(bottom:把元素的顶端与行中最低的元素的顶端对齐。)*/
}
</style>

10.5 表格填充

表的内容中控制数据和边框之间的距离，应使用td和th元素的填充属性padding

<style>
td
{
	padding:填充距离px;   /*设置数据和边框之间的距离*/
}
</style>

10.6 表格颜色

设置边框颜色

<style>
table, td, th  
{
	border-color:red;     /*设置列表中所有边框颜色为红色*/
}

</style>

11 盒子模型

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

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

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

11.1 元素的宽度和高度

指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。

div {
    width: 220px;     /*设置内容高度*/
    padding: 10px;     /*设置内边框*/
    border: 5px solid gray;		/*设置边框*/
    margin: 0; 			/*设置内边框*/
}

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

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

12 边框(Border)

CSS边框属性允许你指定一个元素边框的样式和颜色。

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

12.1 border-style边框样式：

设置边框的样式

值	描述	备注
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框。
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。效果取决于边框的颜色值

12.2 边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

<style>
选择器{
	border-style:solid;
	border-width:5px;
}
选择器{
	border-style:solid;
	border-width:medium;
}
</style>

12.3 边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

12.4 单独设置各边。

在CSS中，可以指定不同的侧面不同的边框：

选择器{
	border-top-style:dotted;  /*设置上边框样式*/
	border-right-style:solid;  /*设置有边框样式*/
	border-bottom-style:dotted;  /*设置下边框样式*/
	border-left-style:solid;  /*设置左边框样式*/
}

border-style属性可以有1-4个值：

border-style:样式1 样式2 样式3 样式4;
上边框是样式1
右边框是样式2
底边框是样式3
左边框是样式4

border-style:样式1 样式2 样式3;
上边框是样式1
左、右边框是样式2
底边框是样式3

border-style:样式1 样式2;
上、底边框是样式1
右、左边框是样式2

border-style:样式1;
四面边框是样式1

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

12.5 border-radius(圆角边框)

border-radius: length;属性可以设置边框是圆角。

参数值可以是数值或者是百分比的形式。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
如果是个矩形，设置为高度的一半可以常用的圆角矩形盒子。
该属性是一个简写属性，可以是四个值，分别代表：左上角，右上角，右下角，左下角。
也可以是两个值，分别是对角线的两个值。

12.6 三角形

可以通过将盒子的高度和宽度调整为0，然后调整四个边框的颜色和大小，调整出需要的形状和颜色。

.borderN {
	height:0;   //设置高度为0
	width:0;	//设置宽度为0
	border-top: transparent solid 100px;
    border-left: springgreen solid 20px;
    border-right: rgb(0, 255, 76) solid 0px;
    border-bottom: rgb(255, 0, 64) solid 0px;
}

<div class="borderN">
</div>

13 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

也可以通过outline:none;来设置表单文本框选中时没有蓝色轮廓。

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit
outline-width	设置轮廓的宽度	thin medium thick length inherit

13.1 轮廓颜色

使用outline-color修改轮廓的颜色

<style>
选择器{
	outline-style:dotted;   /*修改轮廓的样式*/
	outline-color:#00ff00;	/*修改轮廓的颜色*/
}
</style>

13.2 轮廓的样式

通过outline-style来指定特定的轮廓样式。

<style>
选择器{
	outline-style:dotted;   /*修改轮廓的样式*/
}
</style>

13.3 轮廓的宽度

通过outline-width来修改轮廓的宽度。

值	描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
宽度px	规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

<style>
选择器{
	
	outline-style:solid;
	outline-width:thin;
}
</style>

14 外边距(margin)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

许多标签元素自带不同的外边距，且在不同浏览器中外边距还不一样。

* {       //清除外边距和内边距
    padding:0;
    margin:0;
}

值	说明
auto	自动，设置浏览器边距。这样做的结果会依赖于浏览器
宽度px	定义一个固定的margin（使用像素，pt，em等）
占比%	定义一个使用百分比的边距

14.1 设置单独方向的外边距

使用 margin-方向来设置单独方向的外边距

<style>
{
    margin-top:100px;   /*设置顶部外边距*/
    margin-bottom:100px;   /*设置底部外边距*/
    margin-right:50px;   /*设置右部外边距*/
    margin-left:50px;   /*设置左部外边距*/
}
</style>

14.2 简写margin设置

margin属性可以有1-4个值：

margin:样式1 样式2 样式3 样式4;
上外边距是样式1
右外边距是样式2
底外边距是样式3
左外边距是样式4
margin:样式1 样式2 样式3;
上外边距是样式1
左、右外边距是样式2
底外边距是样式3
margin:样式1 样式2;
上、底外边距是样式1
右、左外边距是样式2
margin:样式1;
四面外边距是样式1

14.3 外边框塌陷问题

对于两个嵌套关系(父子关系)的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

解决方案

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。

14.4 margin的负值问题

margin属性可以设置负值，负值可以调节左右元素边框的重叠问题。

15 填充(padding)

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

使用padding会撑开盒子，可以不设定盒子的宽和高，利用padding属性进行撑开操作，以达到每个盒子字数不同，内边距相同。

值	说明
宽度px	定义一个固定的填充(像素, pt, em,等)
占比%	使用百分比值定义一个填充

15.1 改变单独方向的填充

使用padding-方向来修改单独方向的填充。

<style>
选择器{
	padding-top:宽度px;		/*改变顶部填充*/
	padding-bottom:宽度px;		/*改变底部填充*/
	padding-right:宽度px;		/*改变右部填充*/
	padding-left:宽度px;		/*改变左部填充*/
}
</style>

15.2 简写padding设置

padding:25px 50px 75px 100px;

padding:25px 50px 75px;

padding:25px 50px;

padding:25px;

以上设置规律同 margin , border。

16 分组和嵌套选择器

在样式表中有很多具有相同样式的元素。

分组选择器,每个选择器用逗号分隔。

嵌套选择器可以使选择类别更具体，分化更细。

16.1 分组选择器

选择器1,选择器2,选择器3{
    color:green;
}

16.2 嵌套选择器

它可能适用于选择器内部的选择器的样式。

标签选择器.类选择器{
    text-decoration:underline;
}
标签选择器#id选择器{
    text-decoration:underline;
}

17 尺寸

尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

尺寸可以使用像素，百分比来设定尺寸。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

<style>
选择器{
	min-width:150px;
}
</style>

18 Display(显示)

display属性设置一个元素应如何显示.隐藏后不占用原来的空间。（none 为隐藏，block为显示）

visibility属性指定一个元素应可见还是隐藏。即使隐藏还会占用空间。(hidden为隐藏，visible为显示)

overflow 溢出显示隐藏但是只是对于溢出的元素进行处理。

18.1 隐藏元素

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会占有原来的位置。

<style>
选择器{visibility:hidden;} /*设置此元素为隐藏元素*/

选择器{visibility:visible;} /*设置此元素为显示元素*/
</style>

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。下面的元素会上移。

display:block; 转换为块级元素，同时还有显示元素的意思。

<style>
选择器{display:none;}/*设置此元素为隐藏元素*/

选择器{display:block;}/*设置此元素为显示元素*/
</style>

18.2 Display - 块和内联元素

块元素特点:

自己独占一行。
高度，宽度，外边距都可以控制。
宽度默认是容器(父类宽度)100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素不能使用块级元素。
<p>标签主要用于存放文字，不允许存放<div>标签，会出错误。

块元素的例子：

<h1>
<p>
<div>

行内元素特点：

相邻行内元素在一行上，一行可以显示多个。
高，宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素。

注意：

连接中不能再放链接。
特殊情况链接<a>里面可以放块级元素，但是转换一下块级模式最安全。

内联元素的例子：

<span>
<a>

行内块元素：

和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度，行高，外边距以及内边距都可以控制(块级元素特点)。

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块级元素	可以设置宽度和高度	它本身内容的宽度

18.3 改变元素的块和内联

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

把列表项改为内联元素：

<style>
li{display:inline;}
</style>

把span改为块元素

<style>
li{display:block;}
</style>

19 定位(position)

position 属性指定了元素的定位类型。定位 = 定位模式 + 边偏移

定位模式决定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。

position 属性的五个值：

static(静态)
relative(相对)
fixed(固定)
absolute(父)
sticky(粘性)

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

19.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。(标准流)

静态定位的元素不会受到 top, bottom, left, right影响。

19.2 fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

不会占用原来位置，会悬浮在上。(脱离标准流)

<style>
选择器{
	position:fixed;  /*设置position的属性将对应标签的内容固定在窗口前*/
}
</style>

19.3 relative 定位

相对定位元素的定位是相对其正常位置

<style>
选择器{
	position:relative; /*相对于正确位置进行移动*/
	left:50px;
}
</style>

19.4 absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:(最近的带有定位的父元素为基准)

绝对定位脱离标准流，不在占用原来的位置，后面的元素会补上去。

<style>
选择器{
	position:absolute;
	left:100px;    /*设置离父元素的位置*/
	top:150px;
}
</style>

子绝父相（子盒子绝对定位，父盒子相对定位）

父盒子需要占有原来的位置。

子盒子需要不影响其他子盒子的元素。

19.5 sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<style>
选择器{
  position: sticky;
  top: 0;			/*设置离顶部指定距离时黏贴*/
}
</style>

19.6 重叠元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

<style>
选择器{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>

19.7 定位扩展

绝对定位和固定定位也和浮动类似。

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给定宽度个高度，默认为内容大小。

浮动只会压住盒子，不会压住标准流盒子中的文字和图片。(浮动之所以不会压住文字，因为浮动产生的目的最初是伪类做文字环绕效果的，文字会围绕浮动元素。)

绝对定位(固定定位)会扎住下面标准流的所有内容。

如果一个盒子既有left属性也有right属性，则默认会执行left属性同理 top bottom 会执行top属性。

19.8 小三角

制作漫画语言框小三角的部分.

利用空盒子的四边其中的一边的边框来制作小三角。

		  height: 0px;   /*设置空盒子*/
          width: 0px;
          border: 10px solid transparent;  /*设置盒子的边框宽度和透明色*/
          border-bottom-color: yellow;		/*设置边框需要一边的颜色*/
		  position:;    /*设置元素定位方式*/

20 溢出元素(Overflow)

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器一定会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

20.1 visible

默认值,会溢出相应的元素位置。

这里的文本内容会溢出元素框。

<style>
选择器 {
    overflow: visible;
}
</style>

20.2 hidden

会将溢出内容修剪，无法显示。

这里的文本内容会溢出元素框。

<style>
选择器 {
    overflow: hidden;
}
</style>

20.3 scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。(不管修不修剪，都会默认显示滚动条)

这里的文本内容会溢出元素框。

<style>
选择器 {
    overflow: scroll;
}
</style>

20.4 auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(如果不修剪就不显示滚动条，如果修剪就显示滚动条)

<style>
选择器 {
    overflow: auto;
}
</style>

21 浮动(Float)

脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标).

如果父元素中全部子元素浮动，且父元素没有设置长宽高，则父元素中元素因为浮动使父元素高度变为0。

float属性用于创建浮动框，将其移动到一边，直到左边缘或者触及包含块或者另一个浮动框的边缘。

浮动元素会脱离标准流。

浮动的元素会一行内显示并且元素顶部对齐。

浮动的元素会具有行内块元素的特性。

属性	描述	值	备注
clear	指定不允许元素周围有浮动元素。	left right both none inherit
float	指定一个盒子（元素）是否可以浮动。	left right none inherit

21.1 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

浮动的盒子不再保留原先的位置。

浮动的元素会紧靠在一起，不会有缝隙。

21.2 标准流(普通流/文档流)

标签按照规定好默认方式排序。标准流是最基本的布局方式。

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.块级元素会独占一行，从上向下顺序排列。

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

21.3 浮动元素经常和标准流父级搭配使用。

先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

21.4 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

21.5 清除浮动

清除浮动的本质是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响到下面的标准流了。
清除浮动使用clear属性。

清除浮动的方法：

额外标签法，也称为隔墙法，是W3C推荐的做法。
父级元素添加overflow属性。
父级元素添加after伪元素。
父级元素是添加双伪元素。

1.清除浮动 ---- 额外标签法

是在浮动元素的末尾添加一个空的标签。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

这个空表标签必须是块级元素。

2 清除浮动 ---- 父级元素添加 overflow

可以给父级元素添加overflow属性，将其属性值设置为hidden,auto或scroll。

优点：代码简洁。
缺点：无法显示溢出的部分。

3 清除浮动 ---- :after伪元素法

:after 方式是额外标签的升级版。也是给父元素添加

优点：没有增加标签，结构更简单。
缺点：照顾低版本浏览器。

.id:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.id {
	*zoom: 1;
}

4 清除浮动 ---- 双伪元素清除浮动

是给父元素添加前后空标签。

代码更简洁。
照顾低版本浏览器。

.id:after,.clearfix:before {
    content:"";
    display:block; 
}
.clearfix:after {
    clear:both;
}
.id {
	*zoom: 1;
}

21.6 文本与浮动元素的关系

在一个盒子中，如果其中有盒子添加浮动后旁边的文本不会被遮盖住，而是会环绕浮动的盒子显示。

注意：如果文本过长，盒子长度放不开，不会围绕。

22 布局

通过不同方式实现网页内容的不同对齐

22.1 元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto; 。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

这是一个元素中的东西

<style>
.center {
    margin: auto;  /*设置元素居中*/
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
-----------------------------------------
<div class="center">
  <p>一些文本</p>
</div>

22.2 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

这是一些文本

<style>
.center {
    text-align: center;
    border: 3px solid green;
}
</style>
----------------------------------------
<div class="center">
  <p>文本居中对齐</p>
</div>

22.3 图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:


<style>
img {
    display: block;
    margin:  auto;
}
</style>

<img src="图片路径" alt="图片简称" style="width:40%">

22.4 左右对齐-使用定位

我们可以使用 position: absolute; 属性来对齐元素:

元素

<style>
.right {
    position: absolute;
    right: -50%;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
-------------------------------
<div class="right">
  <p>一些元素</p>
</div>

22.5 左右对齐-使用float方式

我们也可以使用 float 属性来对齐元素:

<style>
选择器 {
    float: right;  /* 设置左右对齐*/
}
</style>

22.6 垂直居中-使用padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

设置垂直居中

<style>
选择器 {
    padding: 20px 0;
    border: 3px solid green;
}
</style>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

22.7 垂直居中-使用Line-height

.center {
    line-height: 200px;/*设置行高为200*/
    height: 200px;/*设置元素高位200*/
    border: 3px solid green;
    text-align: center;/*设置文字居中*/
}

22.8 垂直居中-使用Position和transform

22.9 图片和文字水平对齐

vertical-align : 属性来设置对齐的样式。

此元素只对行内元素和行内块元素有效。

值	描述	备注
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。	常用
bottom	把元素的顶端与行中最低的元素的顶端对齐

22.30图片底侧空白缝隙

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方法： 1.给图片添加 vertical-align: middle | top | bottom属性。

2. 把图片转换为块级元素。 display:block.

23 组合选择符

组合选择符说明了两个选择器直接的关系。

23.1 后代选择器

选取指定父元素中指定子元素

div p  /*指定div标签中的p标签*/
{
  background-color:yellow;
}

23.2子元素选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

div>p    /*选择div标签中的子标签p标签*/
{
  background-color:yellow;
}

23.3 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

 div~p  /*指定div标签的兄弟标签p标签*/
{
  background-color:yellow;
}

24 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。更加具体的选择器控制。

伪类语法：

选择器：伪类 { css语句 }

选择器.类名：伪类 { css语句 }

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional]	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

25 伪元素

CSS伪类是用来添加一些选择器的特殊效果。更加具体的选择器控制。

伪类语法：

选择器：伪元素 { css语句 }

选择器.类名：伪元素 { css语句 }

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
::before	p:before	在每个元素之前插入内容
::after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

26 导航栏

导航栏(调整颜色背景，调整悬停效果)=链接列表

导航一
导航二
导航三
导航四

<body>
<ul>     <!--通用的导航格式-->
<li><a href="#home">导航一</a></li>
<li><a href="#news">导航二</a></li>
<li><a href="#contact">导航三</a></li>
<li><a href="#about">导航四</a></li>
</ul>
</body>

26.1 垂直导航栏

通过调整背景，取消列表标志，修改填充来美化导航栏


<style>
ul {
  list-style-type: none;  /*设置列表标志为空*/
  margin: 0;  /*设置外边距为0*/
  padding: 0;  /*设置填充为0*/
}

li a {
  display: block;  /*设置块*/
  width: 60px;  /*设置宽度*/
  background-color: red;  /*设置背景颜色*/
  text-decoration:none;		/*设置超链接没有下划线*/
    }
li a.active {
    background-color: red;/*设置点击后跳转完的背景颜色*/
    color: white;
}
li a:hover {
  background-color: #555;  /*设置悬停时的背景颜色*/
  color: white;
}
    
</style>
----------------------------------------------
<ul>     <!--通用的导航格式-->
<li><a href="#home">导航一</a></li>
<li><a href="#news">导航二</a></li>
<li><a href="#contact">导航三</a></li>
<li><a href="#about">导航四</a></li>
</ul>

26.2 全屏固定高度的导航栏

通过设置position: fixed; 属性实现导航栏固定在当前窗口。

26.3 水平导航栏

有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

display:block; /设置后，点击可跳转的不只是文本，变为整个元素/

内联列表项

<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline; /*设置li标签内联*/
}
</style>
----------------------------------------------
<ul>     <!--通用的导航格式-->
<li><a href="#home">导航一</a></li>
<li><a href="#news">导航二</a></li>
<li><a href="#contact">导航三</a></li>
<li><a href="#about">导航四</a></li>
</ul>

浮动列表项

<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left; /*设置浮动*/
}
a
{
	display:block; /*设置后，点击可跳转的不只是文本，变为整个元素*/
	width:60px;
	background-color:#dddddd;
}
</style>
----------------------------------------------
<ul>     <!--通用的导航格式-->
<li><a href="#home">导航一</a></li>
<li><a href="#news">导航二</a></li>
<li><a href="#contact">导航三</a></li>
<li><a href="#about">导航四</a></li>
</ul>

26.4 总结

list-style-type: none; 去除列表前的下表志

display: block;  让整体变为可点击链接区域（不只是文本），允许指定宽度。

li a:hover   鼠标移动到选项上修改背景颜色

position: fixed;   设置全屏高度的固定导航条

border-right: 1px 样式 颜色;  添加间隔线

27 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

下拉列表的关键是display属性的:hover的运用。

<style>
    .下拉按钮选择器 {
        color: 颜色;
        position: 定位类型;
        display:inline-block; /*设置按键为内联块元素，可以改变大小*/
    }
    .下拉内容选择器 {
        display: none;   /*设置下拉内容标签为不显示*/
  		position: absolute;   /*设置位置*/
  		background-color: #f9f9f9;   /*设置背景颜色*/
  		min-width: 160px;   /*设置下拉列表最小宽度*/
  		box-shadow: 0px 8px 16px 0px 			rgba(0,0,0,0.2);   /*设置阴影*/
  		padding: 12px 16px;   /*设置填充*/
    }
    .下拉按钮选择器:hover .下拉内容选择器{
        display: block;/*设置悬停的下拉按键显示*/
    }
</style>

<body>
    <div class="下拉按键">   
        <span>这是一个按键</span>
        <p class="下拉内容选择器">要下拉的内容</p>
    </div>
</body>

28 提示工具(Tooltip)

提示工具在鼠标移动到指定元素后触发,出现隐藏的提示框。

当用display:none -> display：block 默认出现在按钮的下方。

28.1 基础提示框

提示框在鼠标移动到指定元素上显示

<style>
.被提示文本的选择器 {
		position: relattive;  /*设置位置*/
		display:inline-block;  /*设置显示样式*/
		border-bottom: 1px dotted black; 
}
    /*选择被提示文本嵌套的提示信息*/
.被提示文本的选择器  .提示信息选择器 {
        visibility: hidden; /* 设置隐藏*/
        width: 120px;
    	background-color: black;
    	color: #fff;
    	text-align: center;
    	border-radius: 6px; /*设置提示信息框的圆角*/
    	padding: 5px 0;
    	position: absolute;
    	z-index: 1;  /*设置z轴位置悬浮于平面之上*/
    }
.被提示文本的选择器  .提示信息选择器{
        visibility: visible;/*将隐藏的提示信息显示*/
    }
</style>
<body>
    <div class="被提示文本的选择器">文本
        <span class="提示信息选择器"></span>
    </div>
</body>

28.2 控制出现位置

通过控制提示信息选择器中的right/left属性来控制提示信息出现的位置。

<style>
.被提示文本的选择器 {
		position: relattive;  /*设置位置*/
		display:inline-block;  /*设置显示样式*/
		border-bottom: 1px dotted black; 
}
    /*选择被提示文本嵌套的提示信息*/
.被提示文本的选择器  .提示信息选择器 {
        visibility: hidden; /* 设置隐藏*/
        width: 120px;
    	background-color: black;
    	color: #fff;
    	text-align: center;
    	border-radius: 6px; /*设置提示信息框的圆角*/
    	padding: 5px 0;
    	position: absolute;
    	z-index: 1;  /*设置z轴位置悬浮于平面之上*/
    }
 /*在选定标签选择器后添加*/
.被提示文本的选择器  .提示信息选择器:after{
        content: "";			/*与:after一起使用*/
    	position: absolute;/*父元素为基准*/
    	top: 100%;
    	left: 50%;
    	margin-left: -5px;
    	border-width: 5px;
    	border-style: solid;
    	border-color: black transparent transparent transparent;
    }
.被提示文本的选择器:hover  .提示信息选择器{
        visibility: visible;/*将隐藏的提示信息显示*/
    }
</style>
<body>
    <div class="被提示文本的选择器">文本
        <span class="提示信息选择器"></span>
    </div>
</body>

28.3 控制提示信息框箭头

提示信息框的箭头

<style>
.被提示文本的选择器  .提示信息选择器 {
        visibility: hidden; /* 设置隐藏*/
        width: 120px;
    	background-color: black;
    	color: #fff;
    	text-align: center;
    	border-radius: 6px; /*设置提示信息框的圆角*/
    	padding: 5px 0;
    	position: absolute;/*相比较父标签的位置*/
    	z-index: 1;  /*设置z轴位置悬浮于平面之上*/
    	right:100% /  left:100% 
        top:100%  /  bottom:100%    
            /*控制提示信息出现在左面还是右面*/
    }
</style>

28.4 淡入效果

设置提示信息的淡入效果

/* 淡入 - 3秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 3s;

29 图片廊

创建图片展示区。

本质上就是一个元素块中包含图片和介绍信息，添加悬停效果。


<style>
    /*设定包含图片的元素块*/
div.img {  
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
	/*设定元素块悬浮效果*/
div.img:hover {  
    border: 1px solid #777;
}
	/*设定图片大小*/
div.img img {
    width: 100%;
    height: auto;
}
    /*设定介绍文字的具体形式*/
div.desc {
    padding: 15px;
    text-align: center;
}
</style>
--------------------------------

<div class="responsive">
  <div class="img">
    <!--用超链接标签包裹图片标签，使图片具有超链接的作用-->  
    <a target="_blank" href="图片地址">
      <img src="图片地址" alt="图片文本描述" 		 width="300" height="200"> 
    </a>
      
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

30 图像透明/不透明

通过opacity:属性来控制元素的透明度。

也可以使用transition: opacity 时间s 来控制动作的时间效果。


<style>
img
{
	opacity:50%;
    transition: opacity 3s; /* 控制淡入效果*/	
}
img:hover
{
	opacity:1.0;	
}
</style>
--------------------------------
<p>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：</p>
<img src="图片地址" width="150" height="113" alt="klematis">

31 图像拼合技术

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

实质：将这样的图像分别显示一部分。通过固定元素的位置，移动元素背景图片来实现分别显示图片的一部分。


<style>
#列表选择器{
    position:relative;
    }
#列表选择器 li{
    margin:0;
    padding:0;
    list-style:none;  /*设置列表无开头符号*/
    position:absolute;
    top:0;
    }
#列表选择器 li, #列表选择器 a{
    height:44px;    /*设置元素的高度*/
    display:block;
    }
#li选择器{
    left:0px;
    width:46px;   /*设置元素宽度*/
    }
/* 设置常显示的图片*/
#li选择器{
    background:url(背景图片路径) 水平距离 垂直距离;
    }
/*设置鼠标悬停的图片*/    
#li选择器 a:hover{
    background: url(选中后背景图片路径) 水平距离 垂直距离;
    }
</style>
-------------------------------------------------------------
<ul id="列表选择器">
    
  <li id="li选择器"><a href="超链接地址"></a></li>

</ul>

32 媒体类型设置

媒体类型允许指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

@media 规则允许在相同样式表为不同媒体设置不同的样式。

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

<style>
@media 媒体类型
{
    修改类型
    }
</style>

33 属性选择器

选择特定属性的标签进行设置

[选择的内容] { 设置的内容 }

33.1 属性选择器


<style>
[title]     /*将含有title属性的标签文本颜色设置成蓝色*/
{
color:blue;
}
</style>
--------------------------------------
<h1 title="Hello world">Hello world</h1>

33.2 属性和值的选择器

选择特定属性和属性值的标签进行设置

[属性=值] { 设置内容 }


<style>
[title=value]  /*设置含有title属性并且值为value的标签*/
{
	border:5px solid green;
}
</style>
-------------------------------------
<a title="value"href="超链接路径">key  </a>

33.3 属性和值的选择器-多值

选择特定属性的标签进行设置

[属性~=值] 选择特定属性，且含有特定值

[属性|=值] 选择特定属性，且以特定值开头

<style>
[title~=hello]  
{
	color:blue;
} 
[lang|=en]
{
	color:blue;
}
</style>
--------------------------------------

34 表单

选择特定属性的标签进行设置

input[选择的内容] { 设置的内容 }

input[type=text] - 选取文本输入框

input[type=password] - 选择密码的输入框

input[type=number] - 选择数字的输入框


<style>
input[type="text"]  /*选择表单中的输入文本框*/
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}
</style>
---------------------------------
<input type="text" name="name" value="values" size="20">

34.1 输入框聚焦

输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式：

transition: 过渡效果的 CSS 属性的名称 1s; 设置过度时间。如果不限定则范围为全部。

<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  
}
input[type=text]:focus {
  background-color: lightblue;
}
    </style>
-----------------------------------------------
<form>
  <input type="text" id="fname" name="fname" value="input………">
</form>

34.2 输入框(input) 图标

输入框中添加图标。

background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间。

placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。


<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px; /*设置边框尖锐度*/
  font-size: 16px;
  background-color: white;
  background-image: url('https://static.runoob.com/images/mix/searchicon.png');
  background-position: 10px 10px;  /*设置背景的位置*/
  background-repeat: no-repeat;  /*设置背景图不能重复*/
  padding: 12px 20px 12px 40px;  /* 设置左边距，使图片与输入光标有距离*/
}
</style>
-----------------------------------------------
<form>
  <input type="text" name="search" placeholder="搜索..">
</form>

34.3 动作相应的输入框

使用 :focus 选择器可以设置输入框在获取焦点时的样式：


<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://static.runoob.com/images/mix/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;  /*设置填充，为背景图片预留出位置*/
  transition: width 1s ease-in-out;  /*设置宽度过渡的时间为1秒*/
}

input[type=text]:focus {
  width: 100%;
}
</style>
-----------------------------------------------
<form>
  <input type="text" name="search" placeholder="搜索..">  <!--placeholder设置预留提示信息，点击后会消失替换为文本。-->
</form>

34.4 textarea文本框样式

使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

border-radius: xpx; 设置边框角的尖锐度。

<style>
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;   /*设置文本框能否重置*/
}
</style>
---------------------------------------------
<form>
  <textarea>一些文本...</textarea>
</form>

34.5 下拉菜单（select）样式


<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;   /*设置边框尖锐度*/
  background-color: #f1f1f1;
}
</style>
------------------------------------
<form>
  <select id="country" name="country">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  </select>
</form>

34.6 按钮样式


<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;   /*设置鼠标接触时光标的变化样式*/
}
</style>
----------------------------------------
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">

35 计时器

CSS 计数器通过一个变量来设置，根据规则递增变量。

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

35.1 并列计数器


<style>
body {
  counter-reset: 计数器名字;
}

h2::before {
  counter-increment: 计数器名字;
  content: "前面的元素" counter(计数器名字) ":后面的元素";
}
</style>
---------------------------------------------------
<h2>第一个</h2>
<h2>第二个</h2>

35.2 嵌套计数器


<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "前元素 " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
-----------------------------------------------
<h1>大标题</h1>
<h2>小标题</h2>
<h2>小标题</h2>
<h1>大标题</h1>
<h2>小标题</h2>
<h2>小标题</h2>

<h1>大标题</h1>
<h2>小标题</h2>
<h2>小标题</h2>

36 布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

36.1 头部

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：


<style>
/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
  height:100px;
}
</style>
--------------------------------------------
<div class="header">
  <h1>头部区域</h1>
</div>

36.2 导航栏


<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
---------------------------------------
<div class="header">
  <h1>头部区域</h1>
</div>

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>

36.3 内容

1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备


<style>
/* 创建三个相等的列 */
.column {
  float: left;
  width: 33.33%;
} 
/* 列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
---------------------------------------------------------------
<div class="row">
  <div class="column">
    <h2>第一列</h2>
    <p>文本信息</p>
  </div>
  
  <div class="column">
    <h2>第二列</h2>
    <p>文本信息</p>
  </div>
  
  <div class="column">
    <h2>第三列</h2>
    <p>文本信息</p>
  </div>
</div>

36.4 底部内容

底部区域在网页的最下方，一般包含版权信息和联系方式等。


<style>
/* 底部样式 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
---------------------------------------
<div class="footer">
  <p>底部区域</p>
</div>

37 用户界面优化

37.1 鼠标图标的变化。

通过设置cursor:属性来更改在对象上移动鼠标指针采用何种系统定义的光标形状。

属性值	描述	备注
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

37.2 溢出文字省略号显示

设置盒子中的文字如果溢出，将以省略号的形式显示。

1.单行文本溢出

先强制一行内显示文本 2. 超出部分隐藏 3.文字用省略号替代超出的部分。

{
    white-space:nowrap;   //先强制一行内显示文本
    overflow:hidden;     //超出部分隐藏
    text-overflow:ellipsis;    //文字用省略号替代超出的部分
}

2.多行文本溢出

37.2 网站 favicon 图标：

favicon 图标是显示在页面标签旁的图标，必须使用文件名.ioc 格式的图片充当。

创建步骤：

制作favicon图标
将favicon图标放置到网站的根目录下
html页面引入favicon图标

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页练习</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href=" /favicon.ico" />
    <!-- 引入初始化文件 -->
    <link rel="stylesheet" href="css/bace.css">
    <!-- 引入公共css文件 -->
    <link rel="stylesheet" href="css/common.css">
</head>
<body>

</body>
</html>

38 css文本初始化

* {  // 设置所有盒子的外边距和内填充为0
    margin:0;
    padding:0;
}

em,i { //设置em和i标签字体样式正常
    font-size:normal;
}

li { //设置列表没有开头的小圆点
    list-style:none;
}

img {  //设置图片无边框(照顾低版本浏览器)，设置图片下方对齐，不会留缝隙
    border:0 ;
    vertical-align:middle;
} 

button { //设置鼠标移动到按钮上显示为小手
    cursor:pointer;
}
    
.clearfix:after {
    visibility: hidden;
    clear:both;
    display:block;
    content:'.';
    height:0;
}

emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高编写速度，Vscode内部已经集成该语法。

1.快速生成HTML结构语法

2.快速生成CSS样式语法

1. 快速生成html结构语法

生成标签，直接输入标签名，按tab键即可，比如 div 然后tab键，就可以生成<div></div>。
如果想要生成多个相同标签，加上*就可以了比如 div*3 就可以快速生成<div></div>.
如果有父子级关系的标签，可以用>比如ul>li就可以了。
如果有兄弟关系的标签，用 + 就可以了。
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了。
如果生成的div类名是有顺序的，可以用自增符号$。

2 快速生成css样式

采取简写形式就可以生成css样式。
比如w200 按tab可以生成 width:200px；

css3新特性

新增的选择器

新增的css3新特性有兼容性问题，在IE9之后才支持。

移动端支持要优于pc端。

属性选择
结构伪类选择器
伪元素选择器

1. 属性选择器

属性选择器可以根据元素的特定属性来选择元素。

属性选择器和伪类选择器的权重都是10。

选择符	简介	备注
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	选择具有att属性且属性值以val开头的E元素
E[att$=“val”]	选择具有att属性且属性值以val结尾的E元素
E[att*=“val”]	选择具有att属性且属性值中有val的E元素

2.结构伪类选择器

结构伪类选择器主要是根据文档结构来选择元素，成功用于父类

选择符	介绍	备注
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E	even：选择偶数 odd：选择奇数
E:fitst-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

ul li:frist-child {  }      //选择ul标签中的第一个li标签
ul li:last-child {  }  		//选择ul标签中的最后一个li标签
ul li:nth-child(n)  {  }		//选择ul标签中的指定第n个li标签

nth-child(n) 选择父元素的一个或者对各特定的子元素

执行的时候是会把所有的盒子都排列序号，先查看第几个盒子，在匹配标签名。

n 可以是数字，关键字和公式。
n 是数字，就是选择第n个子元素，里面数字从1开始……
n 是关键字 even 偶数, odd 奇数。
n 可以是公式：常见公式如下：

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15……
n+5	从第5个开始包含第五个
-n+5	前五个，包含第五个

nth-of-type(n)

先会找到指定的标签，然后把指定的标签排列，选中指定的盒子。

3.伪元素选择器

伪元素选择器可以利用css来创建新的标签，而不需要html标签，从而简化html结构。

创建的元素属于行内元素，在html中找不到相应的元素，并不是一个真正的元素。所以称之为伪元素。

行内元素无法更改大小，只能先转换为行内块元素或者块元素才能设置大小。

伪元素选择器是放置在父元素的相应位置。

必须要有contcent属性，否则没有任何效果。

选择符	介绍	备注
::before	在元素的内部的前面插入内容
::after	在元素的内部的后面插入内容

E::after {
    content:"";              //伪元素选择器必须要存在contebt属性
}

伪元素清除浮动

清除浮动的原理：在浮动的盒子后面再插入一个盒子来当墙阻挡浮动。

伪元素清除浮动的原理：在浮动的盒子后面添加一个伪元素，来充当墙阻挡浮动。

充当墙的盒子必须为块级元素。

语法：

.clearfix:after {
    content:"";    //伪元素必须有此元素
    display:block;    //转换为块级元素
    height:0;			//高度设为0
    clear:both;          //清除浮动
    visibility:hidden;     //隐藏此元素
}

.clearfix:before,.claerfix:after {
    content:"";      //必要属性
    display:table;   //转换为块元素，且在一行显示
}
.clearfix:after {
    clear:both;  //清除浮动
}

新增的盒子模型

css3可以通过指定box-sizing 来指定和模型，有两个值可以指定：

box-sizing:content-box ：盒子大小为 width + padding + border （默认的）

box-sizing:border-box : 盒子大小为width

如果盒子模型改成了box-sizing：border-box ，那padding和border就不会撑大盒子（前提是padding和border不会超过width的宽度）

常用于设置全局属性中：

* {
    padding:0;
    border:0;
    box-sizing: border-box;
}

图片滤镜filter

filter css属性将模糊或者颜色变化等图形效果应用于元素，也可以调整图片红蓝比。

filter: 函数()；例如：filter:blur(5px); blur模糊处理。数值越大越模糊。

filter函数：

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：``<offset-x> <offset-y> (必须)这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).<blur-radius> (可选)这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).<spread-radius> (可选)这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 <color> (可选)查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：`filter: url(svg-url#element-id)`
initial	设置属性为默认值
inherit	从父元素继承该属性

函数

calc()此css函数可以允许声明css属性时执行一些计算

例如： width：calc(100% - 80px) //括号中可以使用 + - * / 来进行计算*

E {
    width: calc();
}

过渡

过度可以不适用Flash动画和javasc的情况下，当元素从一种样式变换为零一种样式时为元素添加效果。

过渡动画：从一种状态渐渐过渡到另一种状态

经常和 :hover一起搭配使用。

语法： transition: 要过渡的属性花费时间运动曲线延迟时间

有多个要过渡的属性时： transition: 属性一延迟时间，属性二延迟时间；

属性：想要变化的css样式，宽度高度，背景颜色内外边距，如果所有属性都有变化过渡，写：all。
花费时间：必须写单位，单位是(s)秒,
运动曲线：默认是ease；
延迟时间：单位是s(秒)，可以设置延迟触发的时间。

E {
    transition: width 1s,height 1s;   //过渡控制给元素加
}

过渡的运动曲线：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

贝塞尔曲线:

图片斜率就是速度(大概吧，不是很确定)，p1,p2就是控制点。

2D转换 transform

转换时css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。

移动：translate
旋转：rotate
缩放：scale

移动：translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置。类似定位。

定义2D转换中的移动，沿着X轴和Y轴方向移动。
最大的优点：不会影响到其他元素位置。
translate中的百分比单位是相对于自身元素的translate:(50px,50px)
对行内标签没有效果。

E {
    transform: translate(x,y);  或者分开写：
    transform: translateX(n);
    transform: translateY(n);
}

简单的居中对齐

可以通过先设置定位(position:absolute)来设置盒子位置近似于居中。

方法一：设置margin-top：(50%)盒子宽度; margin-left: (50%)盒子宽度;

方法二：设置transform: translate:(-50%,-50%); //盒子往上左走盒子宽度的50%。

来设置盒子的居中。

旋转： rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

rotate里面跟度数，单位是deg rotate(45deg);
角度为正时，顺时针，为负时，为逆时针。
默认旋转的中心点时元素的中心点。

语法：

E {
    transform: rotate( 度数deg );    //这个度数是旋转到的度数，不是旋转了多少度。
}

设置旋转中心

可以设置元素的旋转中心：

transform-origin: x y ;

后面的参数可以是百分比，也可以是： (top，bottom，left，right， center)等方位词，也可以是像素。


     .left-top {
            height: 200px;
            width: 200px;
            background-color:blueviolet;
            margin: 200px auto;
            transform-origin: left bottom;   //设置旋转的中心点
            transition: all 3s;				//设置过渡
        }
        .left-top:hover {
            transform: rotate(3600deg);     //开始旋转
            background-color:rgb(186, 226, 43);   
            border-radius: 100px;
        }

缩放：scale

可以通过scale属性来设置缩小放大的倍数。

使用 transform:scale(); 不会影响其他的盒子，使用height，width改变大小会影响其他的盒子。

transform:scale(x ,y); x是宽度,y是高度，调整为原来的倍数。

x,y 如果是整数就是放大盒子，如果是小数就是缩小盒子。

如果是等比例缩放，可以只填写一个数字。

.scale {
        margin: 200px auto;
        height: 200px;
        width: 200px;
        background-color:blue;
        transition: all 1s;   //过渡
    }
    .scale:hover {
        transform: scale(3);   //设置缩放的倍数
        background-color:chartreuse;    
    }

综合写法：

使用多个转换时，其格式为： transform: translate() rotate() scale() ……等。

不能同时使用多个transform:属性，只会执行最下面的一个。(尝试结论)

不同的排列顺序会影响转换的效果。(最好是先改变位置在改变其他属性)

当同时有位移和其他属性时，最好将位移放置到最前面。（除非需要先旋转再位移。）

动画

动画(animation)是css3中具有颠覆性的特征之一，可以通过多个节点来精确控制一个或者是一组动画，常用来实现复杂的动画效果。

相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

制作动画分为两步：
先定义动画
使用(调用)动画

1. 使用动画步骤：


/*定义动画关键帧*/
@keyframes 动画名称 {
    0% {
        开始动画的样式;
    }
    100% {
        结束动画的样式;
    }
}

/*调用动画*/
E {
    /*调用动画*/
    animation-name: 动画名;
    /*持续时间*/
    animation-duration: 持续时间;
}

2. 常用属性表

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画运行曲线。默认为：ease;
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。无限循环为： infinite
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定动画结束后的状态。保持结束状态：forwards ,回到起始状态： backwards。
animation-play-state	指定动画是否正在运行或已暂停。 running和pause。
initial	设置属性为其默认值。
inherit	从父元素继承属性。

3. animation-timing-function

设置动画运行的动作曲线：

linear：动画从头到尾的速度是相同的

ease ：动画以低速开始，然后加快，在结束前变慢。默认值

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始和结束

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4. animation-iteration-count

设置动画运行的次数

n：设置一个数字来定义应该播放多少次动画

infinite ：指定动画播放无限次

5. animation-direction

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用

normal ：默认值。动画按正常播放

reverse：动画反向播放

alternate ：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放（轮回）

alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

initial：设置该属性为它的默认值

inherit：从父元素继承该属性

6. animation-fill-mode

animation-fill-mode 属性规定当动画不播放时要应用到元素的样式。

none ：动画在动画执行之前和之后不会应用任何样式到目标元素，默认值

forwards：停留在结束位置

backwards：返回起始位置。

both：动画遵循 forwards 和 backwards 的规则。换句话说，动画会在两个方向上扩展动画属性

initial：设置该属性为它的默认值

inherit：从父元素继承该属性

7. animation-play-state

animation–play-state属性可以指定动画是否正在运行或已暂停。

paused ：指定暂停动画

running：指定正在运行的动画

8. animation 简写

animetion可以使用简写属性：

语法：

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画或者结束的状态

简写属性不报含 animation-play-state。

暂停动画： animation-play-state:puased; 经常和鼠标经过等其他配合使用。

要想动画正向播放后再反向播放回起始位置，需要： animation-direction : alyernate;

盒子动画结束后，停在结束位置： animation-fill-mode : forwards;

E {
    animation: animationName 5s linear 2s indinite alternate;
}

3D 转换 transform

6.1 三位坐标系

三维坐标系就是指立体空间，立体空间是由三个轴共同组成。

x轴：水平向右
y轴：垂直向下
z轴：垂直向屏幕外

3D 移动 translate3d

3D移动再2D移动的基础上多增加了一个可以移动的方向，就是z轴的方向。

transform:translateX( px ): 仅仅是在x轴上移动。
transform:translateY( px ): 仅仅是在Y轴上移动。
transform:translateZ( px ): 仅仅是在Z轴上移动。(一般单位就是px，且x,y,x不能省略)
transform:translate( x,y,z ): 其中x,y,z是要指定的移动的方向。

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的。

想要在网页中产生3D效果需要透视(理解成3D物体投影到2D平面内);
透视也被称为视距，视距就是人眼睛到屏幕的距离。
距离视觉点越近的在电脑平面成像越大，越远成像越小。
透视的单位是像素。

透视写在被观察元素的父盒子上面

d: 视距，视距就是人的眼睛到屏幕的距离。

z: 就是z轴。物体距离屏幕的距离，z轴越大，看到的物体就越大。

3D 旋转 rotate3D

3D旋转可以让元素在三维平面内沿着x轴y轴z轴或这自定义的轴进行旋转。

语法：

transform:rotateX( deg ): 沿着X轴旋转相应的度数。
transform:rotateY( deg ): 沿着Y轴旋转相应的度数。
transform:rotateZ( deg ): 沿着Z轴旋转相应的度数。
transform:rotate3d( x,y,z, deg ): 沿着X轴旋转相应的度数。
xyz表示的是旋转轴的矢量。
旋转的正方向遵循左手法则。

3D呈现 transform-style

控制子元素是否开启三维立体环境。
transform-style: flat 子元素不开启3D立体空间，默认的。
transform-style: preserve-3d; 子元素开启立体空间。
代码写给父级元素，影响的是子盒子。

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。

-moz- : 代表firefox 浏览器私有属性。
-ms- : 代表ie浏览器的私有属性。
-webkit- : 代表safari,chrome私有属性。
-o- ：代表Opera 私有属性。

-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-ms-border-radius  :  10px;
-o-border-radius  :  10px;
border-redius  :  10px;

画关键帧*/
@keyframes 动画名称 {
0% {
开始动画的样式;
}
100% {
结束动画的样式;
}
}

/调用动画/
E {
/调用动画/
animation-name: 动画名;
/持续时间/
animation-duration: 持续时间;
}




### 2. 常用属性表





| 值                        | 说明                                                         |
| :------------------------ | :----------------------------------------------------------- |
| animation-name            | 指定要绑定到选择器的关键帧的名称                             |
| animation-duration        | 动画指定需要多少秒或毫秒完成                                 |
| animation-timing-function | 设置动画运行曲线。默认为：ease;                              |
| animation-delay           | 设置动画在启动前的延迟间隔。                                 |
| animation-iteration-count | 定义动画的播放次数。无限循环为： infinite                    |
| animation-direction       | 指定是否应该轮流反向播放动画。                               |
| animation-fill-mode       | 规定动画结束后的状态。保持结束状态：forwards ,回到起始状态： backwards。 |
| animation-play-state      | 指定动画是否正在运行或已暂停。 running和pause。              |
| initial                   | 设置属性为其默认值。                                         |
| inherit                   | 从父元素继承属性。                                           |

### 3. animation-timing-function

> 设置动画运行的动作曲线：

linear：动画从头到尾的速度是相同的

ease ：动画以低速开始，然后加快，在结束前变慢。默认值

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始和结束

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。



  

### 4. animation-iteration-count

> 设置动画运行的次数

n：设置一个数字来定义应该播放多少次动画 

infinite ：指定动画播放无限次



### 5. animation-direction

> animation-direction 属性定义是否循环交替反向播放动画。
>
> 注意：如果动画被设置为只播放一次，该属性将不起作用

normal ：默认值。动画按正常播放  

reverse：动画反向播放

alternate ：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放（轮回）

alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放  

initial：设置该属性为它的默认值

inherit：从父元素继承该属性



### 6. animation-fill-mode

> animation-fill-mode 属性规定当动画不播放时要应用到元素的样式。

none ：动画在动画执行之前和之后不会应用任何样式到目标元素，默认值  

forwards：停留在结束位置

backwards：返回起始位置。 

both：动画遵循 forwards 和 backwards 的规则。换句话说，动画会在两个方向上扩展动画属性 

initial：设置该属性为它的默认值

inherit：从父元素继承该属性



### 7. animation-play-state

> animation--play-state属性可以指定动画是否正在运行或已暂停。

paused ：指定暂停动画

running：指定正在运行的动画  



### 8. animation 简写

> animetion可以使用简写属性：
>
> 语法：
>
> 	animation：动画名称 持续时间 运动曲线  何时开始 播放次数  是否反方向 动画或者结束的状态
>
> * 简写属性不报含 animation-play-state。
> * 暂停动画： animation-play-state:puased; 经常和鼠标经过等其他配合使用。
>
> * 要想动画正向播放后再反向播放回起始位置，需要： animation-direction : alyernate;
>
> * 盒子动画结束后，停在结束位置： animation-fill-mode : forwards;
>
> 



```css
E {
    animation: animationName 5s linear 2s indinite alternate;
}

3D 转换 transform

6.1 三位坐标系

三维坐标系就是指立体空间，立体空间是由三个轴共同组成。

x轴：水平向右
y轴：垂直向下
z轴：垂直向屏幕外

3D 移动 translate3d

3D移动再2D移动的基础上多增加了一个可以移动的方向，就是z轴的方向。

transform:translateX( px ): 仅仅是在x轴上移动。
transform:translateY( px ): 仅仅是在Y轴上移动。
transform:translateZ( px ): 仅仅是在Z轴上移动。(一般单位就是px，且x,y,x不能省略)
transform:translate( x,y,z ): 其中x,y,z是要指定的移动的方向。

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的。

想要在网页中产生3D效果需要透视(理解成3D物体投影到2D平面内);
透视也被称为视距，视距就是人眼睛到屏幕的距离。
距离视觉点越近的在电脑平面成像越大，越远成像越小。
透视的单位是像素。

透视写在被观察元素的父盒子上面

d: 视距，视距就是人的眼睛到屏幕的距离。

z: 就是z轴。物体距离屏幕的距离，z轴越大，看到的物体就越大。

[外链图片转存中…(img-dCVJPAWp-1619969600717)]

3D 旋转 rotate3D

3D旋转可以让元素在三维平面内沿着x轴y轴z轴或这自定义的轴进行旋转。

语法：

transform:rotateX( deg ): 沿着X轴旋转相应的度数。
transform:rotateY( deg ): 沿着Y轴旋转相应的度数。
transform:rotateZ( deg ): 沿着Z轴旋转相应的度数。
transform:rotate3d( x,y,z, deg ): 沿着X轴旋转相应的度数。
xyz表示的是旋转轴的矢量。
旋转的正方向遵循左手法则。

3D呈现 transform-style

控制子元素是否开启三维立体环境。
transform-style: flat 子元素不开启3D立体空间，默认的。
transform-style: preserve-3d; 子元素开启立体空间。
代码写给父级元素，影响的是子盒子。

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。

-moz- : 代表firefox 浏览器私有属性。
-ms- : 代表ie浏览器的私有属性。
-webkit- : 代表safari,chrome私有属性。
-o- ：代表Opera 私有属性。

-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-ms-border-radius  :  10px;
-o-border-radius  :  10px;
border-redius  :  10px;

元气满满的凡诚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录