CSS与c3动画总结

初始化

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body{
    font-size: 12px;
    color:#70706e;
    font-family: "微软雅黑";
}
a{
    color: #70706e;
    text-decoration: none;
}
a:hover{
    color: pink;
}

子元素选择器

`子元素选择器`:
          	子类:nth-child(数字){} 	    --数字代表第几个
            子类:nth-child(odd){}    	 --偶数
            子类:nth-child(even ){}    --奇数
			父类 子类:last-last-child{} --最后一个子元素
			父类 子类:first-child{}     --第一个子元素

属性选择器

`属性选择器`: (根据属性进行查找元素的)
           基本选择器[属性名=属性值]{}

动画

`动画`: 
	  短时间内发生短暂的位移和形变
	  transition:	(读法:圈c选)
				位移translate --- 基于自己本身的位置和宽高的移动
				旋转rotate 	--- 旋转动画，小的倾斜效果
				缩放scale 	--- 鼠标交互

				transform-style - 子元素是否有3d效果
            	perspective 	- 子元素是否近大远小
`用法`:
      transition: all 1s;
`鼠标经过`:
		 :hover
`改变中心点`:
           transform-origin: 50% 100%;

过度动画

`过度动画`:
		 鼠标移动到它身上比如会:变大
         transition: all 1s;
		 在需要鼠标经过的标签写:hover{}

位移动画

transform: translate(x方向的移动,y方向的移动)
transform的移动的百分比是依赖于自身的宽高的
transform: translate(100%,100%);

帧动画

`帧`: 
	fps (每秒刷新多少次) 
`原理`:
	  让物体在微小和时间内发生位移或者形变
`作用`:
	 实现可以播放很多次的动画
`使用方法`:
		第一步声明动画: @keyframes 动画名称{0% {属性}100%{属性} }(0% 100%到达位置)
		第二部指定对应的动画和持续时间在需要的标签里写属性:
							animation: 动画名称 持续时间 动画次数 速度曲线函数 延迟的时间;
        					infinite - 无限次;
		 

2D旋转和3D旋转

`2D旋转`:
	  围绕Z轴进行旋转
      需要旋转的类名{ transition: transform 1s; }
      需要旋转的类名:hover{ transform:rotate(0deg) }

 `3d位移`:
         x轴+y轴+z轴
         z轴是垂直于屏幕的，向你的方向为正
         transform:translateX()
         transform:translateY()
         transform:translateZ()

`3D旋转`: 
		 在父元素里写样式希望能看到一个翻转的效果 :perspective: 1000px;
		 在父元素里写样式开启3d模式 : 	  transform-style: preserve-3d;
         在需要的标签写transform: rotateX(0deg);
         在需要的标签写transform: rotateY(0deg);
         在需要的标签写transform: rotateZ(0deg);

缩小和放大

`2D缩小和放大`:
		   transform : scale(倍数)

`3D缩小和放大`:
             沿着x轴缩放 : transform: scaleX(3); 
             严责y轴缩放 : transform: scaleY(3); 
             沿着z轴缩放 : transform: scaleZ(1000); 

位移

transform: translate(x方向,y方向)

旋转

`语法`:
	rotate(360deg)
	rotateX(deg)
	rotateY(deg)
`用法`:
	  在父元素里写样式:perspective:px 和 transform-style:preserve-3d;

行内元素和块元素图片文字对齐

vertical-align:bottom;

flex布局

弹性布局的几个属性:

`三个属性`:  	(主轴方向,主轴对齐方式,轴对齐方式)
<style>
        /*

        */
        .box{
            width: 1000px;
            height: 500px;
            border: 1px solid skyblue;
            margin: 100px auto;
            display: flex;  /*设置弹性布局*/
            /*  主轴方向 ：盒子默认的排列方向
                次轴方向(侧轴方向)： 主轴方向的另外一个方向
                flex-direction (第喂森): 控制主轴方向   
                flex-direction的4个值：row (默认值: 行),
                                       row-reverse (行反向),
                                       column (列),
                                       column-reverse (列相反)
             */
            flex-direction: row;
            
            换行:flex-wrap: wrap;
            
            /* justify-content设置主轴对齐方式 (加死T fai 空疼)*/
            /* justify-content的5个值： flex-start(默认值左上角对齐) (flex死打)
                                       flex-end,(flex 主轴对齐最右边)(安的)
                                       center, (中间对齐)	(三特)
                                       space-between, (两边靠边对齐) (死被死b吞)
                                       space-around (两边空白对齐)   (死被死哦万)
            */
            justify-content: space-around;

            /* align-items设置侧轴对齐方式  (额来因疼)*/
            /* align-items属性有5个值: 
               设置侧轴拉伸, 要先把高度去掉 height:auto;
                                       flex-start (默认值侧轴对齐最上边)
                                       flex-end, (侧轴对齐最下边) (flex 安的)
                                       center,   (侧轴对齐中间) (森特)
                                       stretch,  (盒子拉伸) 	
                                       baseline  (字的最下边对齐)
            */
			align-self:控制子元素自身的排列方式 用类选中									
            align-items: center;
        }

        div{
            width: 100px;
            height: 100px;
            /* background: green; */
        }

        .box div:nth-of-type(1){
            background-color: green;
        }
        .box div:nth-of-type(2){
            background-color: green;
        }
        .box div:nth-of-type(3){
            background-color: green;
        }
</style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>


`九宫格对齐`:
   <style>
        *{padding: 0;margin: 0;list-style: none;}
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
            /*flex换行*/
            flex-wrap: wrap;
        }
        .box li{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: pink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>

        /* 
            flex布局 == 弹性布局
            是ccs3里面推出的一种解决元素横向排列问题的方案
                传统的布局：使用浮动对元素进行横向的布局

                flex布局 - 主要就是解决浮动带来的问题的 —— 不脱标的
                移动端 - 通常都是使用flex进行布局

            用法： 
                1.给父元素 设置 display : flex;
                2.使用各种属性，让子元素按照我们想要的效果进行排列
         */

        /* 
            轴
                在flex布局里面，有两个轴
                    主轴 默认是x轴
                    侧轴 默认是y轴
                可以修改轴向，当一个轴被修改的时候，另一个轴默认会调换

                flex-direction 修改主轴的方向
         */

            /* 修改主轴的轴向 */
            /* flex-direction: row; 默认X轴*/
            /* flex-direction: column; Y轴*/ 
            /* flex-direction: row-reverse; 反转*/
            flex-direction: column;
            align-items: center;  /* 单行垂直居中对齐 */
            /* 控制子元素在主轴上的对齐方式 */
            /* justify-content: flex-start; 默认左对齐 */
            /* justify-content: center;居中对齐 */
            /* justify-content: flex-end; 右对齐*/
            /* justify-content: space-around; 平分对齐 */
            /* justify-content: space-between;两头对齐 */
            /* justify-content: space-evenly; 平分对齐*/

            /* flex布局默认是不会换行的，需要手动设置 */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;


            /* 管单行的 - 正常都是使用这个多*/
            /* align-items: flex-end; */
            /* align-items: center;  */
            
            /* flex-wrap: wrap; */
             /* 管多行的 */
            /* align-content: center; */

            /* 想要让子元素平分父元素的宽度 */
            flex: 1;
            /* 计算过程
                所有的子元素的flex的值相加就是总的份数
                每个子元素的flex占几分，最后就会算出它的宽度
             */

弹性布局实现圣杯布局

`左右两边固定,中间自适应`:
<style>
        .box{
            width: 80%;
            height: 200px;
            border: 1px solid #000;
            display: flex;  /*设置弹性布局*/
        }
        .box div{
              
            height: 200px;
        }
        .box div:nth-of-type(1){
            width: 200px;
            background-color: #fcf;
        }
        .box div:nth-of-type(2){
            flex:1;   /*左右两边固定，剩下的被这个盒子占满*/
            background-color: #ffc;
        }
        .box div:nth-of-type(3){
            width: 100px;
            background-color: #cff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

分蛋糕:  (每个div分别 宽度多少)
    <style>
        .box{
            width: 80%;
            height: 200px;
            border: 1px solid #000;
            display: flex;  /*设置弹性布局*/
        }
        .box div{
              
            height: 200px;
        }
        .box div:nth-of-type(1){
            flex:1;
            background-color: #fcf;
        }
        .box div:nth-of-type(2){
            flex:3;   /*分蛋糕 一共占了父盒子的3/5*/
            background-color: #ffc;
        }
        .box div:nth-of-type(3){
            flex:1;
            background-color: #cff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

%的使用

    <style>
        .box{
            width: 1000px;
            height: 400px;
            border: 1px solid #000;
        }
        .box div{
            width: 50%;   /*看父级盒子的宽度*/
            height: 50%;  /*看父级盒子的高度*/
            background-color: pink;
            /*padding-left:10%;  看父级盒子的宽度的10%*/
            padding-top:10%;   /*看父级盒子的宽度的10%*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
    </div>
</body>

vw和vh的使用

    <style>
        div{
            /* vw 宽口宽度    100vw表示100%窗口宽度 */
            /* vh 宽口高度    100vh表示100%窗口高度 */
            width: 50vw;	// 此时占屏幕一半
            height: 100vh;	// 占据屏幕全部高度
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>

em的使用

    <style>
        body{
            font-size: 30px;
        }
        div{

            /* em 一个em就是一个文字的大小 根据 font-size如果没设置:默认16px*/
            /* 20em = 20*font-size的大小 */
            width: 20em;	  // 20em*20 = 400宽
            height: 20em;	  // 20em*20 = 400高
            font-size: 20px;  // font-size: 20
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>

rem的使用

    <style>
        /* 
            rem  r表示root  根   根标签
            rem  是html标签的字体大小

            20rem = 20 * html标签的字体大小font-size
         */
        html{
            font-size: 20px;
        }
        div{
            width: 20rem;	  // 根据上面html根20来  20*20 = 400宽
            height: 20rem;	  // 根据上面html根20来  20*20 = 400高
            font-size: 16px;  // 不看
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>


`移动端中使用rem`:
1.
        原理：把屏幕大小平均分成10份，把一份的大小给到html标签作为字体大小

        请问： 一个屏幕宽度是多少rem？   10rem
        请问： 写一个占页面一半的盒子，宽度应该怎么写？？    width:5rem;


2.
    <!-- 问：(前提：把屏幕分成10份)在宽度为750的设计图下，一个元素的宽度是300px，在样式代码里写多少rem?
        width:300px;
        
        300px = ??rem

        ?? = 300/rem = 300/(750/10) = 4 rem

        width:300/75rem;


    问：(前提：把屏幕分成10份)在宽度为750的设计图下，一个元素的宽度是375px，在样式代码里写多少rem?
        width:375px  = ??rem


        width:375/75rem;


        height:62/75rem;

        border:1px solid #000; 

        padding:10px

        font-size: 

清除浮动

`第一种`:
	 overflow:hidden;

整个页面图片下载

f12;
Shift+Ctrl+p; 
打screen;  
找Capture full size screenshot;(可以用翻译看)

扒图网站:https://bazhan.me/

记单词

`输入框和按钮`:
'清除输入框黑色边框': outline:none	'隐藏密码': password

'日期':date						'只能输入号码':number

'内容': content

'点击搜索框取消外边框':outline:none

'禁止文本框':disabled			   '多选框':checkbox				 '搜索框':text
'下拉菜单':option--selected

'按钮':button						 '单选框':radio--默认选中checked
'点击效果':onclick					'弹出':alert					   '输出':write
'点击':onclick					 '鼠标双击':ondblclick			   '鼠标经过':onmouseover
								  '鼠标离开':onmouseout
                                  
'文字溢出隐藏':text-overflow: ellipsis;+单行显示:white-space: nowrap;+overflow: hidden;


`c3动画`:
'位移': translate     		   	'旋转': rotate  					'缩放': scale
'过渡': transition 	
'下拉菜单':select -- option
'无限次':infinite					'动画':keyframes
'动画结束之后':ontransitionend
'层级':zIndex

`盒子div`:
'清除浮动':clear					'两边':both

'实线': solid 			 	     '虚线': dashed
'在盒子前写东西': before		      '在盒子后写东西': after

'字体加粗': fone-iweight			'两端对齐':text-align:justify
'盒子内减': box-sizing:border-box	'行缩进': text-indent:em
'文字不换行成省略号':overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

'背景透明': opacity 0-1之间		   'cs3圆角': border-radius: %;
'背景图自适应':background-size: contain;

'没有a链接的小手样式':cursor pointer	  '指针变小手'：cursor：pointer
'取消外发光'：outline：none			'禁止任意拖放'：resize：none
'盒子里文字水平居中': text-align:center

'在以后权重不够的时候比如改字体':100px后面加一个!important就是最大的意思
'鼠标经过图片又阴影的效果': img:hover{ box-shadow: 0px 0px 0px 0px 颜色;}

'图片和文字在同一行': display:inline-block;
				  vertical-align:middle;
`定位`:
'相对定位':position:relative	 '绝对定位':position:absolute   	'固定定  位':position:fixed



`表格`:
'表格': table						 '表格边距':cellpadding			'表格间距': cellspacing
'表格背景(颜色或图片)': bgcolor


`背景颜色透明简化`:background:rgba( , , ,0-1之间透明度);
`背景图居中对齐`:vertical-align:middle

`特俗符号`:
'版权':&copy						 '空格':&nbsp--2个等于1个




`一·Html单词`

DOCTYPE    文档；					html    网页；						head  头；
title   题目；						paragraph   段落；					body   主体；



`二.css单词`
color  颜色；style  样式；			background  背景；				ralative 相对的； 

absolute  绝对的；					 font-style  字体样式；			font-family  字形；

font-weight 字体粗细； 				font  字体；			background-position背景位置；

background-size  背景大小；			background-repeat  背景平铺；

width  宽度；						 height  高度；				  line-height  行高；

float  浮动；						 overflow  超出；				  text-align  文本对齐；

vertical-align  垂直对齐；			text-indent  文本缩进；		text-decoration  文本修饰；

border  边框；						 border -color边框颜色；			border -style 边框样式；

border -width  边框粗细；			contect  内容；

margin  外边距；					margin-top  上边距；			margin-left  左边距；

margin-right  右边距；				margin-bottom  下边距；			padding  内边距；

padding-top  上内边距；			   padding-left  左内边距；		  padding-right  右内边距；

padding-under  下内边距；			outline  外线；


`三。属性词`
color  颜色；						url  路径；					normal  正常；

left  左；						right  右；				 	 center  居中；

top  上；							bottom  底部；					 hidden  隐藏；

scroll  滚动条；					solid  实线；					dashed  虚线；

bold  加粗；						overline  上划线；				underline  下划线；

middle  居中；						no-repeat  不平铺；				none  空；


`四.拓展单词`
src  路径；						  name 名字；

rowspan  上下合并；					 colspan  左右合并；

cellpadding  单元格内边距；			cellspacing  单元格边距；

ul  无序列表；						ol  有序列表；					li  自定义列表；

list-style  列表样式；				disc  实心圆；					 circle  空心圆；

square  正方形；