前端笔记：CSS学习笔记

1.了解CSS

• CSS cascading style sheet 层叠样式表
• 作用：用于增强控制网页样式信息并且允许样式信息与网页内容分离的一种标记性结语言。
• 不需要编译，可以由浏览器直接执行
• CSS3目前使用最广泛的版本，但是部分特性尚不能得到支持。
• CSS的基本语法
  • CSS的定义分别由：选择符、属性、属性取值组成。
  • CSS大小写不敏感，推荐使用小写。
  • 属性和值之间用冒号(:)分开，多个属性之间用分号(;)分隔

  • CSS中的注释：

  以/*开始，以*/结束，中间书写注释的内容。

  -  注意：注释中不要包含注释，因为以注释开始会找到离它最近的结束符为止。 

2. 放置CSS的几种方式

1. 内联样式表也叫 行内引用

<p style=""></p>

• 特点：内联的样式比其他方式更加灵活，但需要和展示的内容混淆在一起，内联样式会失去样式表的一些优点(样式信息与网页内容分离)

2. 内嵌样式表 或 内部引用

<style>
    /*书写CSS样式*/
</style>

• 适用于一个HTML文档具有独一无二的样式时。

3. 外部链接样式表 或 外部引用

<link rel="stylesheet" type="text/css" href="css文件路径"/>

• CSS外部引用使用了外接的CSS文件，一般浏览器有缓存的功能，所以用户不用每次都下载此CSS文件。并且外部引用相对于内部和内联来说高效的是节省带宽。外部引用是W3C推荐使用的。

<style>
    /*了解级别*/
    @import "css文件路径"
</style>

4. 多重样式表的叠加
5. 依照后定义的优先，所以优先级最高的是内联样式表(行内样式)，连入的外部样式表和内部样式表之间是最后定义的优先级最高。

3. CSS选择器

1.基本选择器

1. .class 类选择器  可以在class属性中通过空格分隔创建多个名称
2. # id  id选择器 唯一选择器
3. * 通配符
4. tagName 标签选择器

2. 层级选择器

div,p 组合选择器 通过逗号分开，进行多个选择器的选中。
div p 包含式选中器，只要div标签中包含p标签即可选中。
div > p ,选择所有座位div元素的子元素p(必须是父子关系)。
div + p,选择紧贴在DIV元素之后的P元素。
div ~ p,选择div元素后面的所有兄弟元素P。

3. 属性选择器

E  标签元素的意思  Element  |   ATT 属性  attribute    | VAL  值  value

• 属性选择器就是根据属性名或者属性值来进行选择的

E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。注意如果把元素E去掉，表示匹配所有有ATT属性的元素。
E[ATT=VAL] 匹配所有ATT属性等于VAL的E元素
E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中有一个值等于VAL的E元素。
E[ATT |= VAL] 匹配所有ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性，比如"en","en-us","zh-en","en-gb"（了解）
效率会比较低，用到了正则
E[ATT ^= VAL] 属性ATT的值以VAL开头的E元素
E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素
E[ATT *= VAL] 属性ATT的值中包含VAL字符的E元素

4. 结构性伪类选择器

1. 伪元素选择器

• 不是对真正的元素进行选择

E:first-line 匹配E元素的第一行
E:first-letter E元素的第一个字母
E:before{content:""} E元素内容之前
E:after{content:""}E元素内容之后
注意：使用brfore或者after必须配合属性content。

2. 结构性伪类选择器

• 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式
• 四个最基本的结构性伪类选择器

:root 将样式绑定到页面的根元素。
所谓的根：就是指位于文档树最顶层结构的元素，在HTML页面中就是指包含着整个页面的HTML部分。
E:not(选择器) 除了某一个元素，对某个结构元素使用样式，但想排除元素下的子结构元素，就是用not样式。
E:empty 所有为空的E元素
:target 链接到目标时的样式(到达目标的地方的样式)

5. 其他伪类选择器

E:first-child 对一个父元素中得第一个子元素E设置样式
E：last-child 对一个父元素中的最后一个子元素E设置样式
E：nth-child() 对指定需要的子元素E设置样式(正序)
	(odd) 所有正序下来的第奇数个子元素E设置样式
	(even) 所有正序下来的第偶数个子元素E设置样式
E:nth-last-child() 对执行需要的子元素E设置样式(倒序)
	(odd) 所有倒序上去的第奇数个子元素E设置样式
	(even) 所有倒序上去的第偶数个子元素E设置样式
E:nth-of-type() 与nth-child()作用类似，但是只匹配同种标签
E:nth-last-of-type() 与nth-last-child()作用类似，但是只匹配同种标签
E:nth-child(an+b) a表示每次循环中间隔几个改变样式，b表示指定样式在循环中开始的位置。
E:only-child匹配父元素下仅有一个元素E的
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E：checked 匹配表单中被选中的radio或者checkbox元素
::selection 匹配用户当前选中的元素

6. 状态伪类选择器

• 是定义好的，不能随便起名，是为了固定某个元素在不同状态上定义的，目前就a标签有

:link 设置超链接a标签在未被访问前的样式
:visited 设置超链接a标签在其地址已经被访问的样式
:hover 设置元素在鼠标悬停时的样式
:active 设置元素在被用户激活时的样式(在鼠标点击与释放之间)
注意：如果需要设置a标签样式必须按照此顺序。hover选择器可以给所有标签使用。
:focus 设置元素在其获取鼠标焦点时样式

7. css优先级和权重

CSS权重 指的是 css 选择器的优先级, 优先级高的 css 样式会覆盖优先级低的 css 样式, 优先级越高说明权重越高, 反之亦然 。

4.CSS属性

1. 尺寸属性

• 块状元素：具有宽高属性，并且独占一行。
• 行内元素：没有宽高属性，不会独占一行。

1.width 设置宽度
2.height 设置高度
3.min-height 设置最小高度
4.max-height 设置最大高度
注意：
最小高度属性，当前的高度如果没有达到最小高度，那么高度将设置为最小高度的值。
最大高度属性，允许当前元素根据内容自动减小高度，但是如果达到最大高度值，将不再增加高度。
以上2个属性比较适合页面排版使用。
取值：像素、百分比。
border:边框简写属性，可以同时设置四条边的边框样式、宽度、颜色
border-top 设置顶部边框的样式、宽度、颜色
border-left 设置左侧边框的样式、宽度、颜色
border-right 设置右侧边框的样式、宽度、颜色
border-bottom 设置底部边框的样式、宽度、颜色
记住：宽度 1px \   样式 solid  \ 颜色

2. 字体属性

1.color 设置字体颜色
	颜色取值：
		英文单词
		六位的十六进制
		rgb(红色，绿色，蓝色)
		rgba(红色，绿色，蓝色，透明度)
		透明度的取值：0~1之间，1表示不透明，0表示完全透明。
注意：在设置字体颜色时，尽量要找到离字体标签最近的一个标签进行设置(尤其是a标签)
2.font-style 设置字体样式
	取值：normal 默认值
		 italic 斜体
3.font-family 用于设置字体的族科
	注意：页面中该属性设置的字体必须存在于客户端电脑中才可以使用。
	列子: 
		font-family:"黑体","楷体"；
4.font-size 设置字体的大小
	常用单位
	px 像素   屏幕中的一个点就是一像素。
	em  一个汉字的大小
	ex  就是一个x字符的大小
5.font-weight 设置字体的粗细
	normal 默认值
	bold 定义粗体字符
	bolder 定义特殊体
	lighter 定义更细的字体
	number :100  ~  900 其中效果：600以上变粗体
6.font-variant 设置字体为小型的大写字母
	取值：
	normal 默认值
	small-caps 将小写字母变为大写字母（小字体类型）
7.font 字体样式简写属性：
	需要注意，该属性使用时，值具有顺序关系，必须依照顺序关系来写，不存在的可以省略。
	font:字体样式|小型大写字母|字体的粗细|（字体大小/行高）|字体族科
8.opacity 设置颜色的透明度
	取值为0~1之间的小数：0透明 ，1不透明。
9.overflow 设置内容超出元素宽高时的显示方式
	取值：
		hidden 隐藏
		auto 自动
		scroll 滚动条
		visible 显示
10.text-overflow:让溢出的文本以省略号显示
	ellipsis 用省略修建文本
	clip 修建文本
11.white-space:设置或者检索对象内空格的处理方式
	取值：
		normal:默认的处理方式
		pre：报错HTML源代码的空格与换行。等同于pre标签
		nowrap：强制文本在一行，除非遇到br标签才换行
		pre-wrap：同pre属性，但是遇到超出容器范围的时候会自动换行
		pre-line：同pre属性，遇到连续空格会被看错一个空格解释
12.word-spacing:设置单词的词间距(对中文无效 了解)
13.letter-spacing:设置字母之间的距离(一个汉字就是一个字母)

3.文本属性

1.text-align:设置元素内容的水平对齐方式
	取值：lfet 居左  center 居中  right居右
2.text-decoration:设置文本修饰
	underline下划线
	line-through:删除线
	overline上划线
	none 取消样式
3.text-transform 设置对象中的文本的大小写。
	默认值 none
	capitalize 每个单词的第一个字母转换大写
	uppercase 全部转换成大写
	lowercase  全部转换成小写
4.text-indent:设置首行缩进
	常用取值：em
5.word-wrap 设置或检索当内容超过指定容器的边界时是否断行
	取值:
	 normal:允许内容顶开或溢出指定的容器边界(默认效果)
	 break-word 内容将在边界内换行。
6.vertical-align 设置对象内容的垂直对齐方式
	是容器中元素相对于内容的显示
7.line-height 设置单行文本的行高 (一行的高度)
	取值：设置像素值
		设置number  设置的number与字体的大小相乘

4.背景属性

1.background-color 设置背景颜色
	颜色的取值：
		英文单词
		六位的十六进制
		rgb()
		rbga()
		hsl() 	色相 饱和度 亮度
		hsla()  色相 饱和度 亮度 透明度
2.background-image 设置背景图片
	background-image:url(图片地址)
3.background-repeat 设置背景图片是否重复
	repeat-x 水平方向重复
	repeat-y 垂直方向重复
	repeat 默认 水平方向和垂直方向都重复
	no-repeat 不重复
4.background-position 设置背景图片的位置
	格式：background-position:水平位置和垂直位置(一个值)
	格式：background-position:水平位置 垂直位置
	水平和垂直位置的取值
	英文单词：left,center,right/top,center,bottom
	长度单位：只要是长度单位即可。常用像素。	
注意：如果设置为负数，水平方向表示向左移动，垂直方向表示向上移动
5.background-size:设置背景图片大小
	格式：background-size:宽度 高度
	宽度和高度的取值：
	像素px：如果设置为一个值，那么第二个值为auto
	以父元素百分比%来设置背景图宽度和高度，如果设置为一个值，那么第二个值为auto
	cover 把图像扩展足够大，使背景图片完全覆盖背景区域。(强制拉伸)
	contain 把图像扩至最大的尺寸，以使其宽度和高度完全使用内容区域(等比例)
6.background-attachment 设置背景图片是否随默认滚动而滚动
	fixed 绑定窗口 图片不随页面的滚动而滚动
	scroll 背景图片随着滚动而滚动(默认值)
7.background 简写属性，推荐使用。没有顺序关系。

5. 列表属性

1.list-style-type:设定列表的符号样式(固定样式)
2.list-style-image:url() 设定指定的图片来代替列表序号
3.list-style-position:设置列表符号需要的位置
	inside 需要再内容中
	outside 需要再内容外。
4.list-style 列表属性的简写属性。

5.布局

1.浮动

• 浮动定位指
• 将元素排除在普通流之外
• 元素将不在页面中占据空间
• 将浮动元素放置在包含框的左边或者右边
• 浮动元素依旧位于包含框之内
• 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
• 浮动元素的外边缘不会超过其父元素的内边缘
• 浮动元素不会互相重叠
• 浮动元素不会上下浮动
• 任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独 占一行
• 语法：float:none/left/right;

CSS 清除浮动：
描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除
浮动也变得非常麻烦。
属性：clear
值：left、right、both

清除浮动的常用方式：
1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
2.浮动元素的父级div定义 overflow:hidden
3.浮动元素的父元素定宽高

2.定位

**position定位 **
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

相对定位：
relative:
以当前为参照物移动到指定位置
注意:相对定位，被定位的元素会占据原有的物理位置

绝对定位
absolute:
以第一个被static以外进行定位的父元素为参照物，如果没有则以窗口为参照物
绝对定位的元素不会占据原有的物理位置
fixed:（固定定位）
永远以窗口为参照物

3.z-index堆叠顺序

⚫ 一旦修改了元素的定位方式，则元素可能会发生堆叠
⚫ 可以使用z-index属性来控制元素框出现的重叠顺序
⚫ z-index仅能在定位的元素上生效
⚫ z-index属性：
• 值为数值，数值越大表示堆叠顺序越高，即离用户越近
• 可以设置为负值，表示离用户更远 ，一般不要设置
• Z-index 仅能在定位元素上奏效

4.display属性

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。
display常见属性值

1. none：隐藏对象
2. inline：指定对象为内联元素 （没有宽高，且不会独占一行）
3. block：指定对象为块元素 （有宽高，且独占一行）
4. inline-block：指定对象为内联块元素 （又宽高，且不会独占一行）
5. table-cell：指定对象作为表格单元格
6. flex：弹性盒

visibility:hidden和display:none和opacity:0的区别：
1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在
2.display:none 影藏元素，不保留物理空间

如果元素是使用visiblity:hidden设置的隐藏方式，那么必须使用visiblity:visible的方式让元素显示

5.盒子模型

一、盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿手机盒来对比，手机=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个手机盒之间的距离。
通常我们设置的宽和高是指“手机”content的宽高，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

二、W3C盒模型
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成

外边距 margin

• 围绕在元素边框周围的空白区域
• 会在元素外创建额外的空白区域
• 外边距是透明的
• 语法：margin:value;
• 单边设置
  • margin-top/right/bottom/left: value;
  • value可取值为像素，%，auto，负值
• 外边距简写
  • margin:value(四个方向相同) ;
  • margin: value(上下) value(左右);
  • margin: value(上) value(左右) value(下);
  • margin: value(上) value(右) value(下) value(左);

外边距合并
只有上下合并，没有左右合并

• 当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

margin设置元素外边距的宽度，它有这么几个特点

1. 块级元素的垂直相邻外边距会合并
2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并
3. 浮动元素的外边距也不会合并
4. 允许指定负的外边距值，不过使用时要小心

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。

边框属性border

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色
border: 1px solid red;
不过不按此顺序来写依然能正常显示。
div{ border: red solid 2px; }

border-style设置边框的样式，有五种常用样式可选
点状dotted
实线solid
双线double （ 需要最起码设置为3像素，不然显示不下）
虚线dashed
无边框none

border的三要素可以统一写在”border”属性中，也可以单独设置。
统一的写法：border: 1px solid red;
单独设置的写法：
border-width:;
border-style:;
border-color:;
注意:在style属性为空的情况下，整个边框是不会出现的。这不论是统 一写在border或是单独设置都是这样的。
不写width会有默认3像素的值。
不写颜色会默认为黑色。

内边距padding

• 内容区域和边框之间的空间
• 会扩大元素边框所占用的区域
• 语法：padding:value;

单边设置
• padding-top/right/bottom/left:value;
• value可取值为像素，百分比，但不能为负数
内边距的简写

• padding:value(四个方向相同) ;
• padding: value(上下) value(左右);
• padding: value(上) value(左右) value(下);
• padding: value(上) value(右) value(下) value(左);

6.怪异盒子模型

盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。
可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准 盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。

Box-sizing
box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定它有两个值
• content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。
• border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

6.CSS3动画

1.浏览器私有前缀

CSS3
CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。
一、浏览器内核以及其前缀
CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。

根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。
1.Gecko内核 前缀为-moz- 火狐浏览器
2.Webkit内核 前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，
safari浏览器也使用
该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3.Trident内核 前缀为-ms- 也称IE内核
4.Presto内核 前缀-o- 目前只有opera采用

2. 圆角border-radius

➢ 语法
➢ border-radius：value；四个角
➢ border-radius：value value；左上右下、右上左下
➢ border-radius：value value value value；
代表设置对象左上角、右上角、右下角、左下角
顺时针设置

/* 设置圆角 完整格式 两个参数 8个值  前四个为水平半径,后四个为垂直半径 */
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
/*
	1.从指定角的顶端,向内部引出垂直半径和水平半径
	2.将水平半径和垂直半径相交于元素内部的一点(圆心点)
	3.以该点为圆心,指定的水平半径和垂直半径画圆(水平和垂直半径相等)或椭圆(水平和垂直半径不相等)
	4.与边框相交的部分就是圆角部分
*/

/*一个参数4个值  水平和垂直半径相等*/
border-radius: 10px 20px 30px 40px

/*一个参数两个值  对角线相等  10px代表左上角和右下角的水平和垂直  20px 代表右上角和左下角的水平和垂直*/
border-radius: 10px 20px

/*一个参数一个值  四个角的水平和垂直 */
border-radius: 10px

3.文字阴影text-shadow

语法：text-shadow: h-shadow v-shadow blur color;

/* 格式:
      text-shadow:阴影1,阴影2....
      阴影的格式:
          第一个:横向偏移量
          第二个:纵向偏移量
          第三个:模糊度
          第四个:阴影颜色
  */

注意:如果阴影没有给定颜色,则默认为文字字体的颜色

4.盒子阴影box-shadow

语法：box-shadow: h-shadow v-shadow blur spread color inset;

/* 
盒子阴影:
格式:
    box-shadow:阴影1,阴影2,.....
    阴影的格式:
        水平偏移量,垂直偏移量,模糊度,外延值,颜色,内置阴影(inset 默认没有)
*/

注意:如果阴影没有给定颜色,则默认为盒子内字体的颜色

5.CSS渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的 过渡。以前，你必须使用图像来实现这些效果。现在，使用 CSS3 渐变（gradients），通过代码来实现渐变可以减少请求和节约带宽。CSS3 定义了两种类型的渐变（gradients）
线性渐变（Linear Gradients）

径向渐变（Radial Gradients）

线性渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, …);
第一个参数:
to top/to left /to right/to bottom
或角度(单位为deg) 如 45deg

径向渐变

径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape， size, start-color, …,last-color);
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse表示椭圆形

/* 
    中心(at center center)
        语法(at x y) 都是从左上角为参考点
        x,y可以是像素也可以是百分比
    大小:
        最近边 closest-side
        最远边 farthest-side 
        最近角 closest-corner
        最远角 farthest-corner
    形状:
        ellipse 椭圆 默认值
        circle  园
*/

6.转换Transform（2D/3D转换）

CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换 和 3D 转换。
在css2时代，如果要做一些图片转换角度，都依赖于图片、Flash或JavaScript才能完成。但是现在借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。

转换Transform 2D的属性

通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate()、scale()、rotate()和skew()。
书写格式:
transform:函数名(x轴值，y轴值);
转换的效果：

1.translate() 水平和垂直方向移动函数

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px）
translate(x,y)：转换，沿着X和Y轴移动元素。

2.rotate() 旋转函数

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。

3.scale() 缩放函数

通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的为宽，后面的为高。
可取值：
默认值为1
缩小：0-1之间的数
放大：大于1的数

4.skew() 倾斜函数

根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度 ，一个值只是水平轴的角度。此函数是指元素的倾斜角度。

转换Transform 3D的属性

通常需要结合透视属性使用
/* perspective 透视 呈现出的是伪3D的效果 */
perspective: 400px;

7.过度Transition

什么是过渡

使用css的属性值在一段时间内平滑的过渡
比如，鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色
1）指定四个要素：
过渡属性，如background、color等
过渡所需时间
过渡函数，即过渡的速度、方式等
过渡延迟时间，表示开始执行的时间
2）触发过渡
通过用户的行为触发，如点击、悬浮等

1.过渡属性

transition-property: none|all|property;
多个属性用逗号隔开
可设置过渡的属性
颜色属性
取值为数值的属性
转换属性
渐变属性
阴影属性

2.过渡时间

transition-duration: s|ms;
默认值为0，意味着不会有效果，所以必须设置transition-duration属性

3.过渡函数

transition-timing-function: ;
取值：
ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果
linear：匀速
ease-in：规定以慢速开始，加速效果
ease-out：规定以慢速结束，减速效果
ease-in-out：规定以慢速开始和结束，先加速后减速效果

4.过渡延迟

transition-delay: s|ms;
改变元素属性值后多长时间开始执行过渡效果

5.简写属性transition

transition属性是一个简写属性，用于设置四个过渡属性
语法：transition:property duration timing-function delay;
#box{
width: 200px;
height: 200px;
background-color: #1fb57b;
transition: background 4s linear 1s;
}
#box:hover{
background-color: red;
}

8.animation动画

过渡属性只能模拟动画效果
animation属性可以制作类似Flash动画
通过关键帧控制动画的每一步
使元素从一种样式逐渐变化为另一种样式
实现复杂的动画效果

1.@keyframes

作用：用于声明动画，指定关键帧，用于分解动画动作每个帧代表某个时间点定义每个帧上的动作.

@keyframes的语法
@keyframes name {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}

轮播图案例

<div class="banner-left">
  <div>
    <img src="./img/q(1).jpg" alt="">
    <img src="./img/q(2).jpg" alt="">
    <img src="./img/q(3).jpg" alt="">
    <img src="./img/q(4).jpg" alt="">
    <img src="./img/q(5).jpg" alt="">
    <img src="./img/q(6).jpg" alt="">
    <img src="./img/q(7).jpg" alt="">
    <img src="./img/q.jpg" alt="">
  </div>
</div>

<!-- style -->
<style>
  .banner-left{
    width: 590px;
    height: 100%;
    overflow: hidden;  /* 外围边框设置超出不可见 */
    border: 1px solid yellowgreen;
}
.banner-left>div{
    width: calc(590*8px);
    display: flex;
    animation: bannerdh 30s infinite 1s alternate;
}

@keyframes bannerdh{
    12.5% {
        margin-left: -590px;
    }

    25% {
        margin-left: calc(-590px*2);
    }

    37.5% {
        margin-left: calc(-590px*3);
    }

    50% {
        margin-left: calc(-590px*4);
    }

    62.5% {
        margin-left: calc(-590px*5);
    }
    75% {
        margin-left: calc(-590px*6);
    }
    87.5% {
        margin-left: calc(-590px*7);
    }
}
</style>

7.伸缩盒模型

伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。
要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

目的：在浏览器窗口变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

flexbox的基础知识

由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。
一个flexbox的基本结构：
.box{ display: flex;} //最外层的为父容器，定义此容器为弹性布局
.item1{ flex-grow: 1; background:pink} flex-grow占1比例
.item2{ flex-grow: 2; background:orange} 占2比例
.item3{ flex-grow: 3; background:red} 占3比例

1

2

3

1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。 2.其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等

父容器常用属性

父容器中的常用属性

display: flex;

定义一个flex容器
新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列2.父容器中的常用属性

justify-content:

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

align-items 属性

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

flex-wrap属性

让弹性盒元素在必要的时候拆行

子元素常用属性

*伸缩盒中的每一个元素称为一个项目。
**flex-grow: number; **
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
.item1{ flex-grow: 1; background:pink}
.item2{ flex-grow: 1; background:orange}
.item3{ flex-grow: 1; background:red}

8.响应式媒体查询

媒体查询优缺点：

优点：
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：
1.兼容各种设备工作量大，效率略慢
2.代码累赘，会出现隐藏无用的元素，加载时间加长
3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

CSS中的Media Query（媒介查询）是什么？

作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。
通过不同的媒体类型和条件定义样式表规则。
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式

媒体查询实例

通过此实例观察媒体查询的功能后，再来分析语法
body{background-color:grey; } //正常情况是灰色
@media screen and (min-width: 992px) {//宽度大于 992px 的时候被应用 pc端
.class {background: #666;} }
@media screen and (max-width: 768px) { //宽度小于768px的时候被应用 移动端
.class { background: #ccc; } }
@media screen and (min-width: 768x) and (max-width: 992px) { //宽度在768px 和 992px 之间的时候被应用 .class { background: #333; } }

使用Media Query的基本语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}
以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。
@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽 度为960时，显示的样式。
媒体类型有：
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备

加载媒体查询的最佳方法：

使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。

阻止移动浏览器自动调整页面大小

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签，meta标签中可以设置具体的宽度或缩放比。下面为示例

name=”viewport” 说明此meta标签定义视口的属性
initial-scale=2.0 意思是将页面放大两倍
width=device-width 告诉浏览器页面的宽度等于设备宽度
允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半

<meta name=”viewport” content=”width=device-width, maximum-scale=3,minimum-scale=0.5” />
禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
//user-scalable=no是禁止缩放

9.栅格布局

bootstrap中文网：https://www.bootcss.com

栅格化布局
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。
但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

1.基本概念

1.容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div><!--容器-->
        <div><!--项目-->
          <p>学习猿地</p> <!--不是项目-->
        </div>
        <div><p>学习猿地</p></div>
        <div><p>学习猿地</p></div>
        <div><p>学习猿地</p></div>
</div>

上面代码中，最外层的元素就是容器，内层的三个元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的元素就不是项目。
Grid 布局只对项目生效。

2.行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

水平的深色区域就是"行"，垂直的深色区域就是"列"

2.容器中的属性

**display：grid 指定一个容器采用网格布局 **
**默认情况下，容器元素都是块元素 **
**inline-grid 设置为行内元素网格布局 **

**grid-template-columns 属性定义每一列的列宽。 **
grid-template-rows 属性定义每一行的行高

**注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、 **
*display: table-cell、vertical-align和column-等设置都将失效。

3.认识Bootstrap栅格系统

https://v3.bootcss.com/css/#grid

补充

鼠标样式

cursor:
auto ：标准光标
default ：标准箭头
pointer, hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize ：此光标指示矩形框的边缘可被向右（东）移动。
n-resize ：此光标指示矩形框的边缘可被向上（北）移动。
nw-resize ：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
w-resize ：此光标指示矩形框的边缘可被向左移动（西）
s-resize ：此光标指示矩形框的边缘可被向下移动（南）
se-resize ：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize ：此光标指示矩形框的边缘可被向下及向左移动（南/西）