Css

 

初识css

一、css 的概述

1.早期的 web 网页

 

在 20 世纪 90 年代的，html 迅猛发展，不同的浏览器根据自身的结构支持不同的样式。到现在位置，不同的浏览器 html 标签在不同的浏览器中展现的基本样式也不尽相同。  

随着功能增加，html 就变得越来越混乱。只依靠标签的堆叠，东西越多页面展示越乱。这时候用于装饰网页样式的 css 就诞生了。

1997 年，w3c 颁布了 css1.0 版本，随即微软和网景公司的浏览器均能支持 CSS1.0。

 

2.css 的概念

层叠样式表 (Cascading Style Sheets，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。

比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画等等。

- html:超文本标记语言，网页的结构搭建，页面布局

- css:层叠样式表,网页的修饰，样式的渲染

- javascript:解释型的编程语言，用于与页面的交互

 

3.CSS 与 HTML 属性使用原则

- html 文件书写样式的缺点：

  - html 代码变得杂乱

  - 样式只用于修饰该标签，复用性很差

  - 样式需要更改的时候不利于维护

- 使用 css 书写样式的优点（w3c 建议我们尽量使用 css 的方式取代 html 属性）

  - 样式复用性高

  - 方便维护

  - 使用 ui 框架更加便捷美观

 

4.css 的语法规范

(1)内联样式

内联样式也可以叫行内样式，就是在 html 文件中的 html 标签中，使用 style 属性的样式值来完成元素的样式渲染。

 <span style="样式声明"></span>

- 样式声明：

  - 由样式属性和值组成；

  - 属性和值之间用冒号连接；

  - 多个样式声明用分号分隔。

- 特点：

  - 写在标签里面，缺点是影响阅读，看着乱

  - 不利于修改，复用性差。

- 优点:

  - 指定当前标签，更加直接

<h1>没有加任何样式，只有标签自己的样式</h1>

<h1 style="color: red;">加入字体颜色样式</h1>

<h1 style="color: red;font-size: 40px;">加入字体颜色和字体大小样式</h1>

<h1 style="font-size: 40px;">

加入背景颜色和字体大小样式

</h1>

　　

 (2)内部样式 

在网页的头部`<head>`标签中增加一对`<style></style>`标签，在`<style>`标签记中定义该网页的所有样式。

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

选择器 {样式列表}

</style>

</head>

- 样式规则：

  - 由选择器和样式声明的列表组成

  - 就是把很多声明好的样式匹配给页面中的元素

- 特点：

  - 需要选择器查找到元素,嵌入到 html 文件中，会影响 html 文件的大小

  - 只能在当前页面使用

  - 优先级低于内联样式

  - 多用于测试和学习，不建议用在项目中

- 易错点（关于`<style></style>`标签的位置，会有几种情况出现）

  - 写在 head 标签的哪个位置？应该在 body 标签中

  - `<style></style>`标签放错位置

  - 直接开始写样式，根本不管在哪个标签里，想写哪就写哪

  - 专注于写样式，连结构标签都写在 style 标签中

 

 (3)外部样式

外部样式的书写方法

<head>

<link rel="stylesheet" href="wai.css" />

</head>

- 单独创建 css 文件，在 html 的 head 标签中 link 标签引入 css 文件。

- href 叫做超文本引用，它的属性值是需要引用 css 文件的路径。

- rel 属性指引入文件于当前 html 的关系，必写属性。

- 样式规则：与内部样式相同，由选择器和样式声明的列表组成，把很多声明好的样式匹配给页面中的元素

- 特点：

  - 所有页面都可以使用

  - 项目中最重要的样式使用方式

  - 一般情况下级别低于内部样式，但如果外部样式在内部样式下方引用，则优先级可能高于内部样式

 

【练习】

> 使用 css3 种使用方式，内联，内部，外部样式将以下标签内的文字设置为三种不同的字体颜色  

> `<h1>lorem</h1>`内联，背景色为粉色，字体颜色为黄色

> `<h2>lorem</h2>`内部，背景色为黄色，字体颜色为红

> `<h3>lorem</h3>`外部，背景色为红色，字体颜色为蓝色

 

5.控制台调试代码

- 打开控制台的方法（部分 windows 的打开方式是 f12 或者鼠标右键-检查）

- 查看百度的控制台

- 通过控制台拿到很多素材

- 控制台的 elements 展示的就是 html 标签及嵌套关系

- 找到元素的方式

- 查看嵌套方式

- 看看样式，暂时更改样式

 

css选择器

二、选择器

1.基础选择器

【注意】相同的选择器不同的属性声明，不会被覆盖而是共同应用。

（1）通用选择器

- `*`号，选择 html 文件内所有的元素 `* {样式声明}`

- 最常用的用法是`*{margin:0;padding:0}` 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使用。

 

（2）元素选择器（标签选择器）

- 通过标签的名字来选择 html 元素，权重值为 1，比如：`div {样式声明}`

- 弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

 

（3）id 选择器

- 给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值 100

- `<div id="abc">一个标签</div>`

- `#abc {样式声明}`

- id 名不能以数字开头，不建议使用中文命名，尽量见名知意

- 多个单词连接可以用- 、\_、驼峰

- 每个都有和其他重复的样式，使用 id 有几个弊端，过于订制化导致每一个元素都要有自己的 id 有一套自己的样式，代码量过大重复性过大。明明有重复的内容，但通过 id 选择器只能是一个一个的书写其样式，又不是很智能

 

（4）类选择器【重要】

- 类选择器先要使用标签的`class`属性赋值，类选择器的权重值 10

- `<div class="abc">一个标签</div>`

- `.xxx {样式声明}`

- 类名不能以数字开头，不建议使用中文命名，尽量见名知意，多个单词连接可以用- 、\_、驼峰

- 一个元素可以创建多个类名，每个类名之间用空格分开`<div class="abc zyx">一个标签</div>`

- 易错点：

  - 忘记给元素增加 id 或者 class 属性就直接开始写 css 样式

  - class 的点，很容易忽略那个点

  - 先写类名还是先定义 class 属性

<style>

.color-r {color: red;}

.color-b {color: blue;}

.font-20 {font-size: 20px;}

.font-30 {font-size: 30px;}

</style>

<body>

<p class="color-r font-20">p我想20号字红色</p>

<p class="color-g font-20">p我想20号字绿色</p>

<p class="color-r font-30">p我想30号字红色</p>

</body>

 

（5）群组选择器

- 多个选择器名用逗号连接，可以一起完成共同样式的指定`div,p,span {color: red;}`

- 群组选择器并不是只能使用相同类型的选择器，可以是各种选择器一起参与`#mydiv.b,h4 {color: blue;}`

 

2.关系选择器

在 html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”

 

（1）后代选择器

- 先代元素（祖先）选择器写在前面，之后写一个空格，空格后写后代元素选择器。

- `祖先元素 后代元素 {样式声明}`

- 需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级还可以再往上的级别都可以

- 但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续用空格加入更深层的后代。

 

（2）子代选择器

- 可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。

- `父级元素 > 子级元素 {样式声明}`

- 层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接`.baba > div > div {字体颜色;}`

 

（3）兄弟选择器

- 同一层的关系选择器，可以选中该元素后面的兄弟元素。

- `某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}`

- 需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。

 

（4）相邻选择器

- 同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。

- `某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}`

- 需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟

 

3.伪类选择器

- 伪类选择器的作用是匹配同一个元素，不同状态下的样式

- `选择器:伪类 {样式声明}`

- `a:link {样式声明}` 没有被打开之前，或者没被打开过（`a:link`特有）

- `a:visited {样式声明}` 访问过后（`a:visited`特有）

- `div:hover {样式声明}` 鼠标悬停

- `p:active {样式声明}` 点击激活

- `input:focus {}`属性代表 input 标签获取焦点的样式(`<input/>`标签的属性)

- `input:cheaked {}`属性代表 input 单选、复选等 type 类型被选中后的样式(`<input/>`标签的属性)

a:link {

/* 没有被打开之前，或者没被打开过 */

color: green;

}

a:visited {

/* 访问过后 */

color: green;

}

div:hover {

/* 鼠标移入标签后展现 */

 

}

p:active {

/* 鼠标按住元素不松手 */

background-color: blueviolet;

}

　　

4.伪元素选择器 

- CSS 伪元素用于设置元素的“指定部分”的样式

- :before 表示元素最前边的部分，紧随着标签的部分

- :after 表示元素的最后边的部分，紧随着标签的部分

- :before{content:""}:after{content:""} content 必须写

- 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。

/* 在元素前面的部分 */

div::before {

content: "你好，";

color: red;

}

/* 在元素后面的部分 */

p::after {

content: "❤";

color: green;

}

 

常用元素和属性

三、基础元素

1. 基础元素

所有需要显示在页面上的标签都需要写在`<body></body>`标签中

 

（1）标题标签

- h1~h6 标签，用于书写标题。

- `<h1>文本</h1>`标题标签是双标签，可以包裹文本

- 属于`块级元素`，在浏览器中自占一行的标签

- 浏览器自行渲染时标题标签和其他的标签保持一定的上下距离，并有自定义的加粗效果

- 级别是数字越小级别越大

 

<h1>⼀级标题</h1>

<h2>⼆级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

（2）段落标签

- `<p></p>`标签，用于书写段落或大段文字

- `<p>段落</p>`标题标签是双标签，可以包裹文本

- 属于`块级元素`，在浏览器中自占一行的标签

- 浏览器自行渲染时 p 标签和其他的标签保持一定的上下距离

 

<p>在这⾥⾯写⼀些⽂字的东⻄。</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

（3）换行标签

- `<br/>`标签，用于在段落中将文字换行。

- `<br/>`标签单标签，属于`块级元素`自占一行的标签,在 html5 标准中可以省略`/`,直接写`<br>`

- 换行标签多用于段落中的换行，一般不用于布局。

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />

Ab assumenda atque dolor earum error, <br />pturi exercitationem explicabo. </p>

（4）分隔符

- `<hr/>`标签用于将标题和段落，或其他需要分开的段落用一条横线分开。

- `<hr/>`标签单标签，属于`块级元素`自占一行的标签,在 html5 标准中可以省略`/`,直接写`<hr>`

- hr 是单标签，自占一行的标签。

- 一般不用于布局。

 

<h1>这是⼀个标题</h1>

<hr />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

 

（5）预格式化标签

- `<pre></pre>`标签可定义预格式化的文本，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

- `<pre>段落</pre>`标题标签是双标签，可以包裹文本和其他标签

- 属于`块级元素`，在浏览器中自占一行的标签

- 如果想在页面中显示标签，则需要搭配实体符号解决，比如`"<" 代表 "<"，">" 代表 ">"`

- pre 标签的一个常见应用就是用来表示计算机的源代码

 

（6）格式化⽂本标记

- 具有一定格式的文本标记，专门用于修饰文字

- 均为双标签，内联元素，不自占一行

 

<b>定义粗体</b>

<i>定义斜体</i>

<u>定义下划线</u>

<del>定义删除线 </del>

<sup>定义上标</sup>

<sub>定义下标</sub>

<strong>定义着重⽂字，与b效果相同</strong>

<em>定义加重语⽓，与i效果相同</em>

<mark>⾼亮显示⽂本</mark>

（7）按钮标签

- `<button>按钮</button>`普通的按钮标签，不具备任何功能，可以自主赋予功能具有自己的样式，可以自定义修改。

- 双标签，按钮内部可以包裹文本。“特殊的”内联元素，可以设置宽度高度，不自占一行。

 

<button>按钮</button>

2. 分区元素

（1）div 标签

- `<div></div>`标签，双标签，可以包裹任何标签和文本。

- 为块级元素，自身没有任何样式。

- 经常作为容器和分区域的包裹标签使用，在布局中应用广泛。

 

<div>直接写⼀段⽂字是可以的</div>

<div>

<h1>这是⼀个标题</h1>

<p>这是⼀个段落</p>

</div>

（2）span 标签

- `<span></span>`标签，双标签，可以包裹文本。

- 为内联元素，自身没有任何样式。

- 常作为容器使用，用于包裹特殊的文字和图标。

<span>123</span>

<p>html的重要性？ 评论⼈数：<span style="color: red;">10</span></p>

 

四、全局属性

全局属性是所有 HTML 元素共有的属性。它们可以用于所有元素，即使属性可能对某些元素不起作用。

 

要满足属性的书写规则：

- 标记和属性用空格隔开，属性与属性值用`=`（等号）链接，属性值要写在""(双引号内),等号两侧尽量不用空格

- 使用小写属性名

- 一个标记可以没有属性也可以有多个不同属性，属性与属性之间不分先后顺,一个属性也可以有多个属性值

 

1. style 属性

- style 属性，含要应用于元素的样式声明，可以给元素指定样式。

- 可以设置多个样式，每个属性值用分号隔开。

- 注意，该属主要用于快速样式化，用于测试目的。

 

<h2 style="color: red;">标题</h2>

<p style="color: blue;font-size: 20px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

 

简单介绍一些样式：

- `color: red;` 字体颜色，色值可以是英文（部分生效）

- ` `背景颜色，色值可以是英文（部分生效）

- `font-size: 20px;`字体大小，px 是像素单位

- `text-align: center;`块级标签中的文字和图片居中显示

- `width: 100%;`设置元素的宽度，百分比单位是参照父级元素的

- `height: 100px;`设置元素的高度

2. id 属性

- 定义唯一标识符（ID），在该页面上一个标签只能有一个不重复的 id 名，它具有唯一性。

- id 属性的值不能是数字开头，不建议写中文。值的书写规范如：

  - id="abc" 纯字母

  - id="abc123" 字母+数字

  - id="head-logo" 中横线链接

  - id="head_logo" 下横线链接

  - id="headLogo" 驼峰式

 

<p id="text">这是⼀段话</p>

<p id="text1">这是⼀段话</p>

 

3. class 属性

- class 类属性，可以将元素进行分类后给予相同的样式，减少了代码的书写量

- 该页面上可以有多个元素拥有此类名，一个元素也可以有多个类。

- class 选择器名称不能是数字开头，不建议写中文，可以是多个类名用空格隔开。

- 值的书写规范与 id 相同

 

<p class="aaa">⼀段⽂字</p>

<p class="aaa">⼀段⽂字</p>

<p class="aaa bbb ccc">⼀段⽂字</p>

 

4. data-*⾃定义属性

- `data-*`是自定义数据属性，可以通过 JavaScript 与 HTML 之间进行专有数据的交换

- `data-*` 这里的`*`可以替换为自定义的有意义的字母或单词,如：`data-buy`

 

<p data-price="yes">需要将这个标签设置为价格</p>

 

5. title 标题属性

- 包含表示与其所属元素相关信息的文本。

- 这些信息通常可以作为提示呈现给用户,但不是必须的。

 

<p title="李⽩将进酒">天⽣我材必有⽤，千⾦散尽还复来。</p> 

 

元素基础样式

三、尺寸和单位

- 定义宽度`width`和高度`height`可以使用长度单位：px，pt，rem，em，%等等

- 一般 pc 端网页使用 px 或 pt

- 移动端使用%，em，rem，vw，vh 等响应式单位

- 最大宽度最小宽度，最大高度和最大宽度（在响应式部分进行讲解）

  - `max-width`最大宽度，`max-height`最大高度

  - `min-width`最小宽度，`min-height`最小高度

  - 不允许出现负值，最小不满足时出现横向或竖向拖动条

 

四、颜色

1.英文颜色

- 常用 red,green,blue,yellow,orange,pink,purple,gold

- transparent 透明色

2.十六进制颜色

- `#rrggbb`#必须写

  - 1、2 位代表红色范围

  - 3、4 位代表绿色范围

  - 5、6 位代表蓝色范围

- 十六进制颜色范围是 0-9，a-f

- 如果三组都是相同的值，可以简写

- 企业标注图一般都使用十六进制颜色（需要大家认识标注图）

 

3.rgb 颜色

- `rgb()`函数，三个参数，用逗号分隔

- r 代表红色色值，g 代表绿色色值，b 代表蓝色色值

- 取值范围 0~255 之间的 256 个数

- `rgba()`a 代表透明度，取值 0~1 之间的数字，0 代表完全透明

 

【练习】

> 使用三种颜色赋值方式分别给元素赋值

> 给 p 标签加一个半透明背景颜色

div {

width: 200px;

height: 200px;

/* 英文颜色 */

 

/* 透明色 */

background-color: transparent;

/* 十六进制颜色 */

background-color: #f00d19;

/* rgb颜色 0~255*/

background-color: rgb(10, 210, 30);

/* rgba 最后一个a是透明度 */

/* background-color: rgba(0,0,0,0.5); */

}

p {

width: 100px;

height: 100px;

/* 最后一个值0-1之间 */

background-color: rgba(21, 95, 83, 0.39);

}

　　

4. web 安全色

web 安全色是用于网页的标准色彩，它比标准的 rgb 色彩要少。如果网页设计的时候用了非 web 安全色，那这个网页在不同的电脑显示出来可能是不同的颜色。

不同的平台（Mac、PC 等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在 Mac 上的 Web 浏览器中的图像，与它在 PC 上相同浏览器中显示的效果可能差别很大.

http://www.bootcss.com/p/websafecolors/

 

五、边框

1.边框的属性

- `border-width`边框宽度

- `border-style`边框样式，solid 实线，dashed 虚线，dotted 点点

- `border-color`边框颜色

 

2.边框的方向

- `border-bottom`下边框

- `border-top`上边框

- `border-left`左边框

- `border-right`右边框

 

3.边框都简写方式

`border:30px solid green;` 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书值都写顺序。

 

p {

font-size: 100px;

/* 简写方式 */

border: 30px solid green;

/* 单向边框简写 */

border-bottom: 30px solid red;

}

 

4.三角形

 

.sjx {

/* 宽度必须要写0 */

width: 0;

height: 0;

/* 以下书写顺序不能改变 */

border: 100px solid transparent;

border-bottom-color: black;

}

六、元素的分类

1.元素的显示属性

`display`元素以什么方式显示(以下为常用显示方式)

- `display: block;`以块级元素方式显示

- `display: inline;`以内联元素方式显示

- `display: inline-block;`属于行内元素，但以块级显示，俗称行内块

- `display: none;`不显示

- `display: table;`以 table 方式显示（不是重点）

 

2.内联元素

- 内联元素也可以叫行内元素

- 设置宽度、高度无效（行内块级显示元素除外）

- 和其他内联元素横向从左向右排列

- 设置上下内、外边距无效

- 常见的行内元素`span a`等

 

3.inline-block

- 它是行内元素的一种

- 不自占一行横向从左向右排列

- 可以设置宽度、高度以及内外边距

- 常见的行内块级显示元素`img button input`

- 会出现幽灵空白节点

  - 把 img 标签变成块级元素 `display: block;`

  - 父级元素`font-size: 0;`去掉空白节点

div {

width: 300px;

/* 去掉幽灵 */

font-size: 0;

}

img {

/* 就是和父元素一样宽 */

width: 100%;

display: block;

}

 

4.块级元素

- 每个元素都自占一行，后面的元素也只能另起一行

- 元素的宽度、高度以及内外边距都可以设定

- 块级元素宽度不设定，为父级元素宽度

- 高度不设定为内容高度，如果没有内容，高度为 0

- 常见的块级元素`div,p,h1,ul,li,table`

 

【练习】

> 将块级元素变成内联元素

> 将内联元素变成块级元素

> 让元素消失

> 将 a 标签变为行内块级显示

div {

width: 100px;

height: 100px;

 

/* 内联元素显示 */

display: inline;

}

span {

width: 100px;

height: 100px;

/* 块级元素显示 */

display: block;

background-color: yellowgreen;

}

p {

width: 100px;

height: 100px;

background-color: blue;

/* 不显示 */

display: none;

}

a {

width: 50px;

height: 50px;

padding: 30px;

background-color: orange;

/* 行内块级显示 */

display: inline-block;

}

　　


七、显示和隐藏属性 

1. display:none

- `display：none;`使元素消失，脱离文档流的消失

- `display：block;`使元素出现，元素显示为块级元素

2. visibility: hidden

- `visibility: visible;`元素显示

- `visibility: hidden；`元素隐藏，占据自身位置

3. opacity: 0;

- opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

- 缺点是，元素内的一切都会随着透明度改变

 

字体和文本

八、文本格式化

1. 字体属性

（1）字体大小

字体大小可以使用不同的单位，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。pt 是 ui 经常会用的单位，dpi： 直接来说就是一英寸多少个像素点，可以理解为像素密度，pt = px \* dpi / 72 ，遇到 pt 的设计图怎么处理，pc 端页面使用 px，移动端可以使用 em，rem 以及 vw

- `font-size: 30px;`字体号属性

- 取值，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。

  - px 像素

  - pt 磅

  - em 父级元素的倍数

  - rem 根标签的倍数

  - vw 视窗尺寸

 

用户的浏览器默认渲染的文字大小是“16px”（大多数浏览器）“em”是一个相对的大小，相对的是"父级元素"的字体大小，我们可以这样来设置 1em，0.5em，1.5em。

 

（2）字体系列

在选择字体之前，一定要按照产品要求赋值，要确定用户有该字体，或者可能有该字体。字体不要只写中文，最好英文中文一起加入，并把该字体的英文描述写在前面。

- `font-family`属性设置所需要的字体

- 一个单词的可以之际使用，多个单词组成词组的用引号括起来，中文尽量用引号括起来

- 多个字体列表按照顺序从前往后查找执行

 

需要字体库的支持，用户字库中含有的字体。在 word 中查看当前电脑的字体库。一般情况下直接放在 html 标签下应用因为字体是继承的。

很多字体商用是收费的，因此在使用字体之前，需要参照公司，或者产品提供的字库列表，如果没有特别说明需要自己提问，这样显得更加专业。企业会指定字库，要考虑版权，商用和非商用的字体方案。

 

推荐字体序列

移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
pc端(含Mac)项目： 

font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;
移动和pc端项目： 

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
  

（3）字体字重

字体字重就是字体粗细，但根据浏览器的不同可能展现的粗细表现也不同，因此有些值的差别看不出来，尤其是移动端，要提醒 ui 不要太细，不要太粗，显得更专业

- `font-weight`字体的字重，字的粗细

- 于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。

- 常用关键词：normal（400 默认）、bold（700）、lighter（300）

- 浏览器不同展现效果不同，需要注意

 

（4）字体样式

在一般情况下，因为部分标签带有自己的样式，所以一些公司在 css 样式重置的时候会先把所有的字体样式搞成统一的，比如具有斜体的`<i>`标签,会先把它变成默认样式再进行操作。

【注意】加粗的标签也会变成默认粗细。不建议使用标签做斜体

- `font-style`字体样式属性

- `font-style: normal;` 默认正常

- `font-style: italic;` 斜体

 

（6）字体的简写方式

- `font:italic 400 40px chiller;`

- 顺序：字体样式 字重 字号 字体系列，不可改变顺序

- 最简方式 `font：40px chiller; `字号和字体系列，不能再减少

 

2. 文本属性

（1）字体颜色

注意：不同终端展示颜色可能不同，尽量使用 web 安全色，或者沟通颜色的要求

- color：颜色的色值

- 取值:英文，十六进制，rgba()，其他

 

（2）文本的水平对齐方式

- `text-align`针对块级元素中的内联元素，它需要写在父级（块级元素）中，不能写在子元素中（文字本身和内联元素）

- 取值

  - `left`默认,左对齐

  - `center`居中对齐

  - `right`右对齐

- 内联元素（单个）与文字（单行）在父级水平居中的方式：是对块级元素中的文字，或对块级元素的内联元素水平居中，这个元素需要给父级（块元素），块级元素的水平居中不能使用该属性。

div {

width: 500px;

height: 200px;

text-align: center;

/* 适用于div内部的文字和内联元素 */

}


  

 

(3) 文本的行高

- `line-height`属性可以设置文本的行间距,可使用长度单位 px，或使用无单位的倍数如 1，1.5，2

- 文本的行高包括文字上下间距+文本高度，文本居中上下行间距相等

- 使行间距等于元素高度，则“单行文本”垂直显示在元素中

- 常用场景

- 行元素在块元素里上下左右居中（行高等于父级元素高度）

- 增加元素的文字行间距（在父元素设置，子元素也会生效）

 

 (4) 文本的线条修饰

在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉

- `text-decoration: none;`无线条

- `text-decoration: underline;`下划线

- `text-decoration: overline;`上划线

- `text-decoration: line-through;` 删除线

 

（5）首行缩进

- `text-indent`指定块容器中第一行文本的缩进

- `text-indent:2em`两倍的字体大小,相当于空两格

 

 (6)文本的换行

 

- 文本换行的原因

  - 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的`white-space:normal`,当定义的宽度之后自动换行。

  - 对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

- 换行属性

  - `white-space: nowrap;`不换行

  - `word-wrap:break-word;`强制换行

 

（7）文本溢出

各浏览器对`text-overflow:ellipsis`支持都不统一，特别是表现形式上，因此它的兼容性并不好。

 

/* 出现省略标记 */

.d1 {

 

width: 150px;

/* 超出部分隐藏（后面会学） */

overflow: hidden;

/* 当对象内文本溢出时显示省略标记（...） */

text-overflow: ellipsis;

/* 强制不换行 */

white-space: nowrap;

}

 

（8）文字阴影 

文字阴影和盒子阴影类似,都需要具有关键的内容,但没有内阴影

- `text-shadow`为文字添加阴影。

- 可以添加多个阴影，阴影值之间用逗号隔开。

- 参数：

  - 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,长度单位，可以为负值。

  - 第三个值代表：模糊半径的大小（羽化）。【可选】

  - 第四个值代表：颜色值。【可选】

 

* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */

text-shadow: 1px 1px 2px black;

 

九、垂直对齐方式 

1.vertical-align 属性

- `vertical-align`是用来设置内联元素对齐方式的，针对的并不是自身的文字

- 常用关键字值：

  - `vertical-align: middle;`

  - `vertical-align: top;`

  - `vertical-align: bottom;`

  - `vertical-align: baseline;`img 的默认对齐值为基线对齐

2. 文本元素基线 

- 针对img元素vertical-align: baseline; /*不写就是默认值*/

- 文字的基线不同的文字会有不同的展现

 

 

input {

height: 100px;

vertical-align: top;

/* 在前后加入内联元素或文字【改bottom、middle】 */

}

<span>前一段文字</span>

<input type="text">

<a href="#">后一段文字</a>

 

【练习】

> 要求布局只有一个图片和一个名字标签

> 完成图示效果

<style>

img {

vertical-align: middle;

}

</style>

<div>

<img src="./img/垂直对齐头像.jpeg" alt="" />

<span>幔帐中的林黛玉</span>

</div>

 

元素的修饰

十、圆角

 

1.元素的四个角

- `border-top-left-radius`左上角

- `border-top-right-radius`右上角

- `border-bottom-left-radius`左下角

- `border-bottom-right-radius`右下角

2.圆角的取值

- 水平边和垂直边设置相同

- 1 个值代表四个角

- 2 个值代表左上和右下，右上和左下

- 3 个值代表左上，右上和左下，右下

- 4 个值代表 左上，右上，右下，左下

- 水平边和垂直边设置相同（了解）

- 水平边圆角/垂直边圆角

 

 

3.圆形

- 圆形,元素宽高一致`border-radius: 50%;`

- 椭圆形，元素宽高不一致`border-radius: 50%;`

- 胶囊型`border-radius: 高度的一半;`

 

/* 圆形 */

.d2 {

width: 100px;

height: 100px;

 

border-radius: 50%;

}

/* 胶囊型 */

.d3 {

width: 150px;

height: 50px;

border-radius: 25px;

background-color: green;

}

　

十一、盒子阴影

1.盒子阴影的属性

- `box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内阴影`

- 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量（正负值）。

- 第三个值代表：模糊半径的大小（羽化）不允许负值。

- 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。

- 第五个值代表：颜色值。

- 第六个值（可选）代表：阴影向内 inset：默认阴影向外扩散。

 

/*     x轴偏移 y轴偏移 羽化  扩展 颜色 */

box-shadow: 15px 14px 10px 20px #666;

/*  x轴偏移 y轴偏移 羽化  扩展 颜色 内阴影*/

box-shadow: 3px 5px 5px 0 green inset;

 

【扩展】 立体球 

 

 

2. 多阴影

- 盒子阴影可以设置多层

- 每一个阴影效果为一组，中间用逗号分隔阴影组

 

 

.d4 {

width: 200px;

height: 200px;

 

box-shadow: 5px 10px 10px 0 red, 15px 20px 10px 0 green;

}

 


【练习】 

> 模拟日食效果

> 背景色黑色，月牙白色，需要多阴影效果

 

 

body {}

div {

width: 200px;

height: 200px;

border-radius: 50%;

 

box-shadow: 20px 0 50px -10px #fff, -20px 0 0 0 #fff inset;

}

 

> 利用圆角和阴影制作以下立体按钮【练习】

 

十二、光标设置

- `cursor: default;`箭头

- `cursor: pointer;`小手

- `cursor: wait;`等待

- `cursor: text;`文本

- `cursor: crosshair;`十字

- `cursor: progress;`箭头+等待

- `cursor: help;`箭头+问号

 

十三、元素特有样式

1.表单轮廓

- `outline`属性

- 简写`outline:width style color;`

- input 标签有默认的轮廓线，清空轮廓线`input {outline: none;} 或 {outline: 0;}`

 

2.列表样式

- `list-style` 属性是一个简写对属性集合

- `list-style`简写，`list-style:none`去掉标识(常用)

- 分开写样式包括:

  - `list-style-type`列表标记

    - `list-style: none;`没有标记

    - `list-style: disc;`默认实心圆点

    - `list-style: circle;`空心圆点

    - `list-style: '♥';`自定义圆点

  - `list-style-image`设置列表标识为小图片

    - url()使用绝对路径或者相对路径

    - 最好放小图，图标大小无法设置

  - `list-style-position`设置标识在 li 的定位

    - `list-style-position: outside;`默认在 li 外

    - `list-style-position: inside;`默认在 li 里

背景

十四、背景

1. 背景颜色

``

2. 背景图片

（1）背景图

- `background-image: url(路径);`

- 路径可以是绝对路径或者相对路径,注意外部 css 的路径

- 背景图必须要求元素具有宽度和高度

 

.bg {

width: 100%;

height: 500px

background-image: url(./img/xz-login/regist.png);

}


（2）背景图和 img 的区别 

- 尺寸角度

  - img 具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）

  - 背景图必须设置宽度和高度 （如同打印）

- 增加内容角度

  - img 图片上不可以直接写文字，除非在 img 盒子外部定位

  - 背景图是可以在图片上写文字的，背景图其实和颜色一样

- 功能角度

  - img 一般用于产品展示，可以根据素材更新

  - 背景图一般左大背景或者更新小图标 icon

3. 背景图平铺

 

 

- `background-repeat:repeat;` 默认值 横向纵向都

- `background-repeat:no-repeat;` 不平铺

- `background-repeat:repeat-x;` x 轴平铺

- `background-repeat:repeat-y;` y 轴平铺

 

4. 背景图定位

- `background-position`可以改变背景图的默认的位置，默认位置在元素的左上角。

- 调整背景图在元素中的位置，有 2 个方向：x 轴方向和 y 轴方向。

  - `background-position:x轴 y轴` 两个方向

  - `background-position-x` 单独定义 x 轴

  - `background-position-y` 单独定义 y 轴

- `background-position`取值

  - 可以使用长度单位，如：px、pt、em、%等

  - 关键字：top、bottom、center、right、left

  - 取值可以为正值和负值，正值向右移动负值向左移动

 

每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

 

 

【练习】

 

> 使用背景图定位将小图片定位在输入框里

input {

width: 200px;

height: 26px;

background-image: url(./img/xz-login/yhm.png);

background-repeat: no-repeat;

background-position: right;

}


5. 背景图尺寸 

- `background-size`属性来控制背景图片的大小.在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值`background-size:x轴拉伸 y轴拉伸;`

- 取值

  - 取 1 个值，这个值指定图片的宽度，图片的高度隐式的为 auto

  - 尺寸可以为 px、pt、em、%

  - cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；

  - contain:容器内至少有一张完整的图，no-repeat 情况下容器会有留白区域。repeat 情况下留白区域则平铺背景图

 

6. 背景的简写方式

- `background:color image repeat position;`简写属性，四组值用空格分开,没有顺序

- background 简写中不包括`background-size`，`size`需要单独写

- background 最简写法可以是 background：color 或者 background：url，其他不可以

- 简写的弊端：简写的方式会覆盖上边定义好的

 

【练习】

> 设置大型背景图

> 学子商城登陆页面（可选取）

 

元素是个盒子

十五、溢出

1.溢出属性

- `overflow: hidden;`溢出隐藏

- `overflow: scroll;`x 轴 y 轴都出现拖动条，子元素不超出也会有滚动条的那条轨道。

- `overflow: auto;`只有溢出的方向出现拖动条

- `overflow: visible;`溢出默认展示

- 单独设定 x 轴或者 y 轴的溢出

  - overflow-x: auto;

  - overflow-y: hidden;

  - 如果 overflow-x、overflow-y 的值相同，则等同于 overflow 设置了这个值。

  - overflow-x：hidden；那么 overflow-y 就会被重置为 auto。

 

2.overflow 与 BFC（清除浮动和清除外边距溢出时着重讲解）

- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，并且与这个区域外部毫不相干。内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出）

-计算BFC的高度时，浮动元素也参与计算。所以形成 BFC 的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了 BFC 的初衷，所以要清除浮动带来的影响。- scroll、auto、hidden 这三个可以触发元素的 BFC 特性。visible 不会。

- 利用 overflow 形成 BFC 的应用：

  - 清除浮动影响：父元素设置 overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。（形成 bfc 结界，与外界隔绝，仅支持 ie7+及现代浏览器）

  - 避免 margin 穿透/重叠问题（形成 bfc 结界，与外界隔绝）

 

【练习】

 

> 一共四张图，横向排列

> 格子里只显示两张图利用横向拖拽条看到另外两张

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

.wai {

/* 只显示两张图 */

width: 200px;

height: 120px;

border: 10px solid black;

/* 给外增加overflow属性出现拖拽 */

overflow: auto;

/* 单独设定x轴或者y轴的溢出 */

overflow-x: auto;

overflow-y: hidden;

}

.nei {

/* 4张图一边大 */

width: 400px;

height: 100px;

/* 去掉幽灵 */

font-size: 0;

}

.nei img {

width: 100px;

}

</style>

</head>

<body>

<div class="wai">

<div class="nei">

<img src="./img/overflow/overflow1.jpg" alt="" />

<img src="./img/overflow/overflow2.jpg" alt="" />

<img src="./img/overflow/overflow3.jpg" alt="" />

<img src="./img/overflow/overflow4.jpg" alt="" />

</div>

</div>

</body>

</html>

　

十六、盒子模型

1. 盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

 

- 一个元素实际占地宽度：

  左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

- 一个元素实际占地高度：

  上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

 

2. 元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

实验div元素增加宽度和高度背景颜色

实验span元素增加宽度和高度背景颜色

 

3. 内边距

 (1) 内边距的属性

- padding 指盒子的“内补间”，宽高之外到边框以内的距离。

- 可以设置长度，如 px、em、rem 等,且不支持负值

- padding 有四个方向分别是上、右、下、左

  - padding-top 上内边距

  - padding-right 右内边距

  - padding-bottom 下内边距

  - padding-left 左内边距

 

 

(2) 内边距的值

- 1 个值，将用于全部的四边。

- 2 个值，第一个用于上、下，第二个用于左、右。

- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

- 4 个值，将按上、右、下、左的顺序作用于四边。

 

4.外边距

外边距的使用场合：元素的位置微调，元素之间的距离调整

(1) 外边距的属性

- margin 指盒子的外边距，外边距是当前元素和其他兄弟元素之间的距离。

- 可以设置长度，如 px、em、rem，%等,%取值都是父元素宽度的百分比取值。

- 正值时是增大该方向外边距，负值时是缩小该方向外边距。

- margin 有四个方向分别是上、右、下、左

  - margin-top 上外边距

  - margin-right 右外边距

  - margin-bottom 下外边距

  - margin-left 左外边距

 

 (2) 外边距的值

和内边距一样，外边距可以简写 1 ～ 4 个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。

- 1 个值，将用于全部的四边。

- 2 个值，第一个用于上、下，第二个用于左、右。

- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

- 4 个值，将按上、右、下、左的顺序作用于四边。

 

(3) margin 的 auto 取值

margin 有一个特殊的取值是 auto，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

- 块级元素在父元素中水平居中`margin:上下距离 auto;`

- 上下距离在没有的时候可以写 0

- 内联素使用 margin：auto，不能完成居中效果

 

 (4) margin 的无效情形

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。

下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，`margin`是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

 

 (5) 自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用

- css reset 进行样式统一 \* {margin：0；padding：0;}

- body : 四个方向各 8px

- ul ： 上下 16px 外边距，“左内边距”40px

 

 (6) 外边距合并现象

- 兄弟元素之外边距合并

- 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

 

(7) 外边距溢出

- 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。

- 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。

- 解决方案

  - 父元素增加`padding-top`缺点：增加了父元素实际高度

  - 增加父元素的边框，缺点：增加了父元素实际高度

  - 父元素增加`overflow: hidden/auto;`，缺点，父元素就不能溢出显示内容了

  - 使用空`<table></table>`放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

  - 使用 CSS3 伪元素`::before`给父元素添加内容,源于增加空`<table></table>`

.box::before {

content: "";

display: table;

}


5. 不同元素的盒子模型（重点） 

(1) 内联元素盒模型

内联元素的宽高是 auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

- 宽度高度是 auto，靠内容撑开

- 设置宽度高度无效

- 设置上下内外边距无效

- 排列方式，从左至右

 

 (2) 块级元素盒模型

- 块级元素就可以设置宽度和高度，

- 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。

- 宽度高度可以设置

- 内外边距设置均有效果

- 排列方式，从上至下

 

【练习】

> 利用老师给的 html 结构，完成咸蛋超人

> 使用外边距和元素的特性完成

> 能力强的同学可以加上手臂

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

.tou {

width: 400px;

height: 430px;

border-radius: 50%;

border: 5px solid black;

margin: 100px auto;

}

.jian {

width: 60px;

height: 200px;

border: 5px solid black;

 

border-radius: 25% 25% 50% 50%;

margin: -20px auto;

}

span {

display: inline-block;

width: 100px;

height: 100px;

 

border: 5px solid black;

border-radius: 50%;

margin-left: 60px;

}

.zui {

width: 200px;

height: 20px;

margin: 30px auto;

border-top: 3px solid black;

border-radius: 30px;

}

</style>

</head>

<body>

<div class="tou">

<div class="jian"></div>

<span></span>

<span></span>

<div class="zui"></div>

</div>

</body>

</html>

　　

6. 盒子模型的计算方式 

 

- `box-sizing: content-box;` 标准盒子模型

  - 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

  - 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

- `box-sizing:border-box` 改变盒子模型计算方式

  - 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度

  - 设置的高度 height = 上下 border + 上下 padding + 内容的高度

  - 注意：可能会导致内容溢出，需要时再使用

【练习】

> 利用内边距的效果完成以上图片效果

> 综合练习，结合背景，外边距，内边距

背景图做学子商城登陆界面

 

 

 

浮动和流体布局

十七、浮动和文档流

1. 默认文档流

- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性

- 默认文档流,画格子,内联和块级

  - 内联元素，从左向右排列

  - 块级元素，从上向下排列

 

2. 脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：

- float 浮动

- position 定位(绝对定位、固定定位)

 

2. 浮动

- 子元素在父元素中浮动，会使其脱离文档流，

导致父元素对其的管理能力

- 浮动属性

  - `float：none`默认不浮动

  - `float：left`左浮动

  - `float：right`右浮动

 

(1)浮动过程：

- 脱离文档流不再撑起父元素

- 不再自占一行

- 在元素浮动的“当前行”向左或向右对齐

 

 (2)元素浮动特点

1.元素浮动后对父级的高度有影响，不再撑起父级的高度

2.元素浮动后可以在父元素的左侧或右侧排列

3.元素浮动后不自占一行

4.元素浮动后会对后面的文档流中的兄弟元素产生影响会遮盖其后面的兄弟元素

5.内联元素浮动后，自动变成块级元素

6.浮动元素仍受父元素影响，还是在父元素的范围内

7.当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行

8.当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域（见元素占位示意图）

9.当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素和行内块）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素四周显示。解决方案包裹文字的元素浮动在前一个元素侧面。（见文字环绕示意图）

 

 

3. 清除浮动

- 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

- 浮动的影响父元素无高度

- 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

（1）利用高度解决

 

给父元素高度，弊端是未必知道子元素的高度

（2）父元素也浮动

父元素浮动，会影响父元素的兄弟元素

（3）父元素溢出隐藏

overflow：hidden/auto，父元素中的子元素可能会被隐藏（利用BFC 块级格式化上下文中，使用该属性可保证浮动元素也可以被计算入父级的高度）

（4）用伪元和clear属性素解决

给父元素增加一个在尾部的伪元素

.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

*zoom: 1;

} /*IE/7/6*/

　　【练习】 

 

4. 浮动流体布局

PC 端页面会有一个内容部分的固定宽度（例如：1200px、1190px、1004px、960px 等等）。

液晶还没普及的年代，网页设计需要考虑 800×600 的分辨率。之后，液晶屏开始普及，1024×768，使用率接近 50%(国内)，所以很多网站都是以 1024 的宽度为标准进行设计的。

现在的液晶屏大小已经变得多样化，4k 时代到来，高分辨率，让 pc 端页面布局的宽度设计变得更加要复合用户群。

 

(1) 分析 pc 端页面布局特点

pc 端布局都存在一个用于适应最小屏幕显示的居中元素。一般会把内容的结构都放在这个居中的元素中，左右两侧留白。

因此在 pc 端布局中，可以在用于划分某个部分的元素内部加入一个用于居中的元素。如：

 

 (2) CSS reset

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。这就是CSS reset。

/* 星号的效率过低，非练习时可以自定义某些元素去掉margin: 0;padding: 0; */

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

ul {

list-style: none;

}

/* 清除浮动 */

.clearFloat:after {

content: "";

display: block;

clear: both;

}

.clearFloat {

*zoom: 1;

}

/* 如：针对学子商城居中1000宽度 */

.center {

width: 1000px;

margin: 0 auto;

}

　　


【练习】 

见练习图下方，罗马风情，尽量写

 

 

定位的元素

十八、定位

1.position 属性

- `position`属性是定位属性，用于指定一个元素在文档中的定位方式。

- top，right，bottom 和 left 属性值则决定了该元素的距离四边的位置，可以为负值。

- 开发中多用绝对长度单位 px 进行调整，如果在移动端中，可以使用 rem、vw 等单位进行调整。

- 常用取值：

  - `relative` 相对定位

  - `absolute` 绝对定位

  - `fixed` 固定定位

 

2.相对定位

- 相对定位 position: relative 不脱离文档流。

- 可使用 top，right，bottom 和 left 做偏移。

- 元素相对的位置是自己本来的位置，移动不改变页面布局。

- 相对定位属性不会影响周围的布局，但会出现新的层叠顺序。

- 当四个方向值发生重合时，以 top 和 left 为优先。

 

3.绝对定位

- absolute 绝对定位，元素将脱离文档流，其他元素不为该元素预留空间。

- 它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有 position 属性时，该元素就会以这个祖先元素的原点为参照点。

- 可使用 top，right，bottom 和 left 做偏移。

- 当四个方向值发生重合时，以“上 top”和“左 left”为优先。

- 绝对定位的元素可以设置外边距，且不会与其他边距合并。

- 应用场景背景图中的文字和按钮，轮播图中的控制符

 

（1）子元素在父元素中定位

 

（2）子元素在父元素内居中

使用元素定位，让已知高度的子元素在父元素中上下左右居中

<style>

    .baba {

      width: 500px;

      height: 400px;

      

      position: relative;

    }

    .erzi {

      width: 150px;

      height: 200px;

      background-color: blue;

      position: absolute;

      left:50%;

      top:50%;

      margin-left: -75px;

      margin-top: -100px;

    }

  </style>

</head>

<body>

<div class="baba">

  <div class="erzi"></div>

</div>

</body>

　　


4.固定定位 

fixed 固定定位是元素，决定它的“包含块”是 html，唯一可以限定固定定为元素的就是 html 跟元素

- `position: fixed;`它到父级始终是 html

- 直接在窗口的某个位置固定

- 可使用 top，right，bottom 和 left 做偏移。

 

(1)居中的弹窗

固定定为，元素在父元素中居中

* {

margin: 0;

padding: 0;

}

.alertBox {

width: 300px;

height: 200px;

color: red;

 

position: fixed;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -150px;

}


(2)返回顶部元素 

  
 <style>

    * {

      margin: 0;

      padding: 0;

    }

    .pic {width: 100%;}

    .pic img {

      width: 100%;

      display: block;

    }

    .top {

      width: 100px;

      height: 100px;

      border-radius: 5px;

      

      font-size: 30px;

      text-align: center;

      line-height: 100px;

      position: fixed;

      bottom: 100px;

      right: 100px;

    }

    .top a {

       color: #fff;

       text-decoration: none;

    }

  </style>

<body>

<div class="pic">

  <img src="./img/固定定位长图背景.jpg" alt="">

</div>

<div class="top">

  <a href="#">TOP</a>

</div>

</body>

</html>

5.z-index

z-index 就是 z 轴的顺序，z-index 可以设置字符值，如：auto，多数情况设置整数值，可以为负值。z-index 的最大值是 21,4748,3647 (21 亿多)。跨度尽量 10 以上

 (1) 层叠顺序取值

- `z-index`层叠顺序

- 直接设置没有单位的整数，可以为负值，值越大层级越高

 

 

 (2) 层叠领域的准则

- 值大的在上：z-index 的值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的。

- 后来的在上：当元素的层叠水平一致的时候，在文档流中处于后面的元素会覆盖前面的元素。

  
<!-- 移动端固定背景,要用浏览器移动端打开 -->

<style>

.box {

width: 100%;

position: fixed;

z-index: -1;

}

</style>

<div class="box">

<img src="./img/手机背景图750x1334@2.jpeg" alt="" />

</div>

<p>Lorem*3</p>

　　

【练习】

>背景图

>浮动布局

>定位

 

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="./cssReset.css">

  <link rel="stylesheet" href="./index.css">

  <style></style>

</head>

<body>

  <div class="bg">

    <div class="nav-part">

      <div class="center">

        <ul>

          <li><a href="#">HOME</a></li>

          <li><a href="#">LOGIN</a></li>

          <li>

            <a href="#">LIST</a>

            <ol>

              <li>全国图鉴</li>

              <li>属性介绍</li>

              <li>精灵石大全</li>

              <li>精灵球</li>

            </ol>

          </li>

          <li><a href="#">CARD</a></li>

          <li><a href="#">SEARCH</a></li>

        </ul>

      </div>

    </div>

    <div class="ball-part">

      <div class="center">

        <ul>

          <li>

            <img src="./img/1.png" alt="">

            <a href="#">训练师登录</a>

          </li>

          <li>

            <img src="./img/2.png" alt="">

            <a href="#">精灵列表</a>

          </li>

          <li>

            <img src="./img/3.png" alt="">

            <a href="#">精灵卡片</a>

          </li>

          <li>

            <img src="./img/4.png" alt="">

            <a href="#">精灵检索</a>

          </li>

        </ul>

      </div>

    </div>

  </div>

</body>

</html>

　　

十九、渐变

1. 线性渐变

(1) 颜色和角度

- `background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色，才能体现出颜色的变化

- `linear-gradient()`渐变颜色的参数用逗号分开，可以写多种颜色表达方式

- 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向

  - `90deg` 角度

  - to 终点 关键词，就是终点在哪个位置，top，left，right，bottom，记得加空格 （不建议使用）

 

【练习】

 

> 使用七种颜色作出彩虹渐变效果

> 颜色可以使用任何表示色值的方式

 

【练习】

 

> 渐变的导航,颜色自定义

> 导航总宽度 1000px 高度 30px  

> 需要加入鼠标悬停改变背景颜色的效果

 

 (2) 渐变的比例

- `background-image：linear-gradient(方向，颜色1 起始值 结束值，颜色2 起始值 结束值，颜色n 起始值 结束值……)`

- 多个颜色渐变时，渐变的区域需要调整，可采取控制颜色范围的方法。在函数内颜色的后面加入长度单位（如 px 或%）用空格分隔。

- 【注意】浏览器版本低时，渐变的开始值和结束值无效。需要升级浏览器版本，下载谷歌新版浏览器。

  
div {

width: 600px;

height: 300px;

border: 2px solid black;

background-image: linear-gradient(

90deg,

green 0 200px,

yellow 200px 400px,

red 400px 600px

);

}

　　

2. 径向渐变

(1) 渐变方向和范围

- `background-image: radial-gradient(color1,color2,……);`

- background-image：radial-gradient(颜色 1 起始值 结束值，颜色 2

起始值 结束值，颜色 n 起始值 结束值……)

 

 

(2) 半径

- `background-image: radial-gradient(半径,颜色1,颜色4,颜色3);`

- `background-image: radial-gradient(x轴半径 y轴半径,颜色1,颜色4,颜色3);`

- 半径只传入一个参数，则表示该渐变形状为圆

- 半径可以使用 px

- 【注意】真实的渐变控制如果比外层空间小，剩下都是部分会被最后一个颜色填充

 

 (3) 圆心起点

- background-image: radial-gradient(x 轴半径 y 轴半径 at x 轴圆心 y 轴圆心,颜色 1 起始值 结束值，颜色 2 起始值 结束值……)

- 在圆心后面增加 at 空格 x 轴 y 轴的原点位置，可以使用长度单位或关键词。取值可使用 px，% 或者关键词：left/top/bottom/right

 

- 注意重点

  - 半径只传入一个参数，则表示该渐变形状为圆

  - 颜色范围用的百分比,半径变化，百分比参照半径

  - 颜色范围用的是 px，则不会因为半径的变化而变化

 

d1 {

background-image: radial-gradient(

50px at left top,

yellow 0 50px,

#222 100px

);

}

.d2 {

background-image: radial-gradient(50px at 20% 30%, yellow 0 50px, #222 100px);

}

　　


3. 重复的渐变 

- 注意重复的渐变要求浏览器版本，版本过低的浏览器版本无法查看效果

- `background-image: repeating-linear-gradient()` 重复的线性渐变

- `background-image: repeating-radial-gradient()` 重复的径向渐变

- 当半径过小，页面分辨率显示效果会怪异

.d1 {

background-image: repeating-linear-gradient(red 0 2px,yellow 4px 6px,green 8px 10px);

}

.d2 {

background-image: repeating-radial-gradient(

red 0 2%,

yellow 2% 4%,

green 4% 6%

);

}

　　


【练习】 

 

> 信封用重复渐变 background-image: repeating-linear-gradient(-45deg,#f00 0 10px,#fff 10px 20px,#00f 20px 30px,#fff 30px 40px)  

 

4. 对渐变的兼容

渐变效果不支持低版本浏览器，之前关于 css3 的浏览器兼容，厂商的私有前缀

浏览器厂商制作的浏览器，不同时期对 css 的兼容不同，每个浏览器都有自己的内核

查看学子商城渐变的写法，对应每一个内核都要写一遍，要写四遍。但最终只会按照当前浏览器的内核执行对应的代码

 

（1）浏览器私有前缀

- `-webkit-` 浏览器：chrome/safari/edge

- `-moz- ` 浏览器：firefox

- `-o- ` 浏览器：opera

- `-ms-` 浏览器：IE

 

（2）渐变的方向

- 不写私有前缀，要写终点的方式，如 to bottom

  - 没有私有前缀正确写法:`background-image: linear-gradient(to bottom,red,yellow);`

  - 没有私有前缀错误写法:`background-image: linear-gradient(bottom,red,yellow);`

- 写私有前缀要写起点的方式 如 top

  - 有私有前缀正确的写法:`background-image: -webkit-linear-gradient(top,red,yellow);`

  - 有私有前缀错误的写法:`background-image: -webkit-linear-gradient(to top,red,yellow);`

 

二十、css3 高级选择器

1.属性选择器

属性选择器可以使用`[]`将元素的属性名称放入其中，从而通过查找具有该属性的元素来设置其样式。

元素的属性包括：

预定义属性：如`id、class、style、title、src、href`等

自定义属性：随意指定的属性名如 abc、w123 或 更标准的自定义属性写法 `data-* `

 (1)简单属性选择器

- 具有某个属性的元素，如 id、class ： `[属性名]{样式声明} `

- 特指某个元素具有某个属性，如`p[class]：元素名[属性名]{样式声明}`

- 具备多个属性的元素，如`[id][class] : [属性名1][属性名2]{样式声明}`

- 特指某元素具备多个属性：`元素名[属性名1][属性名2]{样式声明}`

 

 (2)筛选属性选择器

- 元素的属性名的值为什么，如 id=mydiv ：`[属性名=值]{样式声明} `

- 元素的属性名以什么值开头：`[属性名^=开头的字段]{样式声明}`

- 元素的属性名以什么值结尾：`[属性名$=结尾的字段]{样式声明}`

- 元素的属性名包括某字段的值：`[属性名*=包含的字段]{样式声明}`

- 元素的属性名包括某独立的字段值：`[属性名~=包含的字段]{样式声明}`

 

【练习】

> 动图和静态图一起排列

> 给动态图增加动图的标签

 

2.目标伪类选择器

- 对应锚点被激活时，匹配的样式,使用 a 标签的 href 属性连接元素锚点

- `选择器:target{样式声明}`

<style>

div {

width: 200px;

height: 200px;

font-size: 60px;

text-align: center;

border: 1px solid black;

}

div:target {

 

}

/*可以做成类似tab切换效果*/

div {

display: none;

}

div:target {

display: block;

}

</style>

<a href="#div1">选择1</a>

<a href="#div2">选择2</a>

<a href="#div3">选择3</a>

<div id="div1">div1</div>

<div id="div2">div2</div>

<div id="div3">div3</div>

　　


3.结构性伪类选择器 

- 匹配父元素的第一个孩子 ：`父元素>:first-child {样式声明}`

- 匹配父元素的最后一个孩子 ：`父元素>:last-child {样式声明}`

- 匹配父元素的第 n 个孩子： `父元素>:nth-child(n) {样式声明}`

- 匹配内部没有任何内容（包含文本）的标签 ：`父元素 >:empty{ 样式声明}`

- 匹配父元素的唯一子元素：`父元素 >:only-child{样式声明}`

- 使用`not()`参数为选择器，否定该括号内选择器的其他所有选择器，类似于取反：`父元素 >:not(不想要的选择器){样式声明}`

- 【注意】`div:nth-child(2)` 与 `div>:nth-child(2)` 有区别。

.box1 {

 

height: 100px;

}

.box1 > div {

height: 100px;

width: 100px;

float: left;

}

.box1 > :first-child {

background-color: yellow;

}

.box1 > :last-child {

background-color: plum;

}

.box1 > :nth-child(2) {

background-color: purple;

}

.box1 > :empty {

background-color: saddlebrown;

}

ul > :only-child {

background-color: red;

}

/* 除了谁之外的所有人 */

ul > :not(.cqbhj) {

color: green;

}

　　

弹性布局

二十一、弹性布局

弹性布局是 css3 主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。

给父元素家 display：flex；使子元素横向排列，不用每个子元素浮动了

父元素不需要清除浮动了，高度依然被子元素撑开

1.弹性布局的基本概念

(1)容器和项目

使用 flex 布局的元素（父元素），称为"容器"

它的所有“子元素”自动成为容器成员，称为 "项目"

它们各自有控制布局的属性，必须是容器包裹着项目

 

 

 (2)主轴

主轴就是项目的排列方向，主轴会出现四个方向：

- x 轴：起点在左侧

- x 轴：起点在右侧

- y 轴：起点在顶端

- y 轴：起点在底端

(3)交叉轴

交叉轴就是在主轴的垂直方向，项目可在交叉轴上移动

 

2.将容器指定为 flex 布局

- 任何一个容器都可以指定为 Flex 布局:

- 行内元素也可以使用 Flex 布局:

- 注意，设为 Flex 布局以后，子元素的 float、clear 等属性将失效。

 

3.容器的属性

 (1)主轴的方向

`flex-direction` 代表主轴的方向，即项目的排列方向

- row 左向右

- row-reverse 右向左

- column 上向下

- column-reverse 下向上

.box {

/*            左向右    右向左        上向下      下向上 */

flex-direction: row | row-reverse | column | column-reverse;

}

(2)项目换行 

默认情况下，项目都排在一条线上。`flex-wrap`属性定义如果一条轴线排不下，如何换行的模式。

- nowrap 默认不换行

 

  - wrap 换行

 

- wrap-reverse 反向换行

 

.box {

/*          默认不换行  换行    反向换行 */

flex-wrap: nowrap | wrap | wrap-reverse;

}

 

(3)主轴和换行的简写方式 

`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`横向排列不换行。

.box {

flex-flow: <flex-direction> || <flex-wrap>;

flex-flow: row wrap; /*横向换行*/

flex-flow: column nowrap; /*纵向不换行*/

}

(4)主轴上的对齐方式 

`justify-content`属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。

前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果。

 

- flex-start 默认起点对齐

- flex-end 终点对齐

- center 居中对齐，一起居中

- space-between 两端对齐，项目之间的间隔都相等，左右贴边

- space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

.box {

  justify-content: flex-start |  默认起点对齐

  flex-end | 终点对齐

  center | 居中对齐，一起居中

  space-between | 两端对齐，项目之间的间隔都相等，左右贴边

  space-around; 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

}

(5)交叉轴对齐方式 

`align-items`属性定义项目在交叉轴上如何对齐，"前提是"前提是项目换行,容器的垂直轴方向是有独立高度或者宽度的。注意：多行项目会有行间距离

 

- flex-start 交叉轴的起点对齐

- flex-end 交叉轴的终点对齐

- center 交叉轴的中点对齐

- baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来

- stretch 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度

.box {

  align-items: flex-start | 交叉轴的起点对齐

  flex-end | 交叉轴的终点对齐

  center | 交叉轴的中点对齐

  baseline | 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来

  stretch;默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

}

　　

(6)多轴线对齐方式

`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 

- flex-start 与交叉轴的起点对齐。

- flex-end 与交叉轴的终点对齐。

- center 与交叉轴的中点对齐。

- space-between 第一行和最后一行贴开始和结束，其他均分中间位置

- space-around 每行间距两侧或上下间距相等，比边框间距大一倍

- stretch 默认值

 

.box {

  align-content: flex-start |与交叉轴的起点对齐。

   flex-end |与交叉轴的终点对齐。

    center |与交叉轴的中点对齐。

    space-between |第一行和最后一行贴在开始位置和结束位置，其他均分中间位置

    space-around |每行间距两侧或上下间距相等，比边框间距大一倍

    stretch;(默认值)

}

　　

【练习】素材在flex27 任选一题

 

 

4.项目属性

 (1)项目排列数次序（排队拿号）

- `order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

- 相当于拿号排队，默认是原有元素的顺序，这个是可以重新更改的，单独设置给每个项目，值越大排的越靠后。

- 调整顺序用的不是很多，因为有点反人类思维

.item {

order: ; /*数值，值越大排的越靠后，默认为0;*/

}


 (2)项目的放大比例（多吃多占） 

- `flex-grow`属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大

- 当项目设置了该属性之后，原来的宽度或宽度失效。

- 项目不换行时：

  - 父元素有多余的空间，设置放大比例的元素按照比例占据多余空间

  - 父元素没有多余空间，当父元素总长度等于和低于元素宽度或者高度相加总和时，元素们同等比例缩小，无特殊化，放大比例失效。

- 项目换行时：

  - 父元素会有多余空间，因为只要空间不够就换行了，只要有多余空间，放大比例元素会在当前行按照自己的比例分隔剩余空间。默认比例的元素会正常按照宽度占位

  - 父元素宽度与元素宽（高度）相加正好相等，多余空间是 0，那么设置放大比例的元素，则暂时不会变更宽度。

.item {

flex-grow: number比例值; /* default 0 */

}


 (3)项目的缩小比例（缩水比例） 

- `flex-shrink`属性定义了项目的缩小比例，默认为 1，负值无效。

- 前提是容器设置不换行才能看出效果，容器设置宽度看的更清晰

- `flex-shrink：0`：项目不换行容器缩小，其中的项目同等压缩，但设置了 flex-shrink：0 的项目不会压缩，会保持自己的宽度（高度）也就是不参与压缩

- `flex-shrink`：其他值如 2、10 等，缩小比例值越大，缩小的比重就越大

.item {

flex-shrink: <number>缩小比例值; /* default 1 */

}


 (4)项目的自动尺寸（特立独行） 

- 当`flex-basis`和`width`属性同时存在时，`width`属性不生效

- flex 布局有多余空间时，item 的宽度为`flex-basis`设置的宽度

- 当 flex 空间不够时，由于`flex-shrink`的默认值为 1，所以所有 flex items 容器等比例被压缩，设置`flex-basis`的项目也会按照最大值的相对比例压缩，不会和其他元素比例相同。

.item {

flex-basis: <length>如200px | auto; /* default auto */

}


 (5)flex 属性简写 

flex 属性是 flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为 0 1 auto。后两个属性可选。

 常用设置是：flex:0 0 ??px;  不放大，不缩水，占多少尺寸

 

元素的动效

二十二、过渡

transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。

 

1.过渡属性的名称

- `transition-property` 过渡样式

  过渡一定是有变化都，在 css 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是`background-color`

- 当过渡多个样式的时候可以写 all

 

2.过渡需要的时间

- `transition-duration`如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。

- 过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s

 

3.过渡的方式

- `transition-timing-function`过渡方式,过渡方式的不同而在运动中改变速度

- 贝塞尔曲线函数是非常复杂`http://www.css3beziercurve.net/` 函数是非常复杂的，但是在

- css 中为我们封装了 5 种

  - 默认值，先慢再快最后慢`transition-timing-function:ease;`

  - 先慢，后越来越快`transition-timing-function:ease-in;`

  - 速度在开始和结束时都很慢,中间不加速`transition-timing-function:ease-in-out;`

  - 先快，后越来越慢`transition-timing-function:ease-out;`

  - 匀速`transition-timing-function:linear;`

div {

transition-property: all;

transition-duration: 1s;

/*默认值，先慢再快最后慢*/

transition-timing-function: ease;

/*先慢，后越来越快*/

transition-timing-function: ease-in;

/*速度在开始和结束时都很慢,中间不加速*/

transition-timing-function: ease-in-out;

/*先快，后越来越慢*/

transition-timing-function: ease-out;

/*匀速*/

transition-timing-function: linear;

}

　　


4.过渡的延迟时间 

- 过渡的延迟时间 `transition-delay`在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。

- 取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

 

5.简化写法

- 顺序是 transition：过渡时间 延迟时间 过渡方式 过渡样式

- 注意“执行时间和延迟时间的顺序”不能改变

- 最简写法：transition：过渡时间；

 

CSS3 过渡动画模板、CSS3 Transition 动画模板 http://web.chacuo.net/css3transition

 

6.多重样式过渡

使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。

 

div {

width: 100px;

height: 100px;

position: relative;

 

left: 0;

/* 注意第二个的延迟时间 */

transition: 1s linear background-color, 1s 1s left;

}

body:hover div {

left: 400px;

background-color: blue;

}

　　

二十六、变化

CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。

变换分为两种：2D（重点）和 3D，需要知道三个轴 xyz。

 

1.transform 变化属性

四个最常用的变化函数，分别是：

- translate 位移

- scale 缩放

- rotate 旋转

- skew 扭曲

 

2.translate()位移函数

translate()在变换中位移可以有 X 轴、 Y 轴、Z轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度和高度，正直或者负值均可。Z轴的位移只有在父元素具有透视的效果下才可以看到。

- `transform: translateX(x); ` 沿 X 轴方向平移 正值右移 负值左移

- `transform: translateY(y);` 沿 Y 轴方向平移 正值下移 负值上移

- `transform: translate(x, y);` 沿 X 轴和 Y 轴同时平移

- 注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局

 

元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要

.box div {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

3.rotate()旋转函数 

- rotate()函数在 2d 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。

- 参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。

- 旋转中心点，是元素最中心的点

 

4.scale()缩放函数

- scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小

- 1 以上的“正数”为当前大小的倍数。

- 1 以下 0 以上的“正数”为缩小的倍数。

- 0 倍为消失

- 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

5.skew()倾斜扭曲函数

- skew()在 2d 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度

- 填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。

- skew()默认为 X 轴倾斜函数

 

7.变换函数的执行顺序

当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个 transform 属性中，用空格分隔。但存在前后顺序问题。

 

用控制台改变旋转角度看效果 div:nth-child(1):hover {

transform: translateX(200px) rotate(60deg);

}

用控制台改变旋转角度看效果 div:nth-child(2):hover {

transform: rotate(60deg) translateX(200px);

}

　　

 

 

8.基点

transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

 

- 在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

- transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。

- 当取值为长度值时，单位可以为 px、em 和百分比等。

 

9.透视效果

 

 

 (1)透视

在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。

perspective 属性值越大，元素的变形就越小。

perspective 属性值越小，元素的变形就越大。

 

- perspective 属性定义透视距离，距离为长度单位

- 模拟人眼睛到 3D 变化元素之间的距离

- 【重点】透视距离只能定义在 3D 变化的父元素上

 

(2) transform-style

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

- 让盒子位于三维空间里transform-style: preserve-3d;    

- 让子盒子位于此元素所在的平面内(默认)transform-style: flat;

 

 

 (3)旋转函数 x 轴和 y 轴

2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。

- `transform:rotateX(deg);`x 轴旋转

- `transform:rotateY(deg);`y 轴旋转

 

 

(4)位移函数 z 轴

3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。

- transform: translateZ(正值) 沿z轴向前（接近模拟视觉的距离）

- transform: translateZ(负值) 沿z轴向前（远离模拟视觉的距离）

 

 

【练习】

让扑克牌旋转起来具有正反两个面

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <style>

    .box {

      width: 300px;

      height: 300px;

      border: 1px solid black;

      margin: auto;

     perspective: 300px;

    }

    .box:hover .pk {

      transform: rotateY(360deg);

    }

    .pk {

      border: 1px solid blue;

      width: 205px;

      height: 289px;

      margin: auto;

      position: relative;

      transition: 3s;

      transform-style: preserve-3d;

    }

    .pk>div {

      width: 205px;

      height: 289px;

      position: absolute;

    }

    .a {

      background-image: url(./扑克a.jpg);

    }

    .b {

      background-image: url(./扑克b.jpg);

      transform: translateZ(-1px) scaleY(-1);

    }

  </style>

</head>

<body>

  <!-- 205*289 -->

  <div class="box">

    <div class="pk">

      <div class="a"></div>

      <div class="b"></div>

    </div>

  </div>

</body>

</html>

　　

二十四、动画

动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js 来体现动画效果，因为动画是渲染式的。

 

1.关键帧

`@keyframes` 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

@keyframes move {

0% {transform: translate(0);}

100% {transform: translate(600px);}

}

　　


2.动画名称 

`animation-name`属性就是指定动画要使用哪一个关键帧。

div {

width: 100px;

height: 100px;

 

/*这个元素使用关键帧*/

animation-name: move;

}

@keyframes move {

0% {

transform: translate(0);

}

100% {

transform: translate(600px);

}

}

　　


3.动画持续时间 

`animation-duration`属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。

div {

/*这个元素使用关键帧*/

animation-name: move;

/* 动画时长 */

animation-duration: 1s;

}

@keyframes move {

0% {

transform: translate(0);

}

100% {

transform: translate(600px);

}

}

`animation-timing-function`属性跟`transition-timing-function`属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。4.动画的运动方式

- ease;默认

- ease-in;

- ease-out;

- ease-in-out;

- linear;

- steps(数值, 定位) 定位：start/end 默认 end 指逐步运动

 

　　

【练习】

> 使用 steps()函数完成，逐帧完成动画效果

> loding 图标分为四段和八段完成帧动画

 

div {

width: 30px;

height: 30px;

margin: 20px auto;

animation-name: zhuan;

animation-duration: 1s;

}

@keyframes zhuan {

0% { transform: rotate(0deg);}

100% {transform: rotate(360deg);}

}

.a1 {

animation-timing-function: linear;

} /*平滑的旋转*/

.b1 {

animation-timing-function: linear;

} /*平滑的旋转*/

.a2 {

animation-timing-function: steps(4);

} /*断续旋转分4段*/

.b2 {

animation-timing-function: steps(8);

} /*断续旋转分8段*/

　　


5.动画的延迟时间 

`animation-delay`属性动画的延迟时间和之前过渡的延迟时间一样使用

div {

/*这个元素使用关键帧*/

animation-name: move;

/* 动画时长 */

animation-duration: 1s;

/* 运动方式 */

animation-timing-function: linear;

/* 动画延迟时间 */

animation-delay: 2s;

}

　　


6.结束状态 

在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置

- `animation-fill-mode`:设置动画结束时盒子的状态

- 属性值：`forwards`保持动画结束后的状态

- 属性值：`backwards`动画结束后回到最初的状态

 

7.动画化执行顺序

animation-direction 属性是动画的执行顺序

- 属性值：normal 正向，默认值

- 属性值：reverse 反向

 

8.动画循环次数

- `animation-iteration-count`属性主要用来定义动画的播放次数。

- 其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。

- 如果取值为`infinite`，动画将会无限次的播放。

 

9.简写方式

- animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;

- 最简方式 animation: 动画执行时间 执行关键帧名称;

- 执行时间和延迟时间顺序不可调整

- `animation: 2s 3s move linear 1 forwards reverse;`

 

10.动画停止

- animation-play-state 属性规定动画是否正在运行或暂停。

- 属性值：running 运动的，默认值

- 属性值：paused 暂停的

 

.box:hover .hsl {

animation-play-state: running;

animation-play-state: paused;

 

}


【练习】 

> 学子商城滚动态

> 使用学子商城的图片，文字尽量写两行以内，保持一致行数

> 鼠标移入滚动区域是停止滚动，移开恢复滚动

 

11.开源 CSS 动画库

- animate.css 下载下载:http://www.animate.net.cn/

- 元素加入需要的类名

- 当前元素使用 animate 属性，属性值为类名和运行时间

- 需要在元素先加上 `animate__animated` 类，之后在加入其他类

 

<head>

<link rel="stylesheet" href="./animate.min.css" />

<style>

div {

width: 200px;

height: 100px;

 

animation: 1s animate__rubberBand;

}

</style>

</head>

<body>

<div class="animate__rubberBand">元素</div>

<div class="animate__animated animate__shakeX" id="div2">自动调用</div>

</body>

　　

二十五、响应式布局

1.多终端开发

- 现今需求从 pc 增加到移动端，移动端的发展迅速

- 多种规格的终端产生 pad，各种手机，手表，三维立体影像

- 用户在操作时的便捷，比如手机很小按钮的大小比例

 

2.响应式布局的产生

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在多种终端上有更好的浏览阅读体验。（参考站长素材 https://sc.chinaz.com/moban/）

- 响应式也叫自适应网页，可以根据“浏览设备”的不同改变布局样式和文本及图片的效果。

- 同时要考虑，设备的屏幕横置等因素。

 

3.视口的设置

- 视口（viewport）可以理解为浏览器窗口，不包含浏览器的内容。使用视口约束浏览器大小，让内容区域完全展示在用户面前。

- 响应式和移动端页面必须设置视口，pc 看不出效果

  `<meta name="viewport" content="属性名=属性值">`视口的设置通过 content 属性设置需要的值，如果 content 后面有多个属性，则属性与属性之间用英文逗号隔开

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

- width=device-width 视口宽度为设备宽度（device 设备） 

- initial-scale=1.0 初始化视口不缩放

- maximum-scale=1.0 最大是缩放倍率（不缩放）

- user-scalable=0 用户不能缩放

- 简写方式`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

 

4.注意事项

- 多用流式布局（文档流+浮动）和弹性布局，少用定位

- 文本，图片，尺寸尽量写相对单位，少用绝对单位

- 复杂页面不适和使用适应响应式

 

5.媒体查询

 

- media 媒体类型，浏览网页的设备

  - screen：pc/pad/phone

  - TV

  - print： 打印机，部分手表，冰箱的显示屏等

  - all： 所有设别

- 屏幕尺寸（从 bootstrap 中遍历出来的，min-width）

  - 超小屏幕 (max-width:576px)

  - 小屏幕 (min-width: 576px) and (max-width: 768px)

  - 中屏幕 (min-width: 768px) and (max-width: 992px)

  - 大屏幕 (min-width: 992px) and (max-width: 1200px)

  - 超大屏幕 (min-width: 1200px)

 

总结语法：

 

```css

@media 媒体类型 and (尺寸范围) {

  样式列表1

  样式列表2

  样式列表n

  样式列表……

}

或者

@media (尺寸范围) {

  样式列表1

  样式列表2

  样式列表n

  样式列表……

}

```

 

根据以上的屏幕尺寸，改变 body 的颜色

/* 注意空格 注意and */

@media screen and (min-width: 576px) and (max-width: 768px) {

body {

 

}

}

　　


6.Viewport Width 和 Viewport Height 

(1)vw 和 vh

- vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位。

- “视区”所指为浏览器内部的可视区域大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

- vw:1vw 等于视口宽度的 1%

- vh:1vh 等于视口高度的 1%

 

 

(2)兼容性

- chrome 20

- firefox 19

- IE 9.0

- opera 20.0

- safari 6.0

 

 (3)优势

- % 是相对于父元素的大小设定的比率， vw、 vh 是视窗大小决定的。

- vw、 vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

- 元素会根据视口的大小设定宽高,切换手机型号查看效果

 

 


 
 
  


  

 

 

posted @ 2021-10-13 19:15  野居青年  阅读(175)  评论(0)    收藏  举报
/*鼠标跟随效果*/ /* 点击爆炸效果*/ /* 鼠标点击求赞文字特效 */