CSS

最新推荐文章于 2024-09-24 11:41:48 发布

柚子柚子蜜

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量343

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44129933/article/details/110007106

版权

HTML主要做结构，显示元素内容
CSS是层叠样式表的简称（CSS样式表）
主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框样式、边距等）、版面的布局和外观显示样式。
语法格式：选择器{样式}

1.CSS基础选择器

1.1选择器的作用

选择标签

1.2选择器分类

选择器分为基础选择器和复合选择器
基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id选择器和通配符选择器

1.3标签选择器

HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

1.4类选择器

单独选一个或者某几个标签
样式用点定义，结构类调用，一个或多个，开发最常用

.类名 {
  属性1： 属性值1；
  .....
}

1、多类名使用方式：多类名中间用空格分开

<div class="red font35">亚瑟</div>

2、多类名使用场景
合并同类项，节省CSS代码，方便统一修改

1.5 id选择器

样式用#定义，结构id调用，只能调用一次，其余标签切勿使用

#id名 {
  属性1： 属性值1；
  .....
}

1.6 通配符选择器

“*”：表示选取页面中所有元素

2.CSS字体属性

p { font-family:'Microsoft Yahei'}（微软雅黑）
p { font-size:20px;} 字体大小（可以给body指定整个页面文字的大小）
p { font-weight: 700（bold加粗）/normal(400不加粗)} 字体粗细（提倡使用数字）
p { font-style: normal（正常）/italic（斜体）} （文本风格）

字体复合属性：简写的方式，节约代码（不能颠倒顺序，必须保留font-size和font-family）

body {
font: font-style font-weight font-size/line-height font-family;
}

3.CSS文本属性

1、color：文本颜色–预定义的颜色值、十六进制（常用）、RGB代码
2、text-align：文本水平对齐方式：center、left、right
3、text-decoration：文本修饰 none（默认，没有装饰线，最常用）、underline（下划线常用）line-through（删除线不常用）、overline（上划线几乎不用）
4、text-indent：段落的首行缩进 em当前元素（px）1个文字的大小
5、line-height：行间距（上间距、文本高度、下间距）

4.CSS样式

1、外部样式表：样式单独写到CSS文件中

<head>
<link rel="stylesheet" type="text/css href="XXX.css""
</head>

2、内部样式表

<head>
<style type="text/css">
       ...........................
</style>
</head>

3、行内样式表（内联样式）
当特殊的样式需要应用到个别元素时使用。在相关标签中使用样式属性
例(改变段落的颜色和左外边距)：

<p style="color: red; margin-left: 20px">
This is a paragraph.
</p>

5.Emmet语法

Emmet语法的前身是Zen coding，可提高html/css的编写速度

5.1 快速生成HTML结构语法

1、生成标签：直接输入标签名按tab键即可
2、如果想生成多个相同标签，使用 “ * ” ，比如div*3 就可以快速生成3个div
3、如果有父子级关系的标签，可以用 “>” 比如ul>li就可以了
4、如果有兄弟关系的标签，用 “+” 比如div+p
5、如果生成带有类名或id名字的，直接写.demo 或 #two tab键
6、如果生成的div类名是有顺序的，可以使用自增符号$ 比如 .demo{$}*5(会生成demo1、demo2…demo5)
7、如果想要在生成的标签内部写内容可以用{内容}表示

5.2 快速生成css样式语法

单词首字母 tab键

5.3 快速格式化代码

Shift+alt+f

6.CSS的复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

6.1 后代选择器（较多）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。
语法：元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2（后代元素）

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意的基础选择器

6.2 子元素选择器（较少）

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素。
语法：元素1 > 元素2 {样式声明}

元素1和元素2中间用 “>” 隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子

6.3 并集选择器（较多）

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。
并集选择器是各种选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：元素1,元素2 {样式声明}
逗号可以理解为和的意思
语法规范：竖着写

6.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个、第n个元素
书写最大的特点是用冒号:表示，比如:hover :first-child

1.链接伪类选择器（较多）

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接（√）
a:active 选择活动链接（鼠标按下未弹起的链接）

注意事项：

①按照LVHA的顺序声明:link - :visited - :hover - :active
②因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式
实际开发中的写法：

a {
    color： gray;
}
a:hover {
    color: red;
}

2. :focus伪类选择器：用于选取获得焦点的表单元素（较少）

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说

input:focus {
   background-color:yellow;
}

7.CSS的元素显示模式

（1）定义：元素（标签）以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型

（2）块元素

 <div> <h1>~<h6> <p> <ul> <ol> <li>

特点：

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

注意：

文字类的元素内不能使用块级元素
<p> <h1>~<h6>标签主要用于存放文字，因此里面不能放块级元素，特别是不能放<div>

（3）行内元素（内联元素）

 <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

特点：

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

注意：

链接内不能再放链接
特殊情况链接<a>里面可以放块级元素，但是把<a>转换成块级模式最安全

（4）行内块元素

同时具有块元素和行内元素的特点

 <img /> <input /> <td>

特点：

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

（5）元素显示模式转换

一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围
将行内元素转换为块级元素 display: block;
将块级元素转换为行内元素 display: inline;
转换为行内块级元素 display: inline-block;

(6)单行文字垂直居中：让文字的行高line-height等于盒子的高度
行高=上空隙+文字本身高度+下空隙

8.CSS的背景

8.1背景颜色

background-color
默认值是transparent（透明）

8.2背景图片

background-image
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image：url（地址）

8.3背景平铺

background-repeat
repeat：背景图片在纵向和横向上平铺（默认）
no-repeat：不平铺
repeat-x：在横向上平铺
repeat-y：在纵向上平铺
页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

8.4背景图片位置

background-position：x y

参数代表的意思是：x坐标和y坐标，可以使用方位名词或精确单位
精确单位：百分数、浮点数和单位标识符组成的长度值
方位名词： top、center、bottom、left、right
1、参数是方位名词
如果是方位名词，两个值的前后顺序无关；
如果只指定了一个方位词，另一个值省略，则第二个值默认居中对齐；
2、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

8.5背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，可以制作视差滚动效果
scroll 背景图像随着对象内容滚动
fixed 背景图像固定

8.6背景复合写法

background：背景颜色 图片地址 平铺 滚动 位置

8.7背景色半透明

background: rgba(0, 0, 0, 0.3)

最后一个参数是alpha透明度，取值范围在0-1之间
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

9.CSS的三大特性

9.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题
层叠性原则：
①样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
②样式不冲突，不会层叠

9.2继承性

子标签继承父标签的某些样式，文字样式、color属性；
恰当使用继承可以简化代码，降低CSS样式的复杂性；

body {
font:12px/1.5 Microsoft YaHei
}

行高可以跟单位也可以不跟单位；
如果子元素没有设置行高，则会继承父元素的行高为1.5；
此时子元素的行高是：当前子元素的文字大小*1.5
boby行高1.5 这样写的最大优势就是里面子元素可以根据自己的文字大小自动调整行高

9.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性；
选择器不同，则根据选择器权重执行
在这里插入图片描述
注意
①权重是有4组数字组成，但是不会有进位
②可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
③等级判断从左向右，如果某一位数值相同，则判断下一位数值
④可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important无穷大
⑤继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
<a>链接浏览器默认指定了一个样式蓝色的有下划线
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重，但不会进位

10.CSS的盒子模型

10.1 网页布局

网页布局过程：
1、先准备好相关的网页元素，网页元素基本都是盒子box
2、利用CSS设置好盒子样式，然后摆到相应位置
3、往盒子里面装内容
网页布局的核心本质：利用CSS摆盒子

10.2 盒子模型（Box Model）组成

所谓盒子模型：把HTML页面中的布局元素看作是一个矩形的盒子，它就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框border、外边距margin、内边距padding和实际内容content

10.2.1 边框border

border可以设置元素的边框：边框宽度（粗细）、边框样式、边框颜色
border-width：边框粗细，单位是px
border-style：边框样式（实线solid、虚线dashed、点线dotted）
border-color：边框颜色

边框简写：
border：1px solid red; 没有顺序（√）
边框分开写法：
border-top：1px dashed green; 只设定上边框，其余同理

10.2.2 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的样式，它控制相邻单元格的边框。

border-collapse：collapse；表示相邻边框合并在一起

10.2.3 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。
两种解决方案：
1）测量盒子大小的时候，不量边框
2）如果测量的时候包含了边框，则需要width/height减去边框宽度（两倍）

10.2.4 padding内边距

padding属性用于设置内边距，即边框与内容之间的距离
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
复合写法
padding：5px；1个值，代表上下左右都有5像素内边距
padding：5px 10px；2个值，代表上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px；3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding：5px 10px 20px 30px；4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素 顺时针
当给盒子指定padding值之后，发生了2件事情：
1）内容和边框有了距离，添加了内边距
2）padding影响了盒子实际大小，即盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小（双倍）即可
应用：
设计导航栏字数不一样时，可以不用给盒子设置宽度，直接给盒子设置padding值最合适
如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小

10.2.5 margin外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距
margin的复合写法与padding完全一致
典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
①盒子必须指定了width
②盒子左右的外边距都设置为auto

margin：0 auto；（√）
margin-left：auto；margin-right：auto；
margin：auto；

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父亲添加text-align：center即可
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者
解决方案：尽量只给一个盒子添加margin值
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
①可以为父元素定义上边框 border：1px solid transparent
②可以为父元素定义上内边距 padding：1px
③可以为父元素添加overflow：hidden（√）

10.2.6 清除内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局前，首先要清除网页元素的内外边距。

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

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

10.2.7 圆角边框（重点）

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法：

border-radius：length;
border-radius：50%; 正方形-->圆形（高度或宽度的一半）
矩形--->圆角矩形（高度的一半）

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
参数值可以是数值或百分比的形式
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

10.2.8 盒子阴影（重点）

CSS3中新增了盒子阴影，使用box-shadow属性为盒子添加阴影
语法：

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow：必需。水平阴影的位置，允许负值（正右负左）
v-shadow：必需。垂直阴影的位置，允许负值（正下负上）
blur：可选。模糊距离（阴影实虚越大越模糊）
spread：可选。阴影的尺寸
color：可选。阴影的颜色
inset：可选。将外部阴影outset改为内部阴影
默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；
盒子阴影不占用空间，不会影响其他盒子排列

/*原先盒子没有阴影，当鼠标经过盒子就添加阴影效果*/
div:hover {
 box-shadow: 10px 10px 10px -4px rgba(0,0,0, .3);
}

10.2.9 文字阴影

在CSS3中，使用text-shadow属性将阴影应用于文本
语法：

text-shadow:h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置，允许负值（正右负左）
v-shadow：必需。垂直阴影的位置，允许负值（正下负上）
blur：可选。模糊距离（阴影实虚越大越模糊）
color：可选。阴影的颜色

10.3 CSS浮动

10.3.1 传统布局方式

网页布局的本质-用CSS来摆放盒子，把盒子摆放到相应位置
CSS提供了三种传统布局方式：
1、普通流（标准流）
标签按照规定好默认方式排列，是最基本的布局方式
①块级元素独占一行，从上到下顺序排列
常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
②行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em等
2、浮动
3、定位
实际开发中，一个页面基本都包含了这三种布局方式

10.3.2 浮动

1、为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动来完成布局，因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素在一行内排列显示
网页布局第一准则：
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

2、什么是浮动？

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

选择器 {float：属性值;}

none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动

3、浮动特性（重难点）

①浮动元素会脱离标准流（脱标）
脱离标准普通流的控制（浮）移动到指定位置（动）；
浮动的盒子不再保留原先的位置
②浮动的元素会一行内显示并且元素顶部对齐
浮动的元素是互相贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
③浮动的元素会具有行内块元素的特性
如果行内元素有了浮动，则不需要转换为块级、行内块元素就可以直接设置高度和宽度；
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

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

为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
网页布局第二准则：先设置盒子大小，之后设置盒子的位置
只要是通栏的盒子（和浏览器一样宽）不需要指定宽度
一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5、清除浮动

由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。（由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响）
清除浮动的本质：清除浮动元素造成的影响；
如果父盒子本身有高度，则不需要清除浮动；
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
语法：

选择器 {clear：属性值;}

left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
实际工作中，几乎只用clear：both
清除浮动的策略：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）
方法：
（1）额外标签法也称隔墙法，是W3C推荐的做法
在浮动元素末尾添加一个空的标签（必须是块级元素，不能是行内元素），例如

<div style="clear:both"></div>

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

（2）父级添加overflow属性
将其属性值设置为hidden、auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分
（3）父级添加:alter伪元素
:alter方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
.clearfix {
     /* IE6、7专有*/
     *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等
（4）父级添加双伪元素
也是给父元素添加

.clearfix:before,
.clearfix:after {
      content: "";
      display: table;
}
.clearfix:after {
      clear: both;
}
.clearfix {
     /* IE6、7专有*/
     *zoom: 1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

10.4 PS切图

10.4.1 常见的图片格式

1、jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
2、gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用一些图片小动画效果
3、png图像格式：是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，选择png格式
4、PSD图像格式：是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对前端人员来说，最大的优点是可以直接从上面复制文字，获得图片，还可以测量大小和距离

10.4.2 图层切图

最简单的切图方式：右击图层–>快速导出为PNG
很多情况下，需要合并图层再导出：
①选中需要的图层shift：图层菜单-合并图层（ctrl+e）
②右击–>快速导出为PNG

10.4.3 切片切图

①利用切片选中图片：利用切片工具手动划出
②导出选中的图片
文件菜单-导出-存储为web设备所用格式-选择我们要的图片格式-存储（切片：选中的切片）-保存

10.4.4 PS插件切图

Cutterman是一款运行在Photoshop中的插件，能够自动将所需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程

10.5 CSS属性书写顺序（重点）

1、布局定位属性：display/position/float/clear/visibility/overflow
2、自身属性：width/height/margin/padding/border/background
3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

10.6 页面布局整体思路

1、必须确定页面的版心（可视区），测量可知
2、分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则
3、一行中的列模块经常浮动布局，先确定每个列的大小，然后确定列的位置。页面布局第二准则
4、制作HTML结构：遵循先有结构、后有样式的原则
5、先理清布局结构，再写代码

10.7 导航栏设计

实际开发中，不会直接用链接a而是用li包含链接（li+a）的做法
1、li+a语义更清晰，一看这就是有条理的列表型内容
2、如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站排名

<!-- 导航栏 nav 部分 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>

注意

让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
nav导航栏可以不给宽度，将来可以继续添加其余文字
因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

11. CSS定位

1.定位

1.1为什么需要定位

以下情况使用标准流或者浮动不能实现：
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2.当滚动窗口时，盒子是固定屏幕某个位置的
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式；
边偏移则决定了该元素的最终位置

1、定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

2、边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right四个属性
top：80px 顶端偏移量，定义元素相对于父元素上边线的距离
bottom：80px 底部偏移量，定义元素相对于父元素下边线的距离
left：80px 左侧偏移量，定义元素相对于父元素左边线的距离
right：80px 右侧偏移量，定义元素相对于父元素右边线的距离

1.3 静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思。
语法：

选择器 {position：static}

静态定位按照标准流特性摆放位置，它没有边偏移；
静态定位在布局时很少用到

1.4 相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
语法：

选择器 {position：relative}

相对定位的特点：
1、它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

1.4 绝对定位absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
语法：

选择器 {position：absolute}

绝对定位的特点：
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2、如果祖先元素有定位（相对、绝对、固定定位）则以最近一级的有定位祖先元素为参考点移动位置
3、绝对定位不再占有原先的位置（脱标）

1.5 子绝父相的由来

子级使用绝对定位，父级则需要使用相对定位
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
②父盒子需要加定位限制盒子在父盒子内显示
③父盒子布局时，需要占有位置，因此父亲只能是相对定位

1.6 固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：

选择器 {position：fixed}

固定定位的特点：
1、以浏览器的可视窗口为参照点移动位置
①跟父元素没有任何关系
②不随滚动条滚动
2、固定定位不再占有原先的位置（脱标）
固定定位小技巧：固定在版心右侧位置
1、让固定定位的盒子left：50%，走到浏览器可视区（也可以看作版心）的一半位置
2、让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置

1.6 粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合
语法：

选择器 {position：sticky;top：10px;}

粘性定位的特点：
1、以浏览器的可视窗口为参照点移动元素
2、粘性定位占有原先的位置
3、必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持

2. 定位叠放次序z-index

在使用布局定位时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序。
语法：

选择器 {z-index：1;}

1、数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
2、如果属性值相同，则按照书写顺序，后来居上
3、数字后面不能加单位
4、只有定位的盒子才有z-index属性

3. 定位的拓展

1、绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
①left:50%;让盒子的左侧移动到父级元素的水平中心位置
②margin-left:-100px;让盒子向左移动自身宽度的一半；
①top:50%;让盒子的上侧移动到父级元素的垂直中心位置
②margin-top:-100px;让盒子向下移动自身高度的一半
2、定位特殊特性
①行内元素添加绝对或者固定定位，可以直接设置高度和宽度
②块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
3、脱标的盒子不会触发外边距塌陷
绝对定位（固定定位）元素、浮动元素都不会触发外边距合并的问题
4、绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）；浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
但是绝对定位（固定定位）会压住下面标准流所有的内容

4. 元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面时会重现出现
本质：让一个元素在页面中隐藏或者显示出来
1、display 显示隐藏
2、visibility 显示隐藏
3、overflow 溢出显示隐藏

4.1 display 属性（重点）

display属性用于设置一个元素应如何显示
display:none 隐藏对象
display:block 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

4.2 visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏
visibility:visible 元素可见
visibility:hidden 元素隐藏
visibility隐藏元素后，继续占有原来的位置

4.3 overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超出其指定高度及宽度）时，会发生什么
overflow:visible 不剪切内容也不添加滚动条
overflow:hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow:scroll 溢出部分显示滚动条，不溢出也显示滚动条
overflow:auto 溢出的时候才显示滚动条，不溢出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局；但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分

12. 网页布局总结

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

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法：
1、标准流
可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局
2、浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3、定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

13. CSS高级技巧

1、精灵图

1.1为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低网页的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图（sprites）的使用

使用精灵图的核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值；y轴往下走是正值，往上是负值）
5.因为一般情况下都是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

2、字体图标

2.1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显：
①图片文件还是比较大的
②图片本身放大和缩小会失真
③一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont，可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点

①轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
②灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
③兼容性：几乎支持所有的浏览器
注意：字体图标不能替代精灵图，只是对工作中图标部分技术的提升和优化
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图
字体图标是一些网页常见的小图标，直接网上下载即可，因此使用可以分为：
1.字体图标的下载
2.字体图标的引入（引入到html页面中）
3.字体图标的追加（以后添加新的小图标）

2.3 字体图标的下载

推荐下载网站：
①icomoon字库 http://icomoon.io
②阿里iconfont字库 http://www.iconfont.cn

2.4 字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。
1.把下载包里面的fonts文件夹放入页面根目录下
在这里插入图片描述
2.在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题

<style>
/* 字体声明 */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
</style>

3.html标签内添加小图标
在这里插入图片描述

2.5 字体图标的追加

把压缩包里面的selection.json重新上传，然后选中想要的新图标，重新下载压缩包，并替换原来的文件即可

3、CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

.box2 {
      width: 0;
      height: 0;
      /* 为了照顾兼容性 */
      line-height: 0;
      font-size: 0;
      border: 50px solid transparent;
      border-right-color:  pink;
        }

4、CSS用户界面样式

4.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以提高更好的用户体验。
①更改用户的鼠标样式
②表单轮廓
③防止表单域拖拽

4.2 鼠标样式cursor

li {cursor：pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
default：小白默认
pointer：小手
move：移动
text：文本
not-allowed：禁止

4.3 轮廓线outline

给表单添加outline:0 或者outline:none；样式之后，就可以去掉默认的蓝色边框

input {outline:none;}

4.4 防止拖拽文本域resize

实际开发中，文本域右下角是不可以拖拽的

textarea {resize:none;}

尽量将文本域写到一行

<textarea name="" id="" cols="30" rows="10"></textarea>

5、vertical-align属性应用

应用场景：设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效
baseline：默认，元素放在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了

5.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素和文字的基线对齐。
主要解决方法有两种：
①给图片添加vertical-align：middle、top、bottom等（提倡使用）
②把图片转换为块级元素display：block

6、溢出的文字省略号显示

1.单行文本溢出显示省略号–必须满足三个条件

/* 1.先强制一行内显示文本 */
white-space: nowrap;（文字显示不开必须强制一行内显示；默认normal文字显示不开自动换行）
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;

2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性，适合于webkt浏览器或移动端（移动端大部分是webkit内核）

/* 超出的部分隐藏 */
overflow:vhidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

7、常见布局技巧

1.margin负值的运用
①让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
②鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置）；如果有定位，则加z-index）
2.文字围绕浮动元素

float：left

3.行内块的巧妙运用
给父元素添加text-align: center; 则里面的所有行内块元素都水平居中对齐
4.CSS三角强化
直角三角形

.box1 {
       width: 0;
       height: 0;
       /* 把上边框宽度调大 */
      /* border-top: 100px solid transparent;
       border-right: 50px solid green; */
       /* 左边和下边的边框宽度设置为0 */
      /* border-bottom: 0 solid red;
        border-left: 0 solid blue; */
        /* 1.只保留右边的边框颜色 */
        border-color: transparent red transparent transparent;
        /* 2.样式都是solid */
         border-style: solid;
        /* 3.上边框宽度要大，右边框宽度稍小，其余的边框为0 */
        border-width: 100px 50px 0 0;
        }

8、CSS初始化

不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对CSS初始化
每个网页都必须首先进行CSS初始化
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，可有效避免浏览器解释CSS代码时出现乱码问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

14、HTML5和CSS3提高

1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1 HTML5新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，移动端更喜欢使用这些标签

1.2 HTML5新增的多媒体标签

音频：<audio>
视频：<video>
当前<video>元素支持三种视频格式：MP4、WebM、Ogg，尽量使用MP4格式

语法:

<video src="文件地址" controls="controls"></video>

1.视频<video>常见属性
autoplay：autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls：controls 向用户显示播放控件
width：pixels（像素）设置播放器宽度
height：pixels（像素）设置播放器高度
loop：loop 播放完是否继续播放该视频，循环播放
preload：auto（预先加载视频）、none（不应加载视频）规定是都预加载视频（如果有了autoplay就忽略该属性）
src：url 视频url地址
poster：Imgurl 加载等等的画面图片
muted：muted 静音播放
2.音频<audio>
当前<audio>元素支持三种音频格式：
在这里插入图片描述
语法:

<audio src="文件地址" controls="controls"></audio>

常见属性：
autoplay：autoplay 如果出现该属性，则音频在就绪后马上播放
controls：controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop：loop 如果出现该属性，则每当音频结束时重新开始播放
src：url 要播放的音频的URL

3.多媒体标签总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
可以给视频标签添加muted属性来静止播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

1.3 HTML5新增的input类型

type="email" 限制用户输入必须是Email类型
type="url" 限制用户输入必须是URL类型
type="date" 限制用户输入必须是日期类型
type="time" 限制用户输入必须是时间类型
type="month" 限制用户输入必须是月类型
type="week" 限制用户输入必须是周类型
type="number" 限制用户输入必须是数字类型
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单

<!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<input type="email" /></li>
            <li>网址：<input type="url" /></li>
            <li>日期：<input type="date" /></li>
            <li>时间：<input type="time" /></li>
            <li>数量：<input type="number" /></li>
            <li>手机号码：<input type="tel" /></li>
            <li>搜索：<input type="search" /></li>
            <li>颜色：<input type="color"></li>
            <!-- 当我们点击提交按钮时就可以验证表单了 -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>

1.4 HTML5新增的表单属性

required：required 表单拥有该属性表示其内容不能为空，必填
placeholder：提示文本表单的提示信息，存在默认值将不显示
autofocus：autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete：off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项；默认已经打开，需要放在表单内，同时加上name属性，同时成功提交
multiple：multiple 可以多选文件提交
可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder {color:pink;}

2. CSS3的新特性

2.1 CSS3新增选择器

1、属性选择器
2、结构伪类选择器
3、伪元素选择器

2.2 属性选择器

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元素

类选择器、属性选择器、伪类选择器权重都是10

2.3 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素最后一个E元素
E:nth-child(n) 匹配父元素的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-ot-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
nth-child(n) 选择某个父元素的一个或多个特定的子元素

n可以是数字、关键字、公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
公式：
2n：偶数
2n+1：奇数
5n：5 10 15…
n+5：从第5个开始（包含第5个）到最后
-n+5：前5个（包含第5个）
nth-child(n)与nth-of-type(n)的区别：
nth-child(n)会把父元素里面所有的盒子都排列序号，执行时首先看:nth-child(n) 找到第n个孩子，然后再看前面的是否和E匹配；
nth-of-type(n)对父元素里面指定元素的盒子排列序号，执行时首先看指定的元素E，之后再看:nth-of-type(n)找到第n个孩子
如果是无序列表，用nth-child更多

2.4 伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
选择符：
::before：在元素内部的前面插入内容
::after：在元素内部的后面插入内容
注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中找不到，所以称为伪元素
语法：element::before {}
before和after必须有content属性
before在父元素element内容的前面创建元素，after在父元素内容的后面插入元素
伪类选择器和标签选择器一样，权重为1

使用场景：
1、伪元素字体图标

div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            /* content: ''; */
            content: '\e91b';
            font-family: 'icomoon';
        }

2、遮罩层
3、伪元素清除浮动

2.5 CSS3 盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有2个值：content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1.box-sizing：content-box 盒子大小为width+padding+border（以前默认的）
2.box-sizing:border-box 盒子大小为width（padding和border就不会撑大盒子了，前提padding和border不会超过width宽度）

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

2.6 CSS3 其他特性（了解）

1.图片变模糊
2.计算盒子宽度width：calc函数
CSS3滤镜filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如：

filter:blur(5px); blur模糊处理，数值越大越模糊

CSS3 calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width:calc(100% - 80px);

括号里面可以使用+、-、*、/来进行计算

2.7 CSS3 过渡（重点）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：从一个状态渐渐的过渡到另外一个状态
经常和:hover一起搭配使用
语法：

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性：想要变化的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
2.花费时间：单位是秒s（必须写单位）
3.运动曲线：默认是ease（可以省略）
4.何时开始：单位是秒（必须写单位）可以设置延迟触发事件，默认是0s（可以省略）
谁做过渡给谁加

2.8 CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
移动：translate
旋转：rotate
缩放：scale
2D转换是改变标签在二维平面上的位置和形状的一种技术

1. 2D转换之移动translate

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

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

重点：

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

2. 2D转换之旋转rotate

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

transform:rotate(度数)

重点：

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

3. 2D转换中心点transform-origin

语法：

transform-origin:x y;

重点：

注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点 (50% 50%)
可以给x y设置像素或者方位名词（top、bottom、left、right、center）

4. 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法：

transform:scale(x,y);

注意：

注意其中的x和y用逗号隔开，里面写的数字不跟单位，表倍数
transform:scale(1,1);宽和高都放大了一倍，相当于没有放大
transform:scale(2,2);宽和高都放大了2倍
transform:scale(2);只写一个参数，第二个参数则和第一个参数一样，相当于transform:scale(2,2);
transform:scale(0.5,0.5);缩小
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5. 2D转换综合写法

注意：

同时使用多个转换，其格式为transform:translate() rotate() scale() ...
其顺序会影响转换的效果（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前面

2.9 CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，CSS3动画可以实现更多变化、更多控制、连续自动播放等效果。

1. 动画的基本使用
制作动画分为两步：
Ⅰ.先定义动画
用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
      0% {
          width:100px;
      }
       100% {
          width:200px;
      }
}

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列；
在@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果；
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式和次数；
用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

Ⅱ.在使用（调用）动画

 div {
          width:200px;
          height:200px;
          background-color:pink;
          margin:100px auto;
          /* 调用动画 */
          animation-name:动画名称;
          /* 持续时间 */
          animation-duration:持续时间;
}

2. 动画常用属性
在这里插入图片描述
3. 动画简写属性

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

简写属性里面不包含animation-play-state；
暂停动画:animation-play-state:paused;经常和鼠标经过等其他配合使用；
想要动画走回来，而不是直接跳回来：animation-direction:alternate;
盒子动画结束后，停留在结束位置：animation-fill-mode:forwords;

4. 速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是"ease"
在这里插入图片描述
steps就是分几步来完成动画，有了steps就不要再写ease或linear了

2.10 CSS3 3D转换

1. 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右（右正左负）
y轴：垂直向下（下正上负）
z轴：垂直屏幕（外正里负）

2. 3D移动 translate3d

transform:translateX(100px);仅在X轴上移动
transform:translateY(100px);仅在Y轴上移动
transform:translateZ(100px);仅在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离（xyz不能省略，如果没有就写0）

2. 透视perspective

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视（视距）：视距就是人的眼睛到屏幕的距离
距离视觉点越近的电脑平面成像越大，越远成像越小
透视的单位是像素

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

d：视距
z：z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大
translateZ(100px);仅在Z轴上移动；有了透视，就能看到translateZ引起的变化了

3. 3D旋转rotate3d

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

transform:rotateX(45deg);沿着x轴正方向旋转45°
transform:rotateY(45deg);沿着Y轴正方向旋转45°
transform:rotateZ(45deg);沿着Z轴正方向旋转45°
transform:rotate3d(x,y,z,deg);沿着自定义轴旋转deg
transform:rotate3d(1,0,0,45deg);沿着x轴旋转45deg
transform:rotate3d(1,1,0,45deg);沿着对角线旋转45deg

左手准则：
左手的手拇指指向x轴的正方向；其余手指的弯曲方向就是该元素沿x轴旋转的方向
左手的手拇指指向y轴的正方向；其余手指的弯曲方向就是该元素沿y轴旋转的方向（正值）

4. 3D呈现transform-style

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

2.11 浏览器私有前缀

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

1.私有前缀

-moz-：代表direfox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表Opera私有属性

2.提倡的写法

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

品优购项目

1.1 模块化开发

1.有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
2.最典型的应用就是common.css公共样式（版心宽度、清除浮动、页面文字颜色等）。写好一个样式，其余的页面用到这些相同的样式
3.模块化开发具有重复使用、修改方便等优点

1.2 网站favicon图标

favicon.ico一般用于作为缩略图的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持favicon.ico图标
一.制作favicon图标
1.把图标切成png图片
2.把png图片转换为ico图标，这需要借助第三方转换网站，例如比特虫：http://www.bitbug.net/
二.favicon图标放到网站根目录下
三.HTML页面引入favicon图标
1.在html页面里面的<head></head>元素之间引入代码

<link rel="shortcut icon" href="favicon.ico">

1.3 网站TDK三大标签SEO优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网络的排名，提高网站的知名度。
页面必须有三个标签用来符合SEO优化：
title、description、keyword
1.title网站标题
title具有不可替代性，是我们网页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
例如：
京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
2.description网站说明
简要说明我们网站主要是做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“xxx网作为…”、“电话：010…”之类语句。
例如：

<meta name="description" content="京东JD-COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品，便捷、诚信的服务，为您提高愉悦的网上购物体验！" />

3.keywords关键字
keywords是页面关键词，是搜索引擎的关注点之一。
keywords最好限制为6-8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
例如：

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

1.4 常用模块类名命名

在这里插入图片描述

1.5 LOGO SEO优化

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要；
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可；
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来：
方法1：text-indent移到盒子外面（text-indent:-9999px;），然后overflow:hidden，淘宝的做法；
方法2：直接给font-size:0;，京东的做法
最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

Web服务器

服务器（我们也会称之为主机）是提供计算服务的设备，它是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。
Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。
本地服务器：我们可以把自己的电脑设置为本地服务器，这样同一局域网内的人就可以访问你的网站了。

远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把网站上传到远程服务器。
远程服务器是通常是别的公司为我们提供一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
比如域名：www.mi.com 可以访问小米网站
注意：一般稳定的服务器都是需要收费的。
免费的远程服务器 http://free.3v.do/
1.去免费控件网站注册账号
2.记录下主机名、用户名、密码、域名
3.利用cutftp软件上传网站到远程服务器
4.在浏览器输入域名，即可访问我们的网站