-1. HTML&CSS 基础总结

HTML&CSS Favorite

1.基础知识

1.HTML

1.1基本结构标签

1.骨架

	
        
        
        
    
    
        
    


2.排版标签
标题标签   
 标题文本 
h1>  h1~h6
段落标签   
 段落文本内容 
水平线标签  
   水平线
换行标签    
  换行  
布局标签    
 这是一个区域 
   division
    	   今日价格 	

3.文本格式化标签
文字粗体      粗体字
文字斜体	  斜体字
文字加删除线   加删除线
文字加下划线   加下划线

4.标签属性
<标签名 属性1=“属性值1” 属性2="属性值2">内容

5.图像标签


src="URL" 图形的路径，必填
alt="文本" 图像不能显示时的替换文本
title="文本" 鼠标悬停时显示的内容 
width/height="数字"  设置图像的宽高
border="数字"  边框的厚度

6.链接标签
文本或图像

href="外部链接/内部链接/空连接/超链接"


 


target="self/blank/"  self为默认值，blank为新窗口打开
   把所有的连接都默认添加target,写在里

text-decoration: none;
    
7.注释标签


8.锚点
 
第二集
        创建链接锚点
 跳转到第二集   跳转接口

1.2进阶组件标签

1.表格 --多用来展示数据

tr - th
tr - td
tr - td


    
表格顶部大标题
    

		

        	
标题行01
            
标题行02
            
标题行03
        
	
	

		

    		
第一行单元格01
        	
第一行单元格02
        	
第一行单元格03,跨行合并下边一格
   		 
        
 
    		
第二行单元格01
        	
第二行单元格02
        	
第二行单元格03，被跨行合并应删除
   		 
        
 
    		
第三行单元格01
        	
第三行单元格02
        	
第三行单元格03
   		 
	
    

    	
 
    		
底部单元格01
        	
底部单元格02
        	
底部单元格03
   		 
    
 

border 设置表格的边框，默认border="0"无边框
align  设置表格在网页中的水平对齐方式，left center right
cellspacing  设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白距离

rowspan  跨行合并，合并上下 rowspan="合并单元格的个数"
colspan  跨列合并，合并左右 colspan="合并单元格的个数"

2.列表 --多用来布局
ul - li    /无序列表
ol - li    /顺序列表
dl - dt    /标题列表
   - dd


    
列表项01
    * 无序列表列表项01
    
列表项01
	  * 无序列表列表项01
    
列表项01
	  * 无序列表列表项01
 


    
列表项01
    1.有序列表列表行项01
    
列表项01
	  2.有序列表列表行项01
    
列表项01
	  3.有序列表列表行项01



    
中国
    
北京
    
上海
    
深圳


list-style:none; //取消列表样式

3.表单


    


action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式，其取值为get或post
name 用于指定表单的名称，以区分同一个页面中的多个表单

4.input控件



    


男 
女 

type="text/password/radio/checkbox/button/submit/reset/image/file"

5.label标签
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 
-用法一，label直接包含表单    
 用户名：     
-用法二，通过for 和 id来控制    
Male    

    
6.textares文本域控件

文本内容


7.下拉菜单列表
请选择：

    选项1
    选项2
    选项3
    选项4

1.3 HTML用例

//字体布局

    JavaScript,CSS, HTML,Java,C##,Android,



    ￥5800 ￥4900
  

1.4 Emmet快捷键语法

1. div+tab键
2. div*3
3. ul>li
4. div+p
5. .className
6. #idName
7. .className$*3   //生成有顺序的自增的类名

1.5 HTML5新增

1. 新增语义化标签 
头部
导航
内容标签
块级标签
侧边栏标签
底部

2. 新增多媒体标签

-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面
-width:视频的宽度

3. 新增input表单属性




总金额：￥100.00

4. 新增type属性 
- type=  text/password/email/tel/url/number/range/color/time/date/
datetime-local/month/week

-常用 type= 'email/url/date/time/number/tel/search/color'


5. 进度条



6. 内嵌入边框线的文字

   
内嵌入边框线的文字

2.CSS

2.1 CSS基础

2.1.0 CSS基础

0. 建议书写顺序：定位/盒子/文本

1. 文本：(颜色，水平位置，垂直位置，首行缩进，下划线)

2. 字体：(大小，字体，粗细，倾斜)

3. 背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)

4. 盒子模型：(宽高，边框线，外边距，内边距)

5. 定位与浮动

6. 显示与隐藏

   1.文本：(颜色，水平位置，垂直位置，首行缩进，下划线)
   color: black //前景色（文字颜色）
   text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式

   height: 50px; //搭配使用,行高等于高度，垂直居中
   line-height: 50px/24px;//行高，设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线（baseline）之间的间距

   vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
   baseline;bottom;text-bottom;top;

   text-indent: 2em; //首行缩进，设置第一行内容的缩进，1em就是一个汉字的宽度
   text-decoration:none;underline;overline;line-through //设置文字的装饰线

   text-shadow: //给文字添加阴影效果

   direction:
   letter-spacing
   word-spacing:
   text-transform:
   white-space:

   2.字体：(大小，字体，粗细，倾斜)
   font: font-style font-variant font-weight font-size/line-height font-family

   font-size: 16px;2em(200%) //文字大小，16px为默认
   font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体，多个字体
   font-weight:normal(400);bold(700) //用于设置文字的粗细（重量）
   font-style: normal;italic;oblique //设置文字的常规、斜体显示
   font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母

   3.背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)
   background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
   image position/size repeat attachment color
   background: rgba(0,0,0,0.3) //背景半透明，最后一个参数Alpha透明度，取值0~1之间
   background-color: #000000;transparent;//透明色
   background-image: url(“bg001.png”);
   background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
   background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
   background-attachment: scroll;fixed; //背景图片跟随元素关系，滚动/固定
   background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
   : left;center;right;
   : top;center;bottom;
   : center top; //常用定位

   background: linear-gradient(起始方向，颜色1，颜色2, …);
   background: linear-gradient(left,red,blue); //背景颜色线性渐变
   background: -webkit-linear-gradient(left,red,blue);

   cursor:auto;default;pointer;text;none; //设置鼠标指针（光标）在元素上面时的显示样式
   opacity: 0.2; /盒子半透明/

   4.盒子模型：(宽高，边框线，外边距，内边距)
   width: min-width;max-width;
   height: min-height;max-height;

   border: 1px solid #f00;1px solid transparent; //透明边框
   border-width：1px;
   border-style：none;dotted;dashed;soild;double;groove;ridge;inset;outset;
   border-color: #fff;

   border-radius: 50%; // 缩写属性,50%一个圆
   border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
   border-top-left-radius: 20px; //上左
   border-top-right-radius: 20px; //上右
   border-bottom-right-radius: 20px; //底右
   border-bottom-left-radius: 20px; //底左

   border-collapse:collapse; //相邻边框合并在一起

   margin: //外边距, margin一般是用来设置兄弟元素之间的间距，左右外边距
   padding: //内边距, padding一般是用来设置父子元素之间的间距

   margin: 0 auto; //块级盒子水平居中，盒子须有宽度
   text-align: center; //文字，行内元素，行内块水平居中

   box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
   box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

   box-sizing: //用来设置盒子模型中宽高的行为

   content-box; //padding、border都布置在width、height外边，以往标准盒模型

   border-box; //padding、border都布置在width、height里边.不撑开盒子,内减

   outline: none; //表示元素的外轮廓,不占用空间,默认显示在border的外面
   outline-width:
   outline-style:
   outline-color:

   5.定位与浮动：
   –浮动-- (脱标，无位，类行内块)

   1. 可以让块盒子水平排列成一行，脱离标准流，不占位置，且相当于inline-block
   2. 需要给浮动的元素添加一个标准流的父亲，父给高度，子浮动
   3. 父无法确定高度。父清除浮动，子浮动给高度，父盒子自动检测高度
   4. 一个行内元素的盒子()，如果加了浮动，固定定位和绝对定位，不用转换，就可以给盒子直接设置宽度和高度
   5. 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并问题。

   float: none;left;right; //浮动,文字四周环绕图片，不能与行内级内容层叠,浮动元素之间不能层叠

   clear: //一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠，清除浮动
   left //要求元素的顶部低于之前生成的所有左浮动元素的底部
   right //要求元素的顶部低于之前生成的所有右浮动元素的底部
   both //要求元素的顶部低于之前生成的所有浮动元素的底部
   none //默认值，无特殊要求

   –定位–

   1. 可以让盒子定在某个位置，自由漂浮在其他盒子上面.
   2. 定位 = 定位模式 + 边偏移量
   3. 子绝absolute, 父相relative
      position: static;
      relative; //相对定位,不脱离标准流,保留位置，定位参照对象是元素自己原来的位置
      absolute; //绝对定位,脱离标准流、不保留位置、且相当于inline-block
      fixed; //固定定位,脱离标准流、不保留位置，依可视窗口定位，且相当于inline-block
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;

   z-index: 10; //用来设置定位元素的层叠顺序

2.1.0 CSS基础

6. 列表
7. 表格
8. 显示与隐藏
9. 选择器

6.列表：
list-style: none; outside url("images/dot.png");  //缩写属性
list-style-type: none;disc;circle;square;decimal;lower-roman;upper-roman;lower-alpha;upper-alpha;  //设置li元素前面标记的样式
list-style-image:  //设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
list-style-position: outside;inside;  //设置li元素前面标记的位置

7.表格：
border-collapse:collapse;
border-spacing:10px 20px;0; //设置单元格之间的水平、垂直间距

8.显示与隐藏：
display: block;  //让元素显示为块级元素
		 inline;  //让元素显示为行内级元素,不会占着任何位置
		 none;    //隐藏元素，不占位子
	   	inline-block;   //让元素同时具备行内级、块级元素的特征
		  // 让a、span能够随时设置宽高,让div、p能够跟其他元素在同一行显示

visibility:visible;hidden;  //能控制元素的可见性,还会占着原来的位置

overflow:visible;hidden;scroll;auto; //控制内容溢出时的行为,设置overflow为auto触发BFC

resize: none; //禁止缩放
resize: horizontal;  //水平缩放
resize: vertical;  //垂直缩放
resize: both;  //水平垂直缩放

opacity
ilter

9.选择器

a:link  //未访问的链接
a:visited  //已访问的链接
a:hover  //鼠标移动到链接上
a:active  //选定的链接 
 
a:link {
    color: #333;
    text-decoration: none;
}

.nav a:hover {
    color: red; //鼠标放到nav里边的链接才会变色
}

2.1.1 知识基础

//块级元素
 
 
 
  
 ~ 


//行级元素
       

//行内块元素
   

//适用
normal flow（标准流）: 垂直布局
float（浮动）：水平布局
absolute positioning（绝对定位) : 层叠布局

//CSS 建议书写顺序  (定位/盒子/文本)
1. 布局定位属性： display/position/float/clear/visibility
2. 自身属性： width/height/margin/padding/border/background
3. 文本属性： color/font/text-decoration/text-align/line-height/vertical-align/white-space/break-word
4. 其他属性： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

// Class名字
-hd / -bd 
nav /header /banner /center /bottom /copyright /links /footer
logo /search /fixedbar

// 使盒子居中对齐
 -标准流居中
{
    margin: 0 auto;
}
-绝对定位居中
{
    left: 50%;  //让盒子的左侧移动到父级元素的水平中心位置
    margin-left: -100px;  //让盒子向左移动自身宽度的一半
}
-绝对定位居中
{
    transform: translateX(-50%)  //移动平移,(x,y)水平方向和垂直方向同时移动
	left: 50%;  
}

2.1.2 CSS用例

//盒子浮动使用
.one {
    float: left;
    width: 200px;
    height: 200px;
    background-color: red;
}

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

// 导航栏布局

    
  //块元素包裹行内元素
        
首页 加箭头图标 
        
导航1 加箭头图标 
        
导航2 加箭头图标 
        
导航3 加箭头图标 
        
导航4 加箭头图标 
    

 .nav { //父给宽高，子浮动
	width: 760px;
	height: 32px;
	margin: 0 auto;
}
 .nav ul li {
	float: left
}
 .nav ul li a{
    display: block;  
 	width: 80px;  //给a宽高扩充点击范围
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size： 12px;  
    background: url(images/button1.jpg) no-repeat;
}
.nav ul li a：hover{
    background: url(images/button2.jpg) no-repeat;
}

//文字省略处理
{
    white-space: nowrap;  //强制一行内显示文本
    overflow: hidden;   //超出的部分隐藏
    text-overflow: ellipsis;  //文字用省略号替代超出的部分
}
 
//版心 (但子盒子可以比父盒子宽)
.w{
    width:1200px;
    margin: 0 auto;
} 

//去除图片底部的空白空隙
{
    vertical-align: middel;/top;/bottom;
}
// 盒子外边框重叠,压住盒子相邻边框
{
    float: left
    margin-left: -1px;
    margin-top: -1px; 
}

//CSS伪元素和边框造小三角图标
.more::after{
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

2.2 清除浮动

//after双伪元素法清除浮动,给父元素增加::after伪元素的方式清除浮动

.clearfix::after{
	content: "";
    display: block;  /*能设宽高，看不见，高为零*/
    visibility: hidden; /* 兼容旧浏览 */
    height: 0;  /* 兼容旧浏览器 */
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容IE6~7浏览 */
}

//父元素添加overflow清除浮动
overflow: hidden

2.3. flex布局

1. 使用Flex布局的优势
   • 可在不同方向排列元素
   • 控制元素排序的方向
   • 控制元素的对齐方式
   • 控制元素之间的等距
   • 控制单个元素放大与缩放比例、占比、对齐方式
2. Flex布局常用术语
   • flex container : flex 容器
   • flex item : flex项目 (元素)
   • flex direction：布局方向
   • 主轴 — item排列的主方向
   • 交叉轴

2.3.1 Flex容器的属性

//使用  display: flex
//定方向  flex-direction
//主轴  justify-content
//交叉轴  align-items
//换行  flex-wrap
//方向XY行

// flex-flow 
// align-content

//开启flex布局
display: flex,    块级元素，flex container以block-level的形式存在
display: inline-flex   行内元素，flex contaier以inline-level形式存在

//设置容器内部元素的主轴排列方向
flex-direction: 
			   row   //水平排序，从左向右，主轴为横向
			   row-reverse  //从右向左
			   column  //垂直排序，从上到下，主轴为竖向
			   column-reverse   //从下到上

//设置使容器内的元素换行
flex-wrap: 
	      nowrap  // 元素不换行，元素会缩放
		  wrap  // 换行，宽度不够自动换行至第二行
		  wrap-reverse  // 逆向换行
补充：  
white-space: nowrap;  /*规定段落中的文本不进行换行*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
overflow: hidden;

//设置元素在主轴上的对齐方式，元素在主轴方向上如何排列以处理空白部分 
justify-content: 
			    flex-start   //左对齐，空白在右
				flex-end  //右对齐，空白在左
				center    //居中，空白在两边
				space-between  //两端对齐，元素之间保留空白区间，空白间隔等比划分
				space-around //两边对齐，两端边上也保留空白，两边空白小于中间
				space-evenly  //两边对齐，中间和两边空白均分
//设置元素在交叉轴上的对齐方式
align-items: 
	        stretch  //当元素高度没有设置，则元素的高度会拉伸至容器高度一致
			flex-start //在交叉轴上向起点位置(向上/向左)对齐
			flex-end  //在交叉轴上向结束  位置(向下/向右)对齐
			center //在交叉轴上居中对齐
	    	baseline  // 基准线，保证元素中的文字在同一条基准


// 是flex-direction方向 || flex-wrap换行 的简写
flex-flow: row npwrap,

// 多行flex items在交叉轴上的对齐方式，用法与justify-content类似
align-content：  

2.3.2 Flex 元素的属性

   // flex 
   // flex-grow  放大元素，控制均分比例
   // flex-basis 
   // flex-shrink   缩放元素，
   // order 控制元素顺序
   // align-self 重写self-align属性

//flex 是flex-grow || flex-shrink || flex-basis 的简写，
//flex属性可以指定1个，2个或3个值
   flex: 1；  //占父元素的一份
   flex: 20%; //占父元素20%

//控制元素顺序，设置flex容器内部的每个元素的
//排列顺序，默认是0,值越小排序越靠前
   order: 0/1/2/3
   
   // 用于设置元素的放大比例，默认为0，为0则不放大
   flex-grow：1
   // 所有元素都设置为1，则元素平分剩余空间，等分
   flex-grow：1 
   
   //用于定义属性的缩放比例,默认为1，为0则不缩放
   flex-shrink: 1
   
   //设置元素固定或自动空间的占比，优先级高于width
   flex-basis: 300px
   
   补充： 决定flex items 最终 base size的因素，从优先级高到低
    max-width/max-height/min-width/min-height
    flex-basis 
    width/height
    item本身size
   
   //重写父元素align-items的属性
   self-align: 
   		  auto
   		  stretch
   		  flex-start
   		  flex-end 
   		  center 
   		  baseline

2.4 CSS3新增

• 新的选择器

• 转换 transform

• 动画 animation

• 浏览器私有前缀

  1. 结构伪类选择器
     li:first-child
     li:last-child
     li:nth-child(3)
     li:nth-child(even)
     li:nth-child(odd)
     li:nth-child(2n)
     li:nth-child(2n+1)

  2. 属性选择器，权重为10
     div[class] { }
     div[class=demo] { }
     div[class^=test] { } // ^ 以test开头的类名
     div[class$=test] { } // $ 以test结尾的类名
     input[type=“text”]{ }
     button[disabled]

  3. 伪元素选择器,权重为1,必须有content属性
     p::first-letter { }
     p::first-line { }
     p::selection { }
     span::before { }
     span::after { }
     div::before{ } /是一个能插入元素的选择器/
     div::after { }

  4. 过渡
     transition: all 0.5s; /过渡写到本身上 谁做过渡动画，写到谁身上
     / :hover 指定过度后样式
     transition: width 0.5s ease 0s, height 0.3s; /多组属性用逗号分隔

  5. 变形-2D转换
     -位移
     transform:translate(100px,100px) /位移

  • transform: translate(x,y);
  • transform: translateX(n);
  • transform: translateY(n);
  • transform: translate(-50%, -50%); /让盒子水平居中和垂直居中，不会影响其他元素位置
    transform: translateY(-20px);

  -缩放/扩大
  transform: scale(0.8, 0.5); /缩放，宽度变为了原来的 80% 高度变为了原来的 50%
  transform: scale(2, 4); /不会影响其他的盒子，中心点默认是中心

  -旋转
  transform: rotate(360deg); /旋转
  - transform-origin: right bottom; /设置旋转/缩放中心点，写在旋转本体上/
  - transform-origin: 50px 50px;
  - transform-origin: 50% 50%;
  transform: rotateX(360deg); / 旋转
  transform: rotateY(360deg);
  - backface-visibility: hidden; / 定义当图片不面向屏幕时是否可见

  -综合
  transform: translate(100px, 100px) rotate(45deg) scale(0.3); /先位移后旋转缩放

  -变形-倾斜
  transform: skew(30deg); /变形-倾斜

  -阴影
  box-shadow: 0 10px 20px rgba(0,0,0,0.5); / 鼠标经过显示阴影

  6.动画
  animation:名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
  animation: move 2s ease 0s infinite alternate forwards;
  animation: move 5s linear 2s infinite alternate forwards;

  @keyframs 规定动画
  animation 所有动画属性的简写属性，除了 animation-play-state 属性
  animation-name 规定@keyframes 动画的名称
  animation-duration 规定动画完成一个周期所花费的秒或毫秒
  animation-timing-function 规定动画的速度曲线，默认是‘ease’，
  linear匀速,ease-in低速开始 ease-out低速结束
  ease-in-out低速开始和结束 step()指定时间函数中的间隔数量(步长)，类进度条迟钝效果
  animation-delay 规定动画何时开始，默认是0
  animation-iteration-count 规定动画播放的次数，默认是1，还有 infinie无限重复
  animation-direction 规定动画是否在下一个周期逆向播放，默认是‘normal’，alternate逆播放动画
  animation-play-state 规定动画是否正在运行或暂停，默认是 running，还有pause
  animation-fill-mode 规定动画结束后的状态，保持forwards 回到起始 backwards

  7. 3D转换
     -X轴：水平向右，x右边是正值，左边是负值
     -y轴：垂直向下，y下边是正值，上边是负值
     -z轴：垂直屏幕，往外边是正值，往里边是负值，正值变大，负值变小

  -3D位移
  translate3d(x,y,x)

  transform: translateX(100px);
  transform: translateY(100px);
  transform: translateZ(100px);
  transform: translate3d(x,y,z);

  -3D旋转
  rotate3d(x,y,z)
  transform: rotateX(45deg); //沿着X轴正方向旋转45度
  transform: rotateY(45deg); //沿着Y轴正方向旋转45度
  transform: rotateZ(45deg); //沿着Z轴正方向旋转45度
  transform: rotate3d(x,y,z,deg); //沿着自定义轴正方向旋转n度
  transform: rotate3d(1,0,0,45deg) // xyz表示旋转的矢量，标示希望沿着该轴旋转，最后标识角度

  -透视
  -透视也称视距，就是人的眼睛到屏幕的距离，越近成像越大，越远成像越小
  -透视的单位是px
  perspective

  body:{
  perspective: 500px; //透视属性写在被观察元素的父盒子上面
  }

  -3D呈现
  transfrom-style
  -控制子元素是否开启三维立体环境, 该属性写给父级
  transform-style: flat; 子元素不开启3d立体空间，默认
  transform-style: preserve-3d; 子元素开启立体空间

2.4.1 CSS3实例

//案例，小三角
div{
    width: 249px;
    height: 35px;
    border: 1px solid #000;
}
div::after{
    content:'';
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: all 0.6s;   //动画的过渡
}
//鼠标经过div，里面的三角旋转
div:hover::after{
    transform: rotate(225deg);
}

//hover旋转体动画案例
div{
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 1px solid #black;
}
div::before{
    content: '旋转体';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.4s;
}
div:hover::before{
    transform: rotate(0deg);
}

//hover放大案例
div{
    float: left;
    margin: 10px;
    overflow:hidden;
}

div img {
    transition: all 0.4s;
}

div img:hover{
    transform: scale(1.2);
}

//并排按钮hover放大
li {
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #fff;
    margin: 10px;
    text-align: center;
    list-style: none;
    border-radious: 50%;
    cursor: pointer;
    transition: all .4s;
}

li:hover{
    transform: scale(1.2)
}

//动画基本使用
//一个盒子从左边走到右边
1. 定义动画
@keyframes move{
    /* 开始状态 */
    0%{
        transform: translateX(0px);
    }
    /* 结束状态 */
    100%{
        transform: translateX(1000px);
    }
}

div{
    width: 200px;
    height: 200px;
    background-color: black;
    /* 2.使用动画 */
    animation-name: move;
    animation-duration: 2s; //持续时间
}

//动画序列
@keyframs sround{
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(1000px,0);
    }
    50% {
        transform: translate(1000px,500px);
    }
    75% {
        transform: translate(0,500px);
    }
    100% {
        transform: translate(0,0);
    }
}

div{
    width: 200px;
    height: 200px;
    background-color: black;
    animation-name: sround;
    animation-duration: 10s; //持续时间
    
    animation: move 5s linear 2s infinite alternate; //属性简写
}
div:hover {
    /* 鼠标经过div 让div停止动画，鼠标离开就继续动画*/
    animation-play-state: paused;
}

//热点图
//背景地图为一张中国地图

	

		

			
  /*中间小点*/
			
  /*小圆圈*/
			
  
			
  
		
	


body{
    background-color: #333;
}
.map {
    position: relative;
    width: 747px;
    height: 616px;
    background: url(media/map.png) no-repeat;
    marin: 0 auto;
}
.city{
    position: absolute;
    top: 227px;  //定位到北京
    right: 196px;
    color: #fff;
}
.dotted{ 
    height: 8px;
    width: 8px;
    background-color: #09f;
    border-radius: 50%;
}

.city div[class^='pause']{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	width: 8px;
    height: 8px;
    box-shadow: 0 0  12px #009dfd;
    border-radius: 50%;
    animation: pause 1.2s linear infinite;
}

.pause2{
    animation-delay: 0.4s !important;
}
.pause3{
    animation-delay: 0.8s !important;
}


@keyframs pause {
    0%{
        
    }
    70%{
        /*transform: scale(5) 不用scale，会让阴影变大 */
        width: 40px;
        hight: 40px;
        opacity: 1;
    }
    100%{
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

//奔跑的动画效果 step()
//背景图片是8个奔跑动作串



div{
    position: absolute;
    width: 200px;
    height: 200px;
    background: url(media/bear.bng) no-repeat;
    animation：bear 1s step(8) infinite,move 3s forwards;
    //添加两个动画，用逗号隔开。第二个动画控制跑到位置后的定位
}

@keyframs bear {
    0% {
        background-position: 0 0;
    }
    100% {
		background-position: -1600px 0;        
    }
}
@keyframs move {
    0% {
        left: 0;
    }
    100% {
		left: 50%;     
        transform: translate(-50%);
    }
}

//hover两面翻转的盒子

	
后面
	
前面


.box{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    transition: all .4s;
    transform-style: preserve-3d;
}
.box:hover{
    transform: rotateY(180deg);
}
.front .back{
	position: absolute;
    top:0;
    left; 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
}

.front {
    background-color: black;
    z-index: 1;
}
.back {
    background-color: #fff;
    transform: ratateY(180deg);
}

//hover 翻转导航栏

	

		

			
A面
			
B面
		
	
	

		

			
A面
			
B面
		
	
	

		

			
A面
			
B面
		
	


* {
    margin: 0;
    padding: 0;
}
ul {
    margin: 100px;
}

ul li {
    width: 120px;
    height: 35px;
    list-style: none;
    perspective: 500px;  //需要给box旋转
 }
.box{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all .3s;
}
.box:hover{
    transform: rotateX(90deg);
}

.front,.bottom {
    position: absolute;
    left: 0;
    top: 0;
}

.front{
    backround-color: black;
    z-index: 1;
    transform: translateZ(17.5px);
}
.bottom{
    backround-color: #fff;
    //反向旋转,向下移动
    transform: translate(17.5px) ratateX(-90deg)   
    
}

//旋转木马



	
	
	

	

	
	
	

	



body{
    perspective: 1000px;
}

section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 50px auto;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
    background: url(media/pig) no-repeat;
}

section:hover{
    /*鼠标放入section 停止动画*/
    animation-play-state: paused;
} 

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}

section div{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: url(media/dog.jpg) no-repeat;
}

section div:nth-child(1) {
    transform: translateZ(300px);
}

section div:nth-child(2) {
    //先旋转，后移动
    transform: rotateY(60deg) translateZ(300px);
}

section div:nth-child(3) {
    //先旋转，后移动
    transform: rotateY(120deg) translateZ(300px);
}

section div:nth-child(4) {
    //先旋转，后移动
    transform: rotateY(180deg) translateZ(300px);
}

section div:nth-child(5) {
    //先旋转，后移动
    transform: rotateY(240deg) translateZ(300px);
}

section div:nth-child(6) {
    //先旋转，后移动
    transform: rotateY(300deg) translateZ(300px);
}

2.5 私有浏览器前缀

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

-moz-   代表 firefox 浏览器私有属性
-ms-    代表 ie 浏览器的私有前缀
-webkit- 代表 safari chrome 私有属性
-o-  代表Opera 私有属性

//提倡的写法
-moz-border-radius: 10px;
-ms-border-radius: 10px;    
-webkit-border-radius: 10px; 
-o-border-radius: 10px;  

3.常用CSS

3.1移动端常用

//一级容器 
.container {
    //在container中定/方向/给宽高 width > padding > margin
	display: 
    flex-direction: 
    justify-content: 
    align-items:
    
    height: 100rpx; 100%/50px;120rpx  ipone6: 375*667
    width: 690rpx; 48%/345px; 750rpx
    
    margin: 
    padding:    
    margin-right:
    margin-top:
        
    border: 
    border-top: 1px solid black;
    border-radius:50px; 50%;
    
    box-shadow: 2px 2px 3px #e3e3e3;
    box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 

    background-color: 
      
}

//二级容器
.container {
    position: relative; //(脱标)absolute;fixed
    top:
    bottom: 
    right: 
    left:    
        
    height: 80%;
    width: 48%;
}

//组件
.plus{
    
}

//文字 
.text{
    font-size: 38rpx;
    line-height: 38rpx;
    font-weight: 600;
    text-indent: 2em;
    
}

//图片
.image {
    width: 32rpx;160rpx;
    height: 28rpx;160rpx;
}

4.在页面使用字体图标

1. 下载图标，将挑选的代码添加至项目，下载至本地
2. 将解压文件夹中iconfont.css文件复制到项目css文件夹中（待定）
3. 这4个图标文件.eot/.svg/.ttf/.woff复制到项目fonts文件夹中
4. 在css中声明并定义
@font-face {
    font-family: 'iconfont';
    src: url("../fonts/iconfont.eot");
    src: url("../fonts/iconfont.eot?#iefix") format('embedded-opentype'), 		   
    url("../fonts/iconfont.woff") format('woff'), 
    url("../fonts/iconfont.ttf") format('truetype'), 
    url("../fonts/iconfont.svg#iconfont") format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

5. 使用时引入，打开demo_index.html网页文件，复制代码使用


5. 移动端开发

   1. 视口 viewport (理想视口)

   width=device-width -宽度设置的是viewport宽度，可以设置device-width特殊值
   initial-scale=1.0 -初始缩放比，大于零的数字
   maximum-scale=1.0 -最大缩放比，大于零的数字
   minimum-scale=1.0 -最小缩放比，大于零的数字
   user-scalable=no -用户是否可以缩放，yes或no(1或0)

   2. 二倍图
      -插入图片
      准备的图为100*100 使用时设置为 image{width:50px;height:50px;}

   -背景图片
   background-size: 50px,50px;

   3. 内减盒子模型
      box-sizing: border-box;

   4. 特殊样式
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-tap-highlight-color: transparent; /清除点击高亮，设置为transparent透明/
      -webkit-appearance: none; /在IOS上加上该属性才能给按钮和输入框自定义样式/
      img,a{ -webkit-touch-callout: none;} /禁用长按页面时的弹出菜单/

   5. 技术选型
      -1. 单独制作移动端页面(主流)
      -流式布局
      -flex弹性布局
      -less+rem+媒体查询布局
      -flexible.js + rem 混合布局 (较方便)

   -2. 响应式页面兼容移动端
   -媒体查询 + bootstarp

   总结
   flex弹性布局 (推荐)
   rem适配布局 (推荐) flexible.js + rem

5.6 流式布局(百分比布局)

* 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
* max-width 最大宽度 (max-height 最大高度)
* min-width 最小宽度 (min-height 最小高度)

-常用初始化样式
body {
  width:100%;  /*页面布局中行内子的宽度都为百分比，高度为确定值*/
  min-width: 320px;
  max-width: 640px;  
  margin: 0 auto;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serid;
  line-height: 1.5;
  color: #666;  /*灰色*/
}

5.8 rem适配布局

1. rem适配基础
* rem（root em）是一个相对单位，基准是相对与html元素的字体大小
* rem可以通过修改html里面的文字大小来改变页面中元素的大小，进行整体控制

2. 媒体查询
* 语法规范
@media mediatype and|not|only (media feature){
    CSS-Code;
}
* mediatype 媒体类型  all print scree 
* media feature 媒体特性  width min-width max-width

*媒体查询根据不同的屏幕尺寸改变不同的样式


3. 媒体查询+rem实现元素变化




4. rem适配方案
* 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
* 使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化元素尺寸也发生变化，从而达到等比例缩放的适配。
* 按照设计稿与设备的宽度比例，动态计算并设置html根标签的font-size大小；
* CSS 中，设计稿元素的宽，高相对位置的取值，按照同等比例换算为rem为单位的值；

5. 实际适配方案
* 方案一 
less + mediatype + rem
* 设计稿宽度基本以750px
* 页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
* 或者：页面元素的rem值 = 页面元素在750像素下的px值 / html font-size字体大小

-常用初始化样式


* 方案二 （较方便）
flexible.js + rem 

-安装
npm i -S amfe-flexible



-常用初始化样式


-插件vscode里边cssrem插件自动转换
并修改设置为75 Cssrem: Root Font Size

5.8 Less

1. Less介绍
Less 是一门CSS预处理语言，它扩展了CSS的动态特性。

2. 安装
npm install -g less 
lessc -v 

3.使用


4.嵌套


	

		Text
	

	

		
Text and image
	
	




5. 运算
@border: 5px + 5;
div {
    width: 200px - 50; /*运算符左右需要有空格 */
    height: 200px * 2;
    border: @border solid red;
}
img {
    width: 82 / 50rem;
    height: 82 / 50rem;
}

5.9 响应式布局

1. 响应式开发设备划分
超小屏幕(手机)        <768px                设置宽度为100%
小屏设备(平板)		>=768px ~ 992px		  设置宽度为750px
中等屏幕(桌面显示器)   >= 992px ~ 1200px 	设置宽度为970px
宽屏设备(大桌面显示器) >= 1200px			   设置宽度为1170px 	

2. 原理
* 在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化



3. 使用bootstrap开发
* 创建文件夹结构
* 创建html骨架结构
* 引入样式类文件
* 书写内容

4. 使用策略
* 先布局md以上的pc端布局，然后再根据实际需求修改小屏幕和超小屏幕的特殊布局样式


//媒体查询用例
/*当进入小屏幕和超小屏幕时，让nav里边的里浮动起来，且宽度为20% */

@media screen and (max-width: 991px){
    .nav li {
        float: left;
        width: 20%;
    }
}
/* 当进入超小屏幕时，nav里边的文字会变成14px */

@media screen and (max-width: 767px){
    .nav li a {
        font-size: 14px;
    }
}

5.10 Bootstrap

1.基础CSS样式 (class = "")
 
- 预置排版样式
  - 统一预制标签样式
  - lead 
  - text-left text-center text-right text-justify text-nowrap
  - text-lowercase text-uppercase text-capitalize
  - attribute

  - container-fluid  自适应屏幕宽度，即满屏显示100% 宽度的布局，占据全部视口
  - container  响应式布局容器，固定宽度

- 按钮样式
  - btn btn-default btn-primary btn-success btn-info btn-warning btn-danger    btn-link
  		
  - btn-lg btn-default btn-sm btn-xs 
  - btn-block 

- 表格样式
  - table table-striped table-bordered table-hover table-condensed 
  - active success warning danger info
  - table-responsive 

- 表单样式
  - form-group form-inline 
  - form-horizontal 
  - form-control form-control-static 
  - has-success has-warning has-error 
  - has-feedback
  - form-group-lg form-group-sm 

- 图片样式
  - img-responsive  
  - img-rounded img-circle img-thumbnail 
  
- 辅助工具类
  - text-muted text-primary text-success text-info text-warning text-danger 
  - bg-primary bg-success bg-info bg-warning bg-danger  
  - type="button" class="close" aria-label="Close"  关闭按钮
  - caret   
  - pull-left pull-right    快速浮动
  - center-block     让内容块居中
  - clearfix    清除浮动
  - show hidden sr-only
  - text-hide   图片替换

- 栅格系统
  - xs : 超小屏幕 手机 (<768px)  
  - sm : 小屏幕 平板 (≥768px) 
  - md : 中等屏幕 桌面显示器 (≥992px) 
  - lg : 大屏幕 大桌面显示器 (≥1200px)

  - col-xs-4
  - col-xs-12 col-sm-6 col-md-8
  - col-lg-3 col-md-4 col-sm-6 col-xs-12
  - col-md-offset-2 列偏移
  - col-md-push-* col-md-pull-*  列排序，推拉 

  - 如果份数小于12，则占不满整个container
  - 如果份数大于12，则多余的会另起一行



- 响应式工具类
  - hidden-xx : 在某种屏幕下隐藏 
  - visible-xx : 在某种屏幕尺寸下显示
  - hidden-xs /hidden-sm /hidden-md /hidden-lg

2.预置界面组件

- 导航
 - nav nav-tabs nav-pills 
 - nav-justified nav-stacked
 - tab-content 
    - tab-pane 

- 导航条
 - navbar navbar-default 
 
 - navbar-header   navbar-toggle collapsed
 - navbar-brand 
 - navbar-nav navbar-form 
 - navber-left navber-right 
 - navber-fixed-top navber-fixed-bottom nav-bar-static-top 
 - navbar-inverse 
 - navbar-btn navber-text navbar-link
 - 

- 面包屑导航
- 下拉菜单
 - dropdown drop-menu dropdown-menu-right 
 - dropdown-header sparator 
 -

- 按钮式下拉菜单
 - btn btn-default dropdown-toggle

- 按钮组
 - btn-group btn-group-lg btn-group-sm btn-group-xs 
 - btn-toolbar 
 - btn-group-vertical  btn-group-justified
 - btn-lg btn-sm

- 输入框组
 - input-group 
 - input-group-addon 

- 警告框
- 页头
- 分页
- 列表组
- 面板
 - panel panel-default  
 - panel-body panel-heading panel-title panel-footer
 -

- 媒体对象
 - media media-left media-middle media-heading media-object media-body 

- 进度条
- Glyphicons
- 标签
 - label 

- 徽章
 - badge 

- 缩略图
- 大屏幕
- 嵌入内容
- 内嵌

3.JavaScript插件

- data-toggle  modal,popover,tooltips,collapse，dropdown  //指以什么事件触发
- data-target #id  //触发的事件的目标
- aria-controls 
- role 
- data-title 

- 内置组件

- 模态对话框
 - modal fade 
 - modal-dialog
 	- modal-content
 		- modal-header modal-body modal-footer
 - data-target=".bs-example-modal-lg
 - data-target=".bs-example-modal-sm


- 下拉菜单
- 滚动监听
- 标签页
- 工具提示
 - tooltip

- 弹出框
- 警告框
- 按钮
- 折叠面板
- 轮播图
 - carousel slide

- 吸顶效果
  - data-spy="affix"
  - data-offset-top="什么位置出现 60"
  - data-offset-bottom="什么位置消失 200 "

4. 自定义 Bootstrap
  
  - 自定义navbar-mybar
  	 - 在源码里复制出navbar-default到main.css中
  	 - 修改源码里所有的 navbar-default 为 navbar-mybar
  	 - 修改详细样式

5.  --Tips
	-
	- section nav 
		- container
		  - row 
		   - col-xx-x 
	- a 
	  -i span img p div h4
	
	- #header>#header>.topbar>.container 
	- #header .mobile-link
	- #header a 

2. 经典布局代码

2.1 圣杯布局

//圣杯布局  --两端固定图标，中间可长度伸缩，多用作中间搜索框