Html&Css

Bertha 。 2022-11-25 04:06 173阅读 0赞

1.标签  
双标签：

# *倾斜*   段落 **加粗 下划线   上下角 &nbsp空白字符 &gt &lt >< &copy 圈c   单标签：   换行**   水平线 #

必须的属性：src=“url” 导入图片的路径 alt=""（文本替换图片/因为搜索引擎 不能检索图片上的文本，可以检索到alt属性值的文本（ 便有SEO优化 ））  
标签的属性：(超链接)  
href=“目标的url”  
target="" 属性值：\_self(默认值)、\_blank(新建窗口打开目标文件)  
title="" 提示信息 （ 大部分标签都支持 ）  
默认的样式： 文本蓝色、下划线  
href="\#"空链接  
div 盒子（容器）  
作用：划分网页布局。  
span标签  
表示1个字符 或者是一句简短的话

1.  表格里面的属性：

<table> 
 <tbody> 
  <tr> 
   <td>&lt;\td&gt; </td> 
   <td>&lt;\td&gt; &lt;\tr&gt; &lt;\table&gt; width="" height="" border="" bordercolor="" cellspacing="0" 单元格之间的间距 cellpadding="0" 内容距离单元格的间距 align="center/left/right" 水平对齐方式 valign="top/middle/bottom" 无序列表： 
    <ul> 
     <li></li> 
    </ul> 有序列表： 
    <ol> 
     <li></li> 
     <li> 
      <ol> 
       <li> 自定义列表： 
        <dl> 
         <dd>
           tr*4&gt;td*5 可以直接生成4行5列的表格 合并单元格： 规则：只要是单元格跨行的都是合并行，不跨行的就是合并列（无论合并行还是和并列，操作的都是td） 合并行 rowspan="合并的数量" 和并列 colspan="合并的数量" 表格的作用：显示数据！！！！！ 
         </dd> 
        </dl> </li> 
      </ol></li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

1、单元格间距：border-spacing:value;  
说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值  
2、合并相邻单元格边框：border-collapse:separate/collapse;  
说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)  
3、无内容时单元格的设置：empty-cells:show/hide;  
说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;  
定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置auto时，则随内容宽度而定；火狐浏览器存在兼容。  
(fixed：固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化)  
5、隔行变色设置：

双数行： tr:nth-child(2n even)\{ \}  
单数行： tr:nth-child(2n+1 odd)\{ \}

设置单数单元格的样式和双数单元格的样式  
表格标题

标题内容 caption:表格标题 表格标题位置：caption-side:top/right/bottom/left 说明：left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top A、html重要属性： 1）colspan="value" 合并列 2）rowspan="value" 和并行 3）valign="top/bottom/middle/baseline" 垂直对齐方式 4）rules="groups/rows/cols/all/none" 添加组分隔线 说明： rows:位于行之间的线条 cols:位于列之间的线条 all：位于行和列之间的线条 none:没有线条 groups:位于行组和列组之间的线条 B、数据列分组 (1) (2) 说明： 1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。 2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。 3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。 注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。 C、数据行分组 表头 表体 表尾 说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。 3. 表单： 表单的作用：收集用户个人信息。 form表单 表单内部的元素，尽量放在form里面。 <\\form> form的属性： action="url" 表单提交的路径。 name="" 表单的名称 method="post/get" 表单的提交方式。 表单元素：输入框、密码框、提交按钮、重置按钮、空按钮....... type="text"/"password"/"submit"/"reset"/"button" input标签里面的属性： type属性：input会根据type的属性值的不同，在页面中显示状态也是不同的。 value属性：在输入框里面表示当前input的初始值（ value作用会根据type的改变而改变 ） name属性： input的名称。 size属性： 设置input的尺寸。但是size以字符为单位。 maxlength属性: 设置输入框输入字符的最大长度。

type的属性值：
                type="text"   显示的是文本框（输入框）
                type="password"   密码框
                type="submit"    提交按钮
                type="reset"     重置按钮
                type="button"    空按钮

1）单选框/单选按钮  
  
  
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。  
checked=“checked”(默认选中；) disabled="disabled"禁用  
2）复选框  
  
(disabled=“disabled” :禁用)  
(checked=“checked” :默认选中)  
3)下拉菜单

菜单内容 8）多行文本框（文本域）

1）表单字段集  
语法：

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

2）字段级标题：  
语法：  
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。  
3)提示信息标签：  
语法：

说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

4）上传文件框：  
语法：  
说明：type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选  
5）图像域  
语法：  
说明：火狐不支持此表单元素;

1.  css作用：控制网页的样式  
    css语法：  
    场景： 小明\{穿衣服：红色的;戴帽子：蓝色的帽子;\}  
    选择符\{  
    属性1：属性值 ;  
    属性2：属性值 ;  
    属性3: 属性值1 属性值2…;  
    \}  
    css实例：  
    div\{  
    width:500px;  
    height:300px;  
    background:red;  
    \}  
    css语法解释：  
    a : 选择符：对标签进行获取  
    b : 所有的声明都放在花括号里面，声明和声明之间用分号连接。  
    c : 声明分为：属性和属性值，属性和属性值之间用冒号连接。  
    d : 如果一个属性有多个属性值的时候：属性值与属性值之间用空格隔开  
    (所有的css代码，都要放在”css样式表“里面)  
    样式表里面的注释 /\* css注释 \*/

css代码必须放在css样式表里面。

1）主流浏览器  
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游  
2）最早的浏览器 :  
Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN  
五大浏览器内核  
•Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）  
•Gecko （壁虎）  
•Presto （ 迅速的）  
•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）  
•Blink (由Google和Opera Software开发的浏览器排版引擎)。  
五大浏览器内核代表作品  
\*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器  
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。  
\*Gecko：代表作品Mozilla Firefox 是开源的,  
它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。  
\*Webkit : 代表作品Safari、Chrome ，  
是一个开源项目。  
\*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎  
。它也是世界上公认的渲染速度最快的引擎。  
\*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。  
5. css样式表：  
一： 内部样式表：  
创建方法：使用style标签创建样式表，然后把样式表最好放在head描述区里面。  
  
三：内联样式表：  
创建方法：  
<标签 style=“css代码”></标签>  
link 和 @import区别：  
1：本质区别：link标签属于html语言 、@import属于css提供的一个方法。  
2：加载顺序的差别：link导入的css 和 结构同时加载、@import等结构加载完毕然 后再加载css样式。  
3：兼容性差别：@import 兼容性不好（ ie5 ）  
4: js动态dom操作：

样式表的权重关系:  
内联样式表权重最高  
内部样式表和外部样式表的权重关系。和书写顺序有关，写在后面的权重高。  
后写的把前写的样式覆盖，覆盖的只是相同属性，不同的属性值继续执行。

6.  css选择符目的：对网页中的元素进行获取。
    
    一：类型选择符（ 标签选择符 ）
        html中所有的标签都能直接作为选择符   ( div、p、h1 - h6、em....... )
        特点：能选择页面中所有相同类型的元素。
        应用:
            1:如果想统一某个标签样式的时候。
            2:想改变某个标签默认样式的时候。
    
    二： id选择器
        语法：
            起名字：<标签 id="名称"></标签>
            id写样式：  #名称{css代码}
    <div id="log"></div>
    #log{
    width:220px;
    height:100px;
    background:pink；
    }
        特点：
            id名称在同一个页面内只能出现一次，唯一性
        应用：id名称常用来写页面的外围结构。

三：class选择符（类选择符）  
语法：  
<标签 class=“名称”></标签>  
.名称\{css代码\}

特点：
            每一个元素都能拥有多个类名。
            适合定义一类样式。
    
    四：群组选择符
        语法：  （ 以逗号分隔的方式，把多个选择符组成一组 ）
            选择符1,选择符2,选择符3{ css代码 }
            eg：   #box,.cont,p{  }
    
    五：包含选择符（ 子选择符 ）
        语法： 通过父元素找子元素。
            父元素选择符 子元素选择符 {}
    
    六：伪类选择符
        a:link{}              超链接初始状态（颜色）
        a:visited{}           超链接访问过后的状态
        a:hover{}             超链接鼠标滑过的状态
        a:active{}            超链接按下时的状态（）
    
            a:link{color:purple;}
            a:visited{color:pink;}
            a:hover{color:yellow}
            a:active{color:green}
            顺序不能更改
        常用的形式：
            a{color:red}
            a:hover{color:yellow;}
    
        div:hover{}
        .box:hover{}
    
        鼠标滑过父元素改变子元素的样式：
            父元素:hover 子元素{}
    
    七:通配符
        *{  }
    
        常用方法：
            *{
                margin:0;
                padding:0;
            }

选择符的权重：  
!important > 内联样式表 > id > class > 类型（ 标签 ）

权重计算：
            内联样式表  ：   1000
            id         :    100
            class/伪类  :    10
            类型        :     1
            包含选择符  ：    为选择符权重之和
            群组选择符  ：    权重保持不变
            !important   ( 如果一个css属性后面有！important ，  当前属性具有最高权重
    
            语法：
                    属性：属性值！important;
    
     ##  css层叠性  ##
        * 只要产生权重关系，必然体现css层叠性  *
            ** 权重高的覆盖权重低的，权重相同的优先执行后书写的 **
    
    
        - id选择符 > class选择符( 伪类选择符 )  >  类型选择符  -
        - 内联样式表 >  id选择符 -
        - 开发者样式 > 读者样式  >  浏览器样式  -
        - ！important -
    
    起名方法：
        尽量用小写英文字母开头。
        字母、数字、下划线、连字符组合。
    
    起名的方式：
        驼峰式命名法：
            newsLeft   newsCenter   newsRight
    
        连字符：
            news-left   news-center
    
        下划线
            news_left  news_right
    
    注：
        起名字不能使用关键字和保留字
        关键字：所有的标签和属性都属于关键字
        保留字：以后有可能成为关键字的单词。
        在同一个页面内尽量命名风格保持一致。
    
    普通页面的不同部分起名实例：
    log
    nav 导航栏
    banner广告图
    news
    product
    links  外部链接
    bottomwrap 底部栏
    top    slogan  case client客户      serchbox搜索栏   flow流程  domain领域
    abstract 简介   brand 品牌
    
    使div盒子居中：
    <style>
          body{text-align:center}
          div{margin:0 auto;boder:2px solid #F00}
    </style>

css里的各种属性：

css语法：
                选择符{ 声明 }
                声明：属性   属性值
    
                css属性：color \ width \ height \ background \border

文本属性：  
font-size: 像素  
网页中文本默认大小： 16px;  
注：文本大小一般都是偶数、pc端文本大小最小别低于12px;

涉及到的单位：
                    px
                    pt
                    em    1em == 16px( 默认情况下 )   （ 相对大小、相对于父元素font-size的值 ）
    
                line-height:    行高
    
                font-family:    字体     默认的字体 ： 微软雅黑
                    宋体、楷体、微软雅黑......安全字体（大部分浏览器能支持的）
                    注：
                        如果字体为中文：    放在引号里面
                        如果英文字体字体名称是多个单词的时候，  放在引号里面
                        如果有多个字体，字体和字体之间用逗号隔开； 英文在前中文在后
    
                color   文本颜色
                    颜色：必须使用十六进制表示颜色值。
                    16进制数字（ 0-9  a-f ）
    
                    #000000     #000
                    #ffffff     #fff
                    红绿蓝      0带表最暗   f代表最亮
    
                    扩展：
                        rgb(255,0,0)模式
                        rgba(255,0,0,0.5) 颜色值透明。
                        transparent   透明色。
    
                font-weight:
                    属性值：bold   bolder  normal  100 - 900
    
                font-style:
                    属性值: italic   oblique   normal
    
                font-variant:
                    属性值：normal    small-caps            
    
                text-align:    文本的水平对齐方式
                    属性值： left   right   center   justify(两端对齐)
    
                line-height    如果line-height的值等于容器高度的时候，实现单行文本垂直居中对齐
    
                text-decoration
                    属性值：none   underline   overline   line-through   blink(闪烁，高版本不支持)
    
                text-indent:
                    首行缩进:   text-indent:2em;
                    悬挂式缩进： text-indent:负数
    
                letter-spacing:30px;
                    字符与字符之间的间距
    
                word-spacing:30px;
                    词与词之间的
    
                text-transform:
                    属性值
                        capitalize  ( 首字母大写 )
                        uppercase  ( 大写 )
                        lowwercase  (小写)

/\* 列表属性：  
list-style:none; 清除列表符号！  
disc：默认。标记是实心圆。  
circle：标记是空心圆。  
square：标记是实心方块。  
decimal：标记是数字。

浮动：
                float属性
                    属性值：left\right\none
    
            添加浮动的元素，不占据空间、脱离文档流
            注：只要有浮动，父元素一定添加高度、否则父元素会出现” 高度塌陷 “

边框属性：

border:10px solid  red;    复合式写法（简写）
            border-width:10px;
            border-style:线形；
            border-color:颜色
            常用的线型：  solid( 实线 )     dashed (虚线)    dotted( 点状线 )  double(双线)    none/0
    
            给单一方向设置边框：
            border-left/right/top/bottom ： 10px solid red
    
            border设置方法：
                border复合式写法的后面的3属性值，可单独拆分出来。
                单独拆分出来的属性例如：border-width:
                    border-width:10px;   四周
                    border-width:10px 20px;    上下     左右
                    border-width:10px 20px  50px     上    左右   下
                    border-width:10px 20px  50px  100px      上右下左

背景属性

1: background-color:颜色值      ( 背景色一直会平铺到边框区域 )
    
           2: backgrond-image:url();      背景图
                默认情况下背景图的展示形式：
                    容器大于背景图 ->  铺满
                    容器等于背景图 ->  显示一张
                    容器小于背景图 ->  只显示容器区域
    
            3：background-repeat:
                属性值：no-repeat 不平铺
                        repeat
                        repeat-x
                        repeat-y
    
            4:background-position   控制背景图的位置
                属性值：两个属性值 第一个水平位置（距离左侧的距离）   第二个垂直位置（ 距离顶端的距离 ）
                    background-position:100px  100px;  
                    background-position:right bottom  
                    background-position:center bottom
    
            5:background-attachment   控制背景图是否固定  ( 滚动条 )
                属性值：scroll      fixed;
    
            简写：
                background:red url（） no-repeat left right;

盒模型：

根据css显示对标签进行分类:
        
    块状元素、内联元素（行内元素）、可变元素（了解）
    
    块状元素特点:
        div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td
        1:在页面中独占一行，自上而下排列
        2：能直接设置宽度和高度
        3：在页面中显示的最小单位为一个矩形
        4：块状元素一般作为其他元素的容器。
    
    内联元素特点：
        a,span,i,em,strong,b
        1：不能直接添加宽高，宽高都是由内容撑开的
        2：在一行内，逐个显示
        3： 内联元素也符合盒模型的规则，但是个别属性不能正确显示（padding-top/bottom   margin-top/bottom）

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，、标签就是这种内联块状标签。  
inline-block元素特点：  
A、和其他元素都在一行上；  
B、元素的高度、宽度、行高以及顶和底边距都可设置

常见标签：img input textarea
       img - 图片 input - 输入框
        textarea - 多行文本输入框
    可变元素：根据上下文，来确定是块还是内联。  （ <button></button> ）
    
    元素类型的转换：
        属性：display
            作用:检索或者是设置元素所生成的盒模型类型。
    
        属性值：
            display:block;    将元素转成块状元素，使其拥有块状元素特点。
            display:inline;   将元素转成内联元素，
            display:none;    将元素隐藏不可见，并且不占据空间
            display:list-item   li的默认值
            display:inline-block    input的默认值。
    
    
    注：添加浮动的元素，都能直接设置宽高。

默认情况下大部分块状元素的display的值：block; 其中li的display的值 list-item; ( 列表元素 )  
默认情况下大部分内联元素的display的值：inline; 其中input的display的 inline-block ( 行内块元素 )

inline-block   行内块元素（内联块元素）
        特点：能直接添加宽高、横向排列、每个行内块元素之间有默认间距。
    
        inline-block应用：
            常与 vertical-align:middle;一起使用。来实现让一个元素在父元素里面左右上下居中。
    
            text-align：水平居中
            vertical-align:top/middle/baseline/bottom

## 元素类型分类 ##

-- 块状元素、内联元素、可变元素 --
    -- 块状元素、内联元素、行内块元素（inline-block） --
    -- 块状元素、内联元素 --

## 每个类型的元素特点 ##

-- 块状元素特点：独占一行、能加宽高、矩形区域、常作为容器 --
    -- 内联元素特点：不能加宽高、一行内逐个显示、符合盒模型的规则 --
    -- 可变元素特点：根据上下布局流 确定生成块还是内联 --
    -- 行内块元素特点： 一行内显示、能加宽高、两个之间存在间距 --

## 元素类型的转换 ##

* display属性 *
        -- display:block   转块 --
        -- display:inline  转内联（转行内） --
        -- display:none     隐藏元素 --
        -- display：list-item      li的默认值 --
        -- display:inline-block     input的默认值（行内块元素） --

–>

## 为什么图片和input能直接添加宽高？？？？？？？ ##

-- 从另一个角度对标签进行分类 ： 置换元素 与 非置换元素 --
    
        ** 置换元素：某个元素在页面中显示的状态，由该标签的属性或者是标签类型决定，这个元素称之为" 置换元素 " 。   置换元素在页面生成的过程中生成一个框，框架设置大小。 **
    
    *
        分析：
            input 标签在页面中显示的状态，是由type的属性值决定。
            img 在页面中的显示状态，是由src属性值决定。
    *

网页中得定位：（ 操作得就是某个元素 ）  
1：让元素离开当前得位置  
2：确定参照物（当前元素根据谁来确定位置）  
3：固定坐标（ left right top bottom ）

属性:  position  设置或者是检索元素得定位方式。 【  把元素抓起来，让他离开所在得位置  】
        属性值：（ 确定参照物得 ）
    
        1》 position:static     静态定位。（ 默认值 ）
    
        2》 position:absolute    绝对定位。
            参照物：已经定位的父元素(一层一层往父元素查找，直到找到为止)，如果没有父元素，则以整个文档（html/body）做为参照物。
            是否破坏布局流：  破坏布局流、不占据空间。
    
        3》 position:relative    相对定位。
            参照物：是自身默认的位置。
            是否破坏布局流：   不破坏布局流、占据空间。
    
        4》 position:fixed    固定定位
            参照物：  浏览器窗口。
            是否破坏布局流：  不占据空间
    
        扩展：
        5》 position: sticky    粘性定位。
            如果给一个元素设置了粘性定位，初始状态，定位方法是按照position:relative;
            当页面出现滚动条，粘性定位则是按照position:fixed;的定位方法执行。
            
            例子：实现 “ 吸顶效果 ”

position 定位属性，检索对象的定位方式；  
语法：position：static /absolute/relative/fixed  
取值：  
1、static：默认值，无特殊定位，对象遵循HTML原则；  
2、absolute：相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)  
3、relative ：是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】）  
4、fixed：(固定定位)相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。  
二、定位元素的层级属性  
z-index : auto |number 检索或设置对象的层叠顺序。  
auto：默认值。遵从其父对象  
number:无单位的整数值。可为负数  
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；  
说明：

1）较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。  
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

命名锚点链接的应用

定义：  
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点的作用：在同一页面内的不同位置进行跳转。  
制作锚标记：  
1)给元素定义命名锚记名  
语法：<标记 id=“命名锚记名”> </标记>  
2)命名锚记连接  
语法：

文字溢出省略号处理：

\#怎么让banner图在中心居中：  
.banner-cont\{  
width:1003px ;  
height:466px ;  
margin: 0 auto;  
background: saddlebrown;  
position: relative;

\}  
.banner-cont img\{  
position: absolute;  
left: 50%;  
margin-left:-699px;  
overflow-x:hidden;  
\}  
透明：  
/\*  
opacity: 属性值 0 - 1； ( IE不能识别 )  
让整个元素有透明效果（包括内容）  
opacity:0.value;(value的取值范围  
0-1 0.1,0.2,0.3-----0.9—1)

ie透明：  filter:alpha(opacity=30);
    filter:alpha(opacity=value);取值范围 1-100
        */
    </style>

BUG处理：

兼容性：

1）_ 下划线属性过滤器( IE6过滤器 )
    当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。 语法：选择符{ _属性：属性值；} 此方法是区分IE6浏览器和其他浏览器的方法；
    
    2）!important关键字过滤器
    它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6不识别此写法） 语法：选择符{属性：属性值!important;}
    
    3）* 属性过滤器
    当在一个属性前面增加了*后，该属性能被IE7及以下浏览器识别，其它浏览器忽略该属性的作用。 语法：选择符{*属性：属性值；}
    
    4）\0 : IE8及以上版本识别；其他浏览器都不识别
    语法：选择符{属性：属性值\0；}

text-transform: uppercase;英文大写；  
1)图片有边框BUG  
当图片加在IE上会出现边框 Hack:给图片加border:0;或者border:0 none;  
2)图片间隙  
div中的图片间隙BUG  
描述：在div中插入图片时，图片会将div下方撑大大约三像素。  
hack1:将与写在一行上；  
hack2:将转为块状元素，给添加声明：display:block;

dt,li中图片间隙  
hack: 将转为块状元素，给添加声明：display:block;  
3) 双倍浮向（双倍边距）（只有IE6出现）  
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。  
hack:给浮动元素添加声明：display:inline;  
4)默认高度（IE6、IE7）  
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）  
hack1:给元素添加声明：font-size:0;  
hack2：给元素添加声明：overflow:hidden;  
5)表单元素行高对齐不一致  
描述：表单元素行高对齐方式不一致  
hack:给表单元素添加声明：float:left;  
6)按钮元素默认大小不一  
描述：各浏览器中按钮元素大小不一致  
hack1： 统一大小/（用a标记模拟）  
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。  
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。  
hack: 给右面的浮动元素添加声明：  
clear:right; 意思：清除右浮动。  
clear:left:清除左浮动  
clear:both:清除两边的浮动  
7)鼠标指针bug  
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。  
hack: 如统一某元素鼠标指针形状为手型，  
应添加声明：cursor:pointer  
8)透明属性  
兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )  
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)  
cursor:  
; auto默认  
crosshair加号  
text文本  
wait等待  
help帮助  
progress过程  
inherit继承  
move移动  
ne-resize向上或向右移动  
pointer手形  
过滤器(filter)  
1）\_ 下划线属性过滤器  
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。 语法：选择符\{ \_属性：属性值；\} 此方法是区分IE6浏览器和其他浏览器的方法；

2）!important关键字过滤器  
它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6不识别此写法） 语法：选择符\{属性：属性值!important;\}

3）\* 属性过滤器  
当在一个属性前面增加了\*后，该属性能被IE7及以下浏览器识别，其它浏览器忽略该属性的作用。 语法：选择符\{\*属性：属性值；\}

4）\\9 ： IE版本识别；其他浏览器都不识别  
语法：选择符\{属性：属性值\\9;\}  
5）\\0 : IE8及以上版本识别；其他浏览器都不识别  
语法：选择符\{属性：属性值\\0；\}

宽度自适应：
        当块状元素。宽度width  不设置 或者是 设置成width:100%;  宽则是根据父元素而变化。
    
    
    注：当元素不去设置width的时候，并且该元素脱离文档流（ 浮动、定位 ），宽是内容撑开的宽。
    
    高度自适应：
        第一种情况：
            当height不去设置，或者是height:auto; 元素的高被内容（子元素）撑开的。
    
     需求：
        1：当内容增多的时候，内容把父元素撑开。
        2：如果内容比较少或者是板块内暂时没有内容的时候，需要让板块保持一个最小高度。
    
     对height属性的分析：
        现在大部分浏览器解析height的时候，都是把元素的高固定死，不受内容的影响。
        ie 低版本 解析height 默认就解析成最小高度。
    
     最小高度的设置
        min-height:   最小高度  （ IE6不认识 ）
    
    如果考虑IE6  怎去设置最小高度？
        a:   _height:value;min-height:value;
        b:   min-height:300px;height:auto!important;height:300px;
    
    高度塌陷：
        出现的场景：当父元素没有设置高度，并且子元素有浮动的情况下，父元素会出现高度塌陷。
    
    
    解决高度塌陷的方法：
        1：在塌陷元素添加overflow:hidden;
            原理：因为overflow:hidden;能触发BFC  ( 块级格式化上下文、独立的渲染区 )
                在BFC里面规定：计算BFC高度的时候，浮动也参与计算。
    
            缺陷：会隐藏掉定位在元素外面的内容。

hack2:在浮动元素下方添加空div,并给该元素添加  
声明：  
div\{clear:both; height:0; overflow:hidden;\}

hack3:万能清除浮动法  
选择符:after\{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;\}

visibility:hidden;和display:none;的区别  
visibility:hidden;  
属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

伪对象选择符  
1）、::after : 与content属性一起使用，定义在对象后的内容。  
语法：选择符：:after\{content:”文字”;\}  
选择符：:after\{content:url(图片路径)；\}  
如：div::after\{content:url(logo.jpg);\}  
div::after\{content:“文本内容”;\}

2）、::before: 与content属性一起使用,定义在对象前 的内容。  
如：div::before\{content:“在其前放内容”;\}

3）、::first-letter 定义对象内第一个字符的样式。  
说明： \*(该伪元素只能用于块级元素。)

4）、：:first-line:定义对象内第一行的样式。  
说明： \*(该伪元素只能用于块级元素。)  
\*ie6以下版本浏览器不支持伪对象选择符。

六、Flash和marquee(滚动字幕)  
1、插入flash  
1）语法：

2）将flash背景设置为透明 给标记添加属性：wmode="transparent" 说明：flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe. gif格式：.gif 3）IE中不显示flash,可做如下操作： A.下载安装flash player; B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：  
<marquee  
behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）=“up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）”  
scrollamount（滚动速度）="value"height=“value(上下滚动范围)“width=””(左右滚动范围)>  
内容  
  
七、overflow中的滚动条  
1,Overflow内容溢出时的设置  
属性：  
overflow 水平及垂直方向内容溢出时的设置  
overflow-x 水平方向内容溢出时的设置  
overflow-y 垂直方向内容溢出时的设置  
以上三个属性设置的属性值：  
visible、scroll、hidden、auto、  
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。  
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。  
scroll 无论内容是否超越范围，都将显示滚动条。  
auto 当内容超出范围时，显示滚动条，否则不显示。  
应用:  
1）没有水平滚动条:

test

2）没有垂直滚动条

test

3）没有滚动条

二、BFC布局规则：

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

三、每个元素的margin box的左边， 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。六、计算BFC的高度时，浮动元素也参与计算

三、哪些元素会生成BFC?

根元素  
float属性不为none  
position为absolute或fixed  
display为inline-block, table-cell, table-caption, flex, inline-flex  
overflow不为visible

HTML5 新增语义化标签  
section元素 表示页面中的一个内容区块  
article元素 表示一块与上下文无关的独立的内容  
aside元素 在article之外的，与article内容相关的辅助信息  
header元素 表示页面中一个内容区块或整个页面的标题  
footer元素 表示页面中一个内容区块或整个页面的脚注  
nav元素 表示页面中导航链接部分  
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)  
  
time时间  
mark某个字符高亮显示  
main元素 表示页面中的主要的内容 (ie不兼容)  
canvas标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

兼容低版本浏览器：

Video和audio的应用  
video元素 定义视频  
Video元素  
audio元素 定义音频  
Audio元素

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。  
autoplay属性：如果出现该属性，则视频在就绪后马上播放。  
loop属性：重复播放属性。  
muted属性：静音属性。  
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

渐进增强和优雅降级  
渐进增强 progressive enhancement：  
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。  
优雅降级 graceful degradation：  
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。  
区别：  
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

CSS3选择器  
一、属性选择器  
1、E\[attr\]：只使用属性名，但没有确定任何属性值；  
2、E\[attr=“value”\]：指定属性名，并指定了该属性的属性值；  
3、E\[attr~=“value”\]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写  
4、E\[attr^=“value”\]：指定了属性名，并且有属性值，属性值是以value开头的；  
5、E\[attr$=“value”\]：指定了属性名，并且有属性值，而且属性值是以value结束的  
6、E\[attr\*=“value”\]：指定了属性名，并且有属性值，而且属值中包含了value；  
7、E\[attr|=“value”\]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

二、伪类选择器  
1、结构性伪类选择器  
X:first-child 匹配子集的第一个元素。IE7就可以支持  
X:last-child匹配父元素中最后一个X元素  
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始  
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。  
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X  
X:only-of-type匹配属于同类型中唯一兄弟元素的X  
X:first-of-type匹配同级兄弟元素中的第一个X元素  
X:nth-last-child(n)从最后一个开始算索引。  
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X  
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML  
X:empty匹配没有任何子元素（包括包含文本）的元素X  
2、目标伪类选择器  
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

3、UI 元素状态伪类选择器  
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素  
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素  
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E  
E:selection 匹配E元素中被用户选中或处于高亮状态的部分 selection 选择  
/\* input:enabled\{  
background:pink;  
\}  
input:disabled\{  
background:\#ccc;  
\} \*/  
input:checked+label\{  
background:red;  
color:\#fff;  
\}  
p::selection\{  
background:green;  
color:yellow;  
font-size:30px;  
\}

选择爱好 篮球 足球 排球 羽毛球 乒乓球

乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球乒乓球

4、语言伪类选择器  
:lang eg：E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。

5、否定伪类选择器  
E:not(s) （IE6-8浏览器不支持:not()选择器。）  
匹配所有不匹配简单选择符s的元素E

6、动态伪类选择器  
E:link  
链接伪类选择器  
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited  
链接伪类选择器  
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active  
用户行为选择器  
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover  
用户行为选择器  
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

7、层级选择器  
E>F  
子选择器  
选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F  
相邻兄弟选择器  
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

E~F  
通用选择器  
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

文本换行的相关属性  
Word-wrap  
属性值：  
normal  
说明：只在允许的断字点换行（浏览器保持默认处理）  
break-word  
说明：属性允许长单词或 URL 地址换行到下一行。  
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

Word-break  
属性值：  
break-all  
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句  
Keep-all  
说明：文本不会换行，只能在半角空格或连字符处换行。

1、Background-origin 背景原点  
说明：  
指定background-origin属性应该是相对位置  
属性值：  
padding-box 背景图像填充框的相对位置  
border-box 背景图像边界框的相对位置  
content-box 背景图像的相对位置的内容框  
注：默认值为：padding-box;

2、Background-clip 背景裁切  
说明：  
background-clip 属性规定背景的绘制区域。  
属性值：  
border-box 背景被裁剪到边框盒。  
padding-box 背景被裁剪到内边距框。  
content-box 背景被裁剪到内容框  
。  
注：默认值：border-box;

3、Background-size 背景尺寸  
说明：  
background-size 规定背景图像的尺寸  
属性值：  
length  
规定背景图的大小。第一个值宽度，第二个值高度。

Percentage(%)  
以百分比为值设置背景图大小

cover  
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain  
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4、css3多背景属性  
Eg:  
p\{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片  
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面  
background-color:yellow; //这是定义的默认背景颜色，全部适合 \}

CSS3 边框的新增属性  
1、border-color  
EG:  
border-color:red green \#000 yellow;(上右下左)

2、border-image  
border-image 属性是一个简写属性，用于设置以下属性:  
border-image-source 用在边框的图片的路径。  
border-image-slice 图片边框向内偏移。  
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)  
border-image-outset 边框图像区域超出边框的量

3、Border-radius 圆角边框  
(1)  
.box\{ border-radius: 5px 10px 20px 50px \}

(2)  
.div1\{border-radius: 2em/1em\}

以斜杠/分开后面的参数:  
第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径

(3)  
.div1\{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px \}

按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。

4、box-shadow 盒子阴影  
属性值：

Eg:box-shadow: 10px 10px 5px \#888888  
。  
/\*怪异盒模型：加padding盒子不会被撑大，而内容被挤小  
box-sizing:  
属性值：  
content-box 标准盒模型  
border-box 怪异盒模型（IE盒模型）

弹性盒子：  
作用：控制子元素的布局方式。  
特点：  
A:在弹性盒子里面，所有的子元素按照” 主轴 “排列。（ 默认情况下：横轴X轴为主轴 ）  
B：在弹性盒子里面，所有的子元素都能设置宽高。  
c:在弹性盒子里面，一个子元素如果在弹性盒里面居中，只需添加margin:auto;

1: display:flex;  使当前元素形成弹性盒子。
    
    2: 改变主轴  flex-direction
        属性值：
            row       X轴为主轴
            column    Y轴为主轴
            row-reverse  X轴为主轴反向排列
            column-reverse  Y轴为主轴反向排列
    
    
    3: 元素在主轴上的对齐方式。   justify-content
        属性值：
            ■ flex-start默认，顶端对齐
            ■ flex-end末端对齐
            ■ center居中对齐
            ■ space-between两端对齐，中间自动分配
            ■ space-around自动分配距离

4：在侧轴的对齐方式： align-items  
属性值：  
flex-start  
flex-end  
center  
baseline 默认情况下和flex-start等效。  
5:flex-wrap:; 是否换行  
属性值：  
wrap  
nowrap  
wrap-reverse  
6:控制换行之后，行与行之间的对齐方式。  
属性：align-content  
■ flex-start默认，顶端对齐  
■ flex-end末端对齐  
■ center居中对齐  
■ space-between两端对齐，中间自动分配  
■ space-around自动分配距离  
7:控制某一个子元素在侧轴的对齐方式。 align-self (添加在子元素上面)  
属性值：  
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。  
Stretch 元素被拉伸以适应容器。  
Center 元素位于容器的中心。  
flex-start 元素位于容器的开头。  
flex-end 元素位于容器的结尾。

8:order 排序 添加在子元素上的属性  
属性值为一个数值，数值越大越往后排。能接受负数。

9：flex:1; 将弹性盒子主轴上剩余的空间全部分配给当前元素。

flex    复合属性。
        flex-grow
            一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
        flex-shrink
            一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
        flex-basis
            项目的长度
    flex-shrink：0；    不让元素在主轴上压缩。

CSS3 多列

1、column-count  
说明：  
属性规定元素应该被分隔的列数  
适用于：除table外的非替换块级元素, table cells, inline-block元素

2、column-gap  
说明：  
说明： 属性规定列之间的间隔大小

3、column-rule  
说明：  
设置或检索对象的列与列之间的边框。复合属性。  
column-rule-color规定列之间规则的颜色。  
column-rule-style规定列之间规则的样式。  
column-rule-width规定列之间规则的宽度。

4、column-fill  
说明：  
设置或检索对象所有列的高度是否统一  
auto：列高度自适应内容  
balance：所有列的高度以其中最高的一列统一

5、column-span  
说明：  
设置或检索对象元素是否横跨所有列。  
none：不跨列  
all：横跨所有列

6、column-width  
说明：  
设置或检索对象每列的宽度

7、columns  
说明：  
设置或检索对象的列数和每列的宽度。复合属性  
注释：  
Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。

break-inside: avoid; /\* 防止元素内部断裂 \*/

弹性盒不能用多列

媒体查询  
@media screen and (min-width:1000px) and (max-width:1200px)\{  
body\{  
background: saddlebrown;  
\}  
\}

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型  
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)  
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

/\* 竖屏 */  
@media screen and (orientation:portrait) and (max-width: 720px) \{对应样式\}  
/* 横屏 \*/  
@media screen and (orientation:landscape)\{对应样式\}

CSS2 Media用法  
其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的heaad标签中插入如下的一段代码

想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：

第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

CSS3 渐变

1、线性渐变  
语法：  
background: linear-gradient(direction, color-stop1, color-stop2, …);  
说明：  
direction：默认为to bottom，即从上向下的渐变；  
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。  
div \{ background:linear-gradient(to left, red , blue) \}  
div \{ background:linear-gradient(to right, red , blue) \}  
div \{ background:linear-gradient(to bottom, red , blue) \} /\* 浏览器默认值 \*/  
div \{ background:linear-gradient(to top, red , blue) \}  
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变  
div \{ background: linear-gradient(to right bottom, red , blue); \}  
div \{ background: linear-gradient(to right top, red , blue); \}  
div \{ background: linear-gradient(to left bottom, red , blue); \}  
div \{ background: linear-gradient(to left top, red , blue); \}  
分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变  
示例3：使用角度渐变  
div \{ background: linear-gradient(10deg, red, blue) \}

2、径向渐变  
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法：  
background: radial-gradient(center, shape, size, start-color, …, last-color);  
说明：  
center：渐变起点的位置，可以为百分比，默认是图形的正中心。  
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。  
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；  
farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

示例3：设置渐变形状  
div \{ background: radial-gradient(circle, red, yellow, green); \}  
div \{ background: radial-gradient(ellipse, red, yellow, green); \}  
circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。  
示例4：不同尺寸的渐变  
size指定了渐变的大小，即渐变到哪里停止，它有四个值。  
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

div \{ background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); \}  
3、重复渐变  
（1）重复性线性渐变  
div \{ background: repeating-linear-gradient(red, yellow 10%, green 20%); \}  
说明：  
10%的位置为yellow，20%的位置为green，然后按照这20%向下重复  
2）重复性径向渐变  
div \{ background: repeating-radial-gradient(red, yellow 10%, green 20%); \}

CSS3 过渡  
transition  
transition-property：检索或设置对象中的参与过渡的属性  
transition-duration：检索或设置对象过渡的持续时间  
transition-delay：检索或设置对象延迟过渡的时间  
transition-timing-function：检索或设置对象中过渡的动画类型  
简写：  
transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型  
/\*  
transition 必须通过 事件 触发  
\*/

贝塞尔曲线：  
属性值：cubic-bezier()  
贝塞尔曲线网址：http://cubic-bezier.com/

CSS3 2D  
transform  
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()

1、translate()  
将元素向指定的方向移动，类似于position中的relative。  
水平移动：  
向右移动translate(tx,0)和向左移动translate(-tx,0)；  
垂直移动：  
向上移动translate(0,-ty)和向下移动translate(0,ty);  
对角移动：  
右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

translateX()：  
水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。  
translateY()：  
纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。  
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。  
所以  
transform:translate(-100px,0)实际上等于transform:translateX(-100px);  
transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

2、scale()  
让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。  
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。  
例如，  
scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。

3、rotate()  
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。  
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

、skew()  
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。  
一个参数时：表示水平方向的倾斜角度；  
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

transform-origin是变形原点  
transform-origin:value1 value2;  
value1 X轴位置  
value2 Y轴位置  
\*/

3D  
3d旋转：  
transform:rotateZ();  
transform:rotate3d()

/\*  
transform:translate3d(X,y,Z);

transform:translateZ（）；
        */

transform-style:preserve-3d; /*形成一个3d空间*/

/\*  
backface-visibility:hidden; 让元素的背面不可见！！！  
*/  
/*  
transform-origin:value1 value2;  
value1 X轴位置  
value2 Y轴位置  
*/  
动画：  
/*  
调用关键帧

animation:复合属性
                    属性值：
                        1：关键帧的名称
                        2：动画持续的时间    MS    s
                        3: 动画的运动类型   linear     step-start
                        4:动画的延迟
                        5:运动的次数  number ||   infinite;
                        6: 运动的方向   reverse  反向        alternate 交替先正后反  
    
                animation-play-state    动画暂停或者是运动  running    paused
            */

animation和transition的区别  
相同点：  
都是随着时间改变元素的属性值。  
不同点：  
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

animation  
animation复合属性。检索或设置对象所应用的动画特效。  
1.animation-name 检索或设置对象所应用的动画名称  
说明：  
必须与规则@keyframes配合使用，eg:@keyframes mymove\{\} animation-name:mymove

2.animation-duration 检索或设置对象动画的持续时间  
说明：  
animation-duration:3s; 动画完成使用的时间为3s

3.animation-timing-function 检索或设置对象动画的过渡类型  
说明：  
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)  
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)  
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)  
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)  
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

4.animation-delay 检索或设置对象动画延迟的时间  
说明：  
animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

5.animation-iteration-count 检索或设置对象动画的循环次数  
说明：  
animation-iteration-count: infinite | number;  
infinite：无限循环  
number: 循环的次数

6.animation-direction 检索或设置对象动画在循环中是否反向运动  
说明：  
normal：正常方向  
reverse：反方向运行  
alternate：动画先正常运行再反方向运行，并持续交替运行  
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state 检索或设置对象动画的状态  
说明：  
animation-play-state:running | paused;  
running:运动  
paused: 暂停  
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行  
/\*  
3d旋转：  
transform:rotateZ();  
transform:rotate3d()

\*/

景深效果：  
perspective: 1100px;