CSS学习

CSS基础学习

1. CSS

• CSS 层叠样式表

• 作用:

  1. 增强控制网页样式信息
  2. 允许样式信息和网页代码分离

• 不需要编译,直接由浏览器执行

• 目前使用最广泛的是CSS3版本

• CSS的基本语法

  • CSS的组成: 选择符 ; 属性 ; 属性取值

  div{<!--选择符-->
  	font-size:10px;<!--属性:属性值-->
  	color:green;
  }
  [注]各个属性之间使用 ; 分隔
  

  • CSS中注释使用==/* */==

2. CSS使用方式

1. 内联样式表: 行内引用

   <p style=""></p>
   

   行内引用级别最高,方式更加灵活

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

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

   适用于一个HTML文档具有独一无二特性时使用

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

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

   W3C推荐使用

4. 多重样式表的重叠:

   行内引用的优先级最高,其他样式表级别相同以最后一个样式的效果为准.

3. CSS选择器

选择器的作用是为了更加精确地选择标签元素便于更加精确地控制样式的变化,选择器的使用一般是多个选择器组合使用.

1.基本选择器:

1.1 .class 类选择器

可以在class属性中通过空格分隔创建多个名称,换而言之标签中class的属性值为多个

.one{font-color:red;}
....
<p class="one two"></p>
<p class="one"></p>

1.2 # id id选择器（唯一选择器）

id属性的属性值在文档中可以设置多个,但id属性中属性值只代表唯一一个.

#one{} <!--对应第一个p标签-->
#one two{} <!--对应第二个p标签-->
...
<p style="one"></p>
<p style="one two"></p>

1.3 * 通配符选择器

表示适配所有的标签

*{}

1.4 Tagname 标签选择器

直接使用html标签进行选择

Tagname{
}

2. 层级选择器

2.1 组合选择器

通过逗号分隔,进行多个选择器的选中

p,.small,#id{
}

2.2 包含选择器

div p{
}
选中div中所有p标签

2.3 子类选择器

div > p{
}
选中所有和div为父子关系的p标签

2.4 紧贴选择器

div + p{
}
选中div标签后紧跟的标签p(非包含关系)

2.5 兄弟选择器

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-us","zh-cn"
<!--以下几个涉及正则表达式-->
E[ATT ^= VAL] 属性ATT的值以VAL开头的E元素
E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素
E[ATT *= VAL] 属性ATT的值中包含VAL的E元素

4.结构性伪类选择器

所有的伪类和伪元素选择器参考(https://www.w3school.com.cn/css/css_pseudo_elements.asp)

4.1 伪元素选择器

• 主要用于对用于设置元素指定部分的样式,并不是对真正元素的选中

• 格式: E::after / before / first-letter / first-line / selection

• 所有 CSS 伪元素如下:

  E::after 在每个E元素之后插入内容。
  E::before 在每个E元素之前插入内容。
  <!--上述使用需要搭配 content 属性-->
  E::first-line 选择每个E元素的内容的首行。
  E::first-letter 选择每个E元素的内容的首字母。
  E::selection 选择用户选择的元素部分。
  

4.2 结构性伪类选择器

• CSS引入结构性伪类选择器的作用时方便开发者根据HTML DOM树进行样式的控制

• 

  ​ 上图是HTML文档树

• 四个最基本的选择器

  :root 选择器匹配文档根元素并将样式绑定。在 HTML 中，根元素始终是 html 元素。
  E:not(选择器) 用于排除某个结构元素下的子结构元素
  E:empty 选择器匹配所有为空的元素E
  :target 链接到活动元素时的样式,建议搭配锚点使用
  

5.其他伪类选择器

E:first-child 匹配文档中E元素的每一父元素的第一个E元素
E:last-child 匹配文档中E元素的每一父元素的最后一个E元素
E:nth-child(n) 正序匹配文档中E元素的每一父元素中指定序号的E元素
	参数:Odd 和 Even 是可用于正序匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
E:nth-last-child(n) 逆序匹配文档中E元素的每一父元素中指定序号的E元素
	参数:Odd 和 Even 是可用于逆序匹配下标是奇数或偶数的子元素的关键词
E:nth-of-type(n) 正序匹配文档中E元素的每一父元素中同类型的指定序号的E元素
E:nth-last-of-type(n) 逆序匹配文档中E元素的每一父元素中同类型的指定序号的E元素
E:nth-child(an+b) 表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
<!--例如3n+1 依次匹配1,4,7...顺序的元素-->
E:only-child 匹配文档中E元素的每一父元素的唯一的元素E,
E:only-of-type 匹配文档中E元素的每一父元素的同类型的唯一的E元素
E:enabled 选择每个被启用的E元素,一般为<input>
E:disabled 选择每个被禁用的E元素,一般为<input>
E:checked 选择每个被选中的E元素,一般为<input>

6.状态伪类选择器

是定义好的,不能随意起名字,是为了固定某个元素在不同状态上的定义,目前只有a标签

:link 设置超链接a标签在未被访问前的样式
:visited 设置超链接a标签被访问过后的样式
:hover 设置元素在鼠标悬停时的样式
:active 设置元素在被用户激活时的样式(鼠标点击释放)
<!-- 如果需要设置a标签必须按照此顺序设置,hover标签可以对所有标签起效果-->
:focus 设置鼠标获取焦点时的样式

7.选择器的优先级

假设

style=1000(行内引用)
id=100
class=10
element=1
(element包括伪类,标签等等)

数值越大优先级越高,混合选择器的最后优先级是上述各个对应数值相加

4.CSS属性

1.字体属性

color 设置字体的颜色 可以使用单词(red)或者RGB(rgb(0,0,0))形式或者16进制(#00f)
[注]对a标签设置颜色需要直接定位到标签设置颜色才能成功
font-style 设置字体的样式
	取值:norma italic(斜体)
font-family 设置字体的类型:宋体,微软雅黑,黑体等等,可以同时设置多个字体,客户端会自动依次匹配
font-size 设置字体的大小
	取值单位:
	px 像素
	em 一个汉字大小
	ex 一个x字符大小
font-weight 设置字体的粗细
	取值 bold(粗体)/normal(默认) 或者 数值(100-900,600以上变粗)

font 字体样式简写,需要严格按照顺序
font:字体样式|小型大写字母|字体的粗细|字体大小|行高|字体族科
opacity 设置元素透明度,取值0-1之间的小数,0透明.1不透明
overflow 设置内容超出元素框时的显示方式
	取值:
	hidden(隐藏)
	scroll(显示滚动条)
	auto(自动显示)
	visible(显示)
text-overflow 设置溢出文本是否使用省略号显示
	ellipsis 用省略号
	clip 修建文本
white-space 设置检索对象内空格的处理方式
	取值:
	normal 默认
	nowrap 强制文本在同一行,除非遇到br标签换行
	pre 相当于pre标签原格式输出
	pre-wrap 原格式输出,超出容器范围会自动换行
	pre-line 原格式输出遇到连续空格时会合并成一个
	inherit 规定应该从父元素继承White-space属性的值

属性overflow,text-overflow,white-space使用

    <style>
        #one{
            width: 100px;
            height: 50px;
            background-color: red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #one:hover{ /*设置当鼠标移动到该元素上是改变状态*/
            background-color: green;
            /*text-overflow: inherit; 主要用于继承父类的text-overflow的值*/
            overflow: visible;
        }
    </style>

    <div id="one">
        具体的我也不知道怎么说好的,红红火火恍恍惚惚或或或或或或或或
    </div>

效果

word-spacing 设置单词的词间距离(对中文无效)
letter-spacing 设置字母之间的距离(一个汉字算一个字母)
单位:em 或 ex

2.文本属性

text-align 设置文本水平对齐方式
取值:left 居左 | right 居右 | center 居中
text-decora 设置文本修饰
	取值:
	underline 下划线
	line-through 删除线
	overline 上划线
	none 取消样式

a标签取消下划线

<style>
    #zero{
        text-decoration: none;
        color: red;
        text-align: center;
       	}
<style>

效果

text-transform 设置文本的大小写
	取值:
	capitalize 	文本中的每个单词以大写字母开头。
	uppercase 	定义仅有大写字母。
	lowercase 	定义无大写字母，仅有小写字母。
text-indent 设置段落缩进,例如 2em
word-wrap 设置或检索当呢绒超过指定容器的边界时是否断开换行
	取值:
	normal 默认效果允许内容溢出指定的容器
	break-word 内容在边界自动的换行

vertical-align 设置对象内容的垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
<!--相对对齐方式,需要由参照物-->
	取值:
	top	把元素的顶端与行中最高元素的顶端对齐
	middle 把此元素放置在父元素的中部。
	bottom 把元素的顶端与行中最低的元素的顶端对齐。
文字垂直居中一般不用这种方式,一般设置line-height属性
line-height 设置单行文本的行高
	取值 设置像素

3.背景属性

<!--简写-->
background 设置相关属性值且不需要顺序,推荐使用

<!--具体-->
background-color 设置背景颜色
background-image 设置背景图片
	background-image:url(图片地址)
background-repeat 设置背景图片是否重复
	repeat 默认水平和垂直方向都重复
	repeat-x 水平方向重复
	repeat-y 垂直方向重复
	no-repeat 不重复
background-position 设置背景图片的位置
	格式:background-position 水平位置 垂直位置
	水平和垂直位置取值
	单词:left;center;right/top;center;bottom
	数值:(以左上角为原点,向下为正,向右为正) 常用像素
background-size 设置背景图片大小
	格式:background-size: 宽度 高度
	宽高取值
	像素px:如果设置为一个值,第二值auto
	百分比:如果设置为一个值,第二值auto
	cover 把图像扩展足够大,使图片完全覆盖背景区域
	contain 把图片扩展至最大尺寸,等比例放缩使图像的宽或高充分使用
background-attachment 设置背景图片是否跟随进度条滚动
	fixed 绑定窗口 图片不随页面滚动
	scroll 不绑定窗口 图片随页面滚动	

多背景图

    <style>
        div{
            height: 500px;
            width: 400px;
            background: 
            url("../a.png") no-repeat 150px 0px,
            url("../b.png") no-repeat -100px 0px;
        }
        /*多图背景的设置建议单独设置会和背景颜色冲突*/
    </style>
....
<div></div>

效果

4.列表属性

list-style-type: 设定列表的符号样式(固定样式)
list-style-image:url() 设定指定的图片用来替代列表序号
list-style-position: 设置列表符号需要的位置
	inside 符号和内容分离
	outside 符号和内容相连
list-style 列表属性的简写属性

5.尺寸属性

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

width 设置宽度 
height 设置高度
min-height 设置最小高度
max-height 设置最大高度
[注]
1.最小高度,当前的高度如果没有达到最小高度,那么高度就设定为最小高度
2.最大高度,允许当前元素根据内容自动减小或增加高度,但是如果达到最大高度就不在增加高度
3.取值为:像素(px),百分比(%)
border 边框简写属性可以同时设置四条边的边框样式 宽度 颜色
border-top 设置顶部边框的边框样式 宽度 颜色
border-left 设置左侧边框的边框样式 宽度 颜色
border-right 设置右侧边框的边框样式 宽度 颜色
border-bottom 设置底部边框的边框样式 宽度 颜色
<!--
宽度/高度 10px 
样式 solid
颜色 red
-->

5.CSS函数

1.calc()函数 动态计算长度值

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

6.CSS布局----样式控制

1.浮动与定位

概述：CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

1.浮动（float）:

浮动:

float: right | right | none

[要点]

• 将元素排除在普通流之外
• 元素将不在页面中占据空间
• 可以将浮动元素放置在包含框的左边或者右边
• 浮动元素依旧位于包含框内
• 浮动只能向右或者左浮动
• 浮动元素不会重叠
• 任何元素一旦浮动,display属性失效均可设置宽高并且不会独占一行

清除浮动:

clear: right | left | both

清除浮动常用方式:

1)设置父元素的宽高

2)添加clear:both属性

3)父元素添加overflow:hidden (这样父元素能够感知浮动元素的宽高)

2.定位（position）:

属性：position

绝对定位：若外层元素没有做定位则以（0，0）点为参照点，并且定位以后不占据原来的位置；若外层元素做了定位，那么定位的参考的以外层定位元素为参考的（注意外层元素可以是一堆嵌套的元素）

相对定位：以自身的左上角为参照点，并且定位以后以空白形式仍占据原来位置

相关属性：

z-index 设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<Z-index 仅能在定位元素上奏效（例如 position:absolute;）！>
格式：z-index：number

<style type="text/css">
	#one{
        width: 200px;
        height: 200px;
    	background-color:red;
        position: absolute;
  		left: 100px;
  		top: 100px;
          z-index:1;
    }
	#two{
        width: 200px;
        height: 200px;
    	background-color:yellow;
        position: absolute;
  		left: 150px;
  		top: 150px;

    }
</style>
....
	<div id="one"><div>
    <div id="two"><div>

2.元素的显示控制

1.Display(显示)

每一个元素都有display属性,可以通过设置display设置显示方式

常用值:
none 此元素不会被显示
block 此元素显示为块元素,自带换行符
inline 此元素显示为内联元素,没有换行符
inline-block 此元素显示为行块元素,具有行块的性质

display:none 会隐藏元素,不保留物理空间

2.Visibility(可见性)

visibility属性指定一个元素是否是可见的。

常用值:
visible 默认值元素可见
hidden 元素不可见

visibility:hidden 会使元素不可见但是仍然保留物理空间

7.CSS布局

CSS布局遵从先水平后垂直的布局模式,这样页面划分就很清晰,不混乱

盒子模型示意图

    Margin(外边距) - 清除边框外的区域，外边距是透明的。
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    Content(内容) - 盒子的内容，显示文本和图像。
[注]自带样式的标签（如body，img，a标签）可能会自带一些边框属性，建议在设置样式的时候清除样式（margin：0px；padding：0px）

Margin(外边框属性)

• 外间距是透明的
• 会在元素外创建额外的空白区域

示意图:

属性:
margin 简写属性 可以一次性依次顺时针设定外边框的值
margin-bottom 	设置元素的下外边距。
margin-left 	设置元素的左外边距。
margin-right 	设置元素的右外边距。
margin-top 	    设置元素的上外边距。

可能的取值:
auto 	设置浏览器边距。这样做的结果会依赖于浏览器,可以实现居中效果
length 	定义一个固定的margin（使用像素，pt，em等）
% 	定义一个使用百分比的边距
负值 

外间距合并

• 当两个垂直的外边距相遇的时候,他们将形成一个外边距,称为外边距合并
• 合并后的外边距的高度等于发生合并两者的高度的较大者
• 浮动元素和行内元素外边距不合并

包含式外间距合并

嵌套形式的元素，父类没有设置border，子类设置了外间距，效果就相当于父元素设置外间距。父元素设置border属性即可解决。

块状元素居中显示

原来的效果

    <style>
        #block{
            width: 100px;
            height: 100px;
            background-color: brown;
            margin: 100px auto;
            border:black solid;
            padding: 10px;
        }
    </style>
...
    <div id="block"></div>

居中效果

Border(边框属性)

属性:
border 简写属性可以一次性依次按顺时针设定边框的样式,宽度,颜色
border-style 定义边框的样式
	取值:soild(实线)|dashed(虚线)|dotted(点线)
border-width 定义边框的宽度
默认时3px大小,具体值自己设定
border-color属 定义边框的颜色
<!--具体边框指定样式-->
border-top|right|bottom|left-style|color|width:属性值

==[注]==border属性必须要设定style这个属性值,这样其他的样式才能够实现

padding(内边框属性)

示意图:

属性:
padding 	使用简写属性设置在一个声明中的所有填充属性
padding-bottom 	设置元素的底部填充
padding-left 	设置元素的左部填充
padding-right 	设置元素的右部填充
padding-top 	设置元素的顶部填充

属性值:
length 	定义一个固定的填充(像素, pt, em,等)
% 	使用百分比值定义一个填充

标准盒子模型

当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域(content)的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

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

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

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

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

IE(怪异)盒子模型

当指定一个CSS元素的宽度和高度属性时，设置的是一个完整的元素的大小，已经包块内边距，边框和外边距。

(新增)弹性盒模型(Flex Box)

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

• 弹性盒子由弹性容器(父元素)(Flex container)和弹性子元素(Flex item)组成。
• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素。
• 通常配合响应式布局使用

<!--常用属性及属性值-->
父元素属性:
display 指定 HTML 元素盒子类型
	取值:
	flex或者inline-flex
justify-content  设置弹性盒子元素在水平对齐方式
	取值:
	flex-start 	默认值。从行首起始位置开始排列。 
	flex-end 	从行尾位置开始排列。 	
	center 	居中排列。 	
	space-between 	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
	space-evenly 	均匀排列每个元素，每个元素之间的间隔相等。
	space-around 	均匀排列每个元素，每个元素周围分配相同的空间。
align-items 设置弹性盒子元素垂直对齐方式
	取值:
	stretch 	默认值。元素被拉伸以适应容器。
	center 	元素位于容器的中心。
	flex-start 	元素位于容器的开头。
	flex-end 	元素位于容器的结尾。
	baseline 	元素位于容器的基线上。
flex-wrap 属性用于指定弹性盒子的子元素换行方式
	取值:
	nowrap 	默认值。规定灵活的项目不拆行或不拆列。
	wrap 	规定灵活的项目在必要的时候拆行或拆列。
	wrap-reverse 	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
子元素属性:
flex-grow 	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

8.CSS动画

1.浏览器的私有前缀

CSS标准在尚未明确以前各个浏览器的厂商会使用私有前缀进行相应的区分

四大内核

Gekon内核 前缀为-moz- 火狐浏览器
Webkit内核(谷歌内核) 前缀为-webkit- 谷歌浏览器和Safari浏览器
Trident内核 前缀-ms- IE浏览器
Presto 前缀-o- 目前只有opera采用

部分实验属性需要加入前缀才能实现效果,实际使用过程中需要将所有的前缀写一遍才能适配各个浏览器.

2.圆角边框属性(border-radius)

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角 (顺时针).实现形式灵活

圆角对的形成

1. 从指定的顶端,向内部引出处置半径和水平半径
2. 将水平半径和垂直半径相交于元素内部的一点(圆心点)
3. 以该点为圆心,指定的垂直半径和水平半径画圆或者椭圆
4. 与边框相交的那一段圆弧就是圆角部分

3.阴影

1.文字阴影(text-shadow属性)

text-shadow: h-shadow v-shadow blur color
h-shadow 	必需。水平阴影的位置。允许负值。
v-shadow 	必需。垂直阴影的位置。允许负值。
blur 	可选。模糊度。
color 	可选。阴影的颜色。
[注]多个阴影用逗号间隔。

2.盒子阴影(box-shadow属性)

box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 	必需的。水平阴影的位置。允许负值。
v-shadow 	必需的。垂直阴影的位置。允许负值。
blur 	可选。模糊度。
spread 	可选。阴影的大小。
color 	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表。
inset 	可选。从外层的阴影（开始时）改变阴影内侧阴影
[注]多个阴影使用逗号分隔。

3.渐变(gradient属性)

1.线性渐变linear-gradient()

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,... 	用于指定渐变的起止颜色。开始--->结束

实例

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

2.径向渐变 radial-gradient()

径向渐变由中心点开始变化

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 	确定圆的类型:
    ellipse (默认): 指定椭圆形的径向渐变。
    circle ：指定圆形的径向渐变
size 	定义渐变的大小，可能值：
    farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
    closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 	定义渐变的位置前面需要加 at 。可能值：
    center（默认）：设置中间为径向渐变圆心的纵坐标值。
    top：设置顶部为径向渐变圆心的纵坐标值。
    bottom：设置底部为径向渐变圆心的纵坐标值。
	像素px
	%
start-color, ..., last-color 	用于指定渐变的起止颜色。

4.Transform 2D

translate() 平移

transform:translate(x,y) 对象沿X/Y轴平移N个px,若只提供一个参数,Y轴默认0

scale() 缩放

transform:scale(x,y) 对象缩放,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值.1代表原来的大小

rotate() 旋转

transform:rotate(number deg) 对象按顺时针旋转给定的角度,允许负值,元素将逆时针旋转,它以deg为单位,代表旋转的角度.

skew() 扭曲

transform:skew(x,y) 对象根据参数进行x/y轴的翻转,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0.单位deg

5.Transfor3D

平移
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatex()： 指定对象x轴的平移 
translatey()： 指定对象y轴的平移 
translatez()： 指定对象Z轴的平移 
旋转
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 
rotatex()： 指定对象在x轴上的旋转角度 
rotatey()： 指定对象在y轴上的旋转角度 
rotatez()： 指定对象在z轴上的旋转角度
缩放
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
scalex()： 指定对象的x轴缩放
scaley()： 指定对象的y轴缩放
scalez()： 指定对象的z轴缩放 
perspective()： 指定透视距离 用于呈现出伪3d的效果

以上效果可能需要配合透视属性且各种属性可以同时使用

6.过渡

用于呈现CSS效果时平滑过渡，无需使用Flash动画或JavaScript

需要指定的四个要素:过渡属性;过渡所需时间;过渡函数;过渡延迟时间

transition 简写属性
transition ：property duration timing-fuction delay

transition-property:none|all|property 设置指定属性的变化
none 	没有属性会获得过渡效果。
all 	所有属性都将获得过渡效果。
property 	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration: s|ms 设置过渡时间
transition-duration-function：设置变化的速度方式
	取值：ease 慢-快-慢
	linear 匀速
	ease-in 慢开始加速效果
	ease-out 慢结束减速效果
transition-delay：s|ms 设置改变属性值后多长时间开始执行

7.动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

@keyframes 函数 用于创建动画
格式：
@keyframes 动画名：{
	from{属性：属性值；}
	to{属性：属性值；}
}//从一个到另一种样式
或者
@keyframes 动画名：{
	0% {}
	100%{}
}
[注]关键词 "from" 和 "to"，等同于 0% 和 100%
<!--在使用动画前需要将动画绑定到指定的元素,这样动画才能生效-->
绑定时需要指定以下属性值
    规定动画的名称
    规定动画的时长
例如:把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

9.响应式布局

用于兼容不同尺寸的屏幕,为用户提供友好的交互体验,即一个网站兼容多个终端,而不是为某个定制.

0.阻止浏览器自动缩放

<head>
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />
</head>

1.多媒体查询

CSS通过媒体查询能够使样式更精确地作用于不同的媒体

多媒体查询语法

<style>
@media not|only mediatype and (expressions) {
    CSS 代码...;//不用大小屏幕显示样式
}
</style>

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备，这个应该经常看到。

expressions:用于设置必要的表达式,例如:(max-width: 900px) 多个条件时使用and连接,例如(max-width: 900px) and (min-width:800px)

使用链接形式

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

多媒体类型:

all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

10.栅格系统

采用网格式布局的布局方式

基本概念：

1.容器和项目

采用网格式布局的区域称为容器（container），容器内部采用网格定位的子元素，成为项目（item），Grid布局只能对顶层的子元素生效。

2.属性（了解即可）

display：grid 用于设置网格式布局

gird-template-columns 定义每一列宽度

gird-template-rows 定义每一列的行高

网格式布局多用于框架中，因此了解基本概念即可