锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

前端学习笔记

时间：2023-02-06 21:30:00 16zs矩形连接器3204tj圆形连接器2004tj1l圆形电连接器

html5新特性

1.语义标签

常用语义标签： 
头部 导航栏 
区块(语义化div） 
主要区域 主要内容 侧边栏 
底部  ... 这些标签可以在页面上多次使用  Video（视频） Audio（音频） 使用它们可以很方便的在页面中嵌入音频和视频，不用用flash以及其他浏览器插件

2.增强表/表2.0

1.新的input type

2.新的表单元素


    {
    行 cols 列 rows
	框内提示文字 placeholder
    }

表格


	{
	宽（width）
	对齐方式 align (left center right)
	表格边框宽度 （border）
	单元边沿与其内容之间的空白 (cellpadding)
	单元格之间的空白 (cellspacing)
	合并单元格 （跨行合并：rowspan="合并单元格个的个数"
            	跨列合并：colspan="合并单元格个的个数" ）
	外侧边框的哪个部分是可见的(void、above、below、hsides...)
	内侧边框的哪个部分是可见的(none、groups、rows、cols、all)
	表格的摘要（summary）
	}
标签
1.块级标签 块级元素 ：独占一行 默认宽度100% 可以设置宽高
	块级元素：
-
、p、div、ul、ol、li...	
     	宽度默认100%；默认独占一行；可以直接设置  宽  高  边距   填充

2.行内标签 行内元素 ：并排显示 默认宽度是内容宽度 不可以直接设置宽高
	行内元素：a,strong,b,em,i,del,s,ins,u,span...
    	宽度自动；默认并排显示，不能直接设置  宽   高   边距   填充
        
3.行内块元素 ：可以设置宽高 并排显示
	行内块元素：img、input
    	宽度自动；默认并排显示，可以直接设置  宽  高  边距   填充，自带2-3像素的边距
    
    
    
三种转换：
            元素->行内：  style=" display:inline; "
            元素->块：    style=" display:block; "
            元素->行内块: style=" display:inline-block; "
背景图（css 中）
background: slateblue;			设置背景色
background-image: url("./images/sgwe.jpg");			设置背景图片
background-repeat: no-repeat;			设置图片不重复
background-position:  ;			水平方向 垂直方向
background-position-x:  ; 			设置水平位置
background-position-y:  ; 			设置竖直位置
background-position:  10px 100px;		如下
background-position: x y;		没写哪个哪个就是默认全局居中
background-position: center top;		设置位置在头部的中间
background-attachment: fixed;		设置背景图片附着（固定）
background-size: cover;			平铺在整个容器中	auto 图片本身大小
border: 1px solid #000;			设置边框 粗细     实线/虚线（solid/dashed）     颜色
border-radius: 50%;			设置边框圆角 （单位 px或% 都行）
box-shadow:inset 5px 5px 5px green;			设置元素阴影 内阴影inset 不写就是外阴影 （三个值：横向位置 纵向位置 虚化）
Background-size:100%  100%;					背景图一个百分之百占比
transparent   透明色


例：将一个P标签做成一个球

    


    





			background-image: url("./images/sgwe.jpg");
            /* 设置背景图片 */
            background-repeat: no-repeat;
            /* 设置背景图片平铺 */
            /* background-position:50 ;    水平方向 垂直方向 */
            /* background-position: center top;  */
            /* 在头部的中间 */
            /* background-position:  10px 100px; */
            /* background-position: x y;没写哪个哪个就是默认全局居中 */
            /* 设置背景图片位置 */
            background-attachment: fixed;
            /* 设置背景图片附着 */
            /* background: slateblue url("./images/sgwe.jpg") no-repeat fixed 250px 0;  */
            background-size: cover; 
            /* 设置背景图片尺寸 需要单独写出来*/


			object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
			可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
			contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
			cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
			fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
			none：被替换的内容将保持其原有的尺寸。
			scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
			
			vertical-align: middle;
导航栏
​
nav 标签为导航栏标签
​
导航栏内用ul il 写
复制付费文本
方法1：F12 F1 设置禁用JS
方法2：F12 元素 事件帧监听 删除复制事件
方法3：找到HTML中存放内容的段落，找到父级，添加一个id或者class，然后在控制台打印console.log(document.getElementById('自建ID').innerText)
CSS
选择器
1.类选择器
	在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
	例1	.center {
  				text-align: center;
  				color: red;
				}
	例2	
		
		
		
			
这个标题不受影响

			
本段将是红色并居中对齐。

			
本段将是红色、居中对齐，并使用大字体。
 
		
2.标签选择器
	页面上的所有 
 标签都将居中对齐，并带有红色文本颜色：
        p {
  			text-align: center;
  			color: red;
		  }
3.id选择器（注意：id名称不能以数字开头）
      这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
        #para1 {
  				text-align: center;
  				color: red;
				}
4.通配符选择器
     下面的 CSS 规则会影响页面上的每个 HTML 元素：
        * {
  			text-align: center;
  			color: blue;
		  }
 5.分组选择器
        分组选择器选取所有具有相同样式定义的 HTML 元素
        例3 
		
		
		
		
			
			
本段将是红色
 
		
 6.后代选择器（包含选择器）
        用来选择元素或元素组的后代，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套的时候，内层标签就成为外层标签的后代；
        
        
        
			

        	 
aaaaaaa
                    (红)
        		

            		
bbbbbbb
             (红)
            			

                			
fffffff
	  (红)
 	      		       	 

       		     

       		 
bbbbbbb
                    (红)
       		 
ccccccc
				     (红)
    

7.子元素选择器
        只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子集标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格；
        
        
        
       

        
aaaaaaa

        

            
bbbbbbb
     （红色）
            

                
fffffff

            

        

        
bbbbbbb

        
ccccccc

    

8.:after 选择器
	:after 选择器向选定元素的最后子元素后面插入内容，使用content 属性来指定要插入的内容
	 							/*在每个p标签后都会添加一个   - 注意我   */
	
	
		
我的名字是 Donald

		
我住在 Ducksburg

		
注意： :after在IE8中运行，必须声明 !DOCTYPE 

	
9.属性选择器
*[title] {color:red;}      /*所有包含title属性的元素为红色*/
a[href] {color:red;}		/*有herf属性的a标签颜色为红色*/
a[href][title] {color:red;}    /*同时有herf 和 title属性的a 标签为红色*/
*[type|="wer"] {color: blue;}	/*type属性值为wer的标签会被选择*/
{
color: red;
}


为 XML 文档使用属性选择器

a[href="#"] {color: red;}		/*根据属性值选择*/
a[href="#"][title="W3School"] {color: red;}		/*与上类似*/

p[class="i w"]						/*类为i w 的P标签才会被选择*/
{
color: red;
}

p[class~="i"]						/*类中有i 的 p 标签就会被选择*/
{
color: red;
}
伪类选择器
			伪元素为行内元素，可以转换为其他类型元素。
伪类选择器： 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素。
            伪类选择器书写最大的特点是用冒号(:)表示

	1.链接伪类选择器：
            :link      选择所有未被访问的链接
            :visited   选择所有已被访问的链接
            :hover     选择鼠标指针位于其上的链接
            :active    选择活动链接(鼠标按下未弹起的链接)

	:hover 只能父级控制子级  ，若是兄弟级控制兄弟级， 写法： #a1:hover~#a2{}（注意hover后波浪线）		注意，hover效果 可以用display:none写，可以用overflow:fiddenxie写 不能用opacity：0      :hover 前不能有空格！！！

	例1：
	
    	
	
	
     	   好好学习
	
	

	2.focus伪类选择器用于选取获取焦点的表单元素，焦点就是光标 （仅用于文本框中，有聚焦作用）
	例2：
	
    	
	
	
    	     (outline:none;  外部边框为空)
	

	3.  .p::after{}		.p::before{}		在元素后/前添加元素  元素内容为   content:"";

4.结构伪类选择器
	p:first-child{}	匹配元素中的第一个元素（选择器选中的是父元素中的子元素）E:last-child 匹配元素中的最后一个元素


	E:nth-child（n） 匹配元素中的第n个元素，这个n可以是数字也可以是公式也可以是关键字  公式：
2n ：求偶数
2n+1：奇数
5n：5的倍数  5-10-15-20-25
n+5 ：从第5个开始
-n+5：前5个
关键字：只有odd 和 even 两个关键字（奇数偶数）




优先级
优先级：!important	>	行内样式	>	内链样式	>	外部引入       ( ！important 可直接添加在css样式中 )
	后代选择器 > 子类选择器； 为同种选择器时，哪个的描述多哪个优先级高。
	id 相当于身份证号； class 相当于小名。
样式 / 属性
引入css样式的三种类型：行内样式、内嵌样式（利用选择器）、外部引入。

外部引入的CSS：新建css文件，在html文件中标签中添加标签。在  href=""  中添加css文件路径。
1.字体
	color: aquamarine;
            /* 字体颜色 */
	background-color: #d5d5d5;
            /* 背景色 */
	font-size: 20px;				因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
            /* 字体大小 */
    font-weight：
    		定义字体粗细：normal
							正常粗细。与400等值。
						bold
							 加粗。 与700等值。
						lighter
							比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
						bolder
							比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

    ②font-family：   
    		定义字体
	margin: 10px 20px 30px 40px;
            /* 外边距 (顺时针为 上右下左) */
	padding: 20px;
            /* 内边距 */
	font-family: "楷体";
            /* 字体样式 */
	font-style: italic;
            /* 字体倾斜 */
	font-weight: bold;
            /* 字体粗细 */
	text-align: center;
            /* 字体对齐方式 */               文字居中对齐
	text-decoration: underline;
            /* 字体下划线 */
	text-indent: 2em;
            /* 首行缩进 */
	letter-spacing: 10px;
            /* 设置字间距 */
	line-height: 60px;
            /* 设置行高 */
	text-shadow: 30px 30px 30px blue;
            /* 设置文本阴影：水平方向偏移量，垂直方向偏移量，阴影面积，阴影颜色 */
 line-height: 50px ;								***其他元素使用频率也很高
		/*设置行高*/
border-radius;
		改边框厚度 改边框圆滑
background：transparent;
		文本框透明
placeholder：
		占位提示文字
margin: 100px auto;
		/*强制文字在一行文本框内*/
word-wrap:break-word;   //文字溢出换行
2.div
border: 10px solid black; 		
            /* 虚线：dotted dashed  */
            /* 边框：宽度 实线 颜色  */
cursor:pointer	//鼠标移上变手
3.a
target:				（不是css属性，直接写在a标签内）
	_blank
	_parent
	_self
	_top
	framename
	规定在何处打开链接

cursor:pointer	//鼠标移上变手

a:link，定义正常链接的样式
a:visited，定义已访问过链接的样式
a:hover，定义鼠标悬浮在链接上时的样式
a:active，定义鼠标点击链接时的样式

注意：
	在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
	在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。


text-decoration​ 属性是用来设置 a 标签的划线属性的。其属性值有：
	none：去掉下划线
	underline：设置下划线
	overline：在文本上方设置线条
	line-through：在文本中间设置线条
	initial：默认值
	inherit：从父元素中继承
4.列表样式
list-style-type 属性的常见属性值的描述：

none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
decimal：阿拉伯数字 
lower-alpha：小写英文字母 
upper-alpha：大写英文字母 
lower-roman：小写罗马数字 
upper-roman：大写罗马数字
其他
display:none;            
		/*隐藏该区域*/
opacity: 0;				（调整透明度）
		/*隐藏该区域（值为0.透明度为0；值为1，透明度为100%）*/
background-color: rgba(255, 248, 220, 0.4);
		/*调整颜色透明度  （r,g,b,a） a值为透明度 */

z-index:;    
		调整元素显示优先级，必须配合定位使用

box-sizing: border-box;
		盒子大小等于你设置的大小
border-radius: 5px;  / 5%;
		设置边框圆角
background:linear-gradient（red, green, blue）；
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
		背景渐变
Background-size:100%  100%;
		背景图一个百分之百占比

  给标签前添加logo

盒子突起效果：
box-shadow:inset 0px 0px 10px black;
立体效果：
box-shadow:5px 5px 30px 10px black;

cursor:pointer	//鼠标移上变手

 position: absolute;
            top:50%;
            left:50%; 
            transform: translate(-50%,-50%);
        	/*将页面移到中央*/

button   disabled = true   按钮不可按      按钮属性，不是css
transparent  透明色
list-style:none; 去除无序列表的符号


	object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
			可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
			contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
			cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
			fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
			none：被替换的内容将保持其原有的尺寸。
			scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
居中显示
 1.整体居中				（建议使用）
.d2{
   width: 300px;
   height: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   
   transform: translate(-50%,-50%);
  } 
2.整体居中显示		（不建议使用）
.d2{
   width: 200px;
   height: 200px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}
3.设置行内居中：
	（1）.设置行高lint-height:;为父容器高度，行内自动垂直居中
	（2）.padding、margin
	（3）.定位
	（4）.position: absolute;  top:0;	bottom:0;
4.flex布局


5.vertical-align 属性设置元素的垂直对齐方式

	baseline	默认。元素放置在父元素的基线上。
	sub	垂直对齐文本的下标。
	super	垂直对齐文本的上标
	top	把元素的顶端与行中最高元素的顶端对齐
	text-top	把元素的顶端与父元素字体的顶端对齐
	middle	把此元素放置在父元素的中部。
	bottom	把元素的顶端与行中最低的元素的顶端对齐。
	text-bottom	把元素的底端与父元素字体的底端对齐。
	%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
	inherit	规定应该从父元素继承 vertical-align 属性的值。
盒模型
设置盒模型的margin等属性时
	值若唯一x，则上下左右均为x;
	值若为二x，y，则上下为x，左右为y；
	值若为三，x，y,z, 则上为x，左右为y，下为z；
     
注意：在已设置宽高的盒模型中添加内外边距后，盒模型会变大，但是可用空间还是原来的宽高；
	在已添加内外边距盒模型的css中添加box-sizing: border-box；时将强制把盒模型的大小变回原本设置的宽高，盒模型中可用空间将被缩小；

iconfont
三种方法 （以字体的方式调整）
1.中用导入css文件 ； 将代码复制在标签中（ ，可以再对i标签进行修饰）
2.
浮动
可以让块级元素并排显示，浮动不会影响前面的元素 float:left;
	高度坍塌：（父元素高度为0）
            正常文档流的父元素，里面的所有子元素都为浮动元素的时候，父元素的高度不会被子元素所撑开
清除浮动：
            1.父元素设置死高  /* 不建议使用 */ 
            2.父元素设置溢出隐藏(没有溢出元素) 内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
				/* 不建议使用 */ 
            3.在父元素的结束标签前面添加一个空的块级元素，设置clear: both;属性，本质就是闭合浮动， 就是让父盒子闭合出口和				入口，不让子盒子出来
            4.父元素类名:💖::after{
                     display:block;
                     clear: both;
                     content:"";
                     }  💖                                      /* 清除浮动 */
	clear 属性：
		left;  在左侧不允许浮动元素。
		right;  在右侧不允许浮动元素。
		both;  左右两侧都不允许浮动。
		none;  默认值。允许浮动出现在两侧。
		inherit;  规定应该从父元素中继承clear属性值。
	
浮动元素超过父盒子宽度就会自动换行
边距重合
边距重合：
        正常文档流的父元素里面的两个子元素在垂直方向相遇，上面的设置下边距，下面的设置上边距，两个中间的边距不会相加，只会			取最大值。
        具体的叠加规则是：正正取大值、正负值相加、负负最负值
        解决方法：直接给margin-bottom与margin-top其中一个元素两者之和
边距传递
边距传递：
        正常文档流的父元素里面的第一个子元素设置上边距时，这个上边距会传递给父级元素。
        解决方法：
        1、用父元素padding代替子元素margin            /* 不推荐使用*/
        2、父元素透明边框 border:1px solid transparent;		/*不推荐使用*/
*       3、子元素绝对定位 postion:absolute;
        4、父元素 overflow:hidden;				(溢出隐藏)	/* 可以使用 */
        5、父或子元素加 float:left;
        6、父或子元素加 display:inline-block;				/*不推荐使用*/
		 7、在盒子内添加一个空的伪元素做盒内第一个元素
			.bx::before{
				content:'';
				width:100%;
				height:1px;					/*设置高度为1px*/
				margin-bottom:-1px;			/*设置底外边框为 -1px 与高度抵消*/
				display:block;
				}
溢出隐藏
overflow属性规定当内容溢出元素框时发生的事情，有四个参数：
		overflow: visible;  内容不会被修剪，会呈现在元素框之外，这是默认值。
		overflow: hidden;  内容会被修剪，但是浏览器不会显示供查看的滚动条。
		overflow: scroll;  内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
		overflow: auto;   	自动。由浏览器决定如何显示，如超出则会显示滚动条。

		
		overflow-y: scroll;   设置仅在y轴的超出滚动条。


overflow: hidden;
            /* 文字溢出隐藏 */
white-space: nowrap;
            /* 不换行，内容在一行显示 */
text-overflow: ellipsis;           /*！！！需要搭配overflow:hiddenl;使用*/
            /* 溢出文字为省略号 */
word-wrap:break-word;   //文字溢出换行
定位 Position
定位=定位模式 + 边偏移
position 属性指定了元素的定位类型：static； relative（相对定位） fixed（固定定位）； absolute（绝对定位）； sticky（粘性									定位）	
	static 定位  			静态定位的元素不会受到 top, bottom, left, right影响
	
	fixed（固定定位）		 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动：
							注意：   Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
									Fixed定位使元素的位置与文档流无关，因此不占据空间。
									Fixed定位的元素和其他元素重叠.
									
	relative 相对定位		他是相对于自己原来的位置来移动的,移动相对定位元素，但💖它原本所占的空间不会改变💖
						例1：div
							{
								position:relative;      /*在原来位置的基础上下移左移了30px*/
								left:30px;
								top:30px;
							}
	
	absolute 绝对定位		子绝父相：如果子级使用绝对定位，父级则需要相对定位。
            				1、自己绝对定位，💖不会占有位置💖，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒								子，会和其他盒子重叠。
            				2、父盒子需要加定位限制子盒子在父盒子内显示。
            				3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。
	
	sticky 粘贴定位			定位表现为在跨越特定阈值前为相对定位，之后为固定定位.特定阈值指的是 top, right, bottom 或 							left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生								效。否则其行为与相对定位相同	
	
	
	
将盒子固定在版心右侧位置。
            1、让固定定位的盒子left:50%,走到浏览器可视区(相当于版心)的一版位置。
            2、让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一般位置。
            
            
定位的叠放次序：z-index
            在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
            z-index:1;
            1、数值可以是正整数、负整数或是0，默认是auto，数值越大，盒子越靠上
            2、如果属性值相同，则按照书写顺序，后来者居上。
            3、数字后面不能加单位。
            4、只有定位的盒子才有z-index属性
            
           
   拓展：
            定位特殊性：绝对定位和固定定位也和浮动类似
            1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
            2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
            3、浮动元素，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位(固定定位)会压住下面标准流所有内容。
            

            span的字会跟在div后面
            原因：浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
            
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域
			visible	不裁剪内容，可能会显示在内容框之外。
			hidden	裁剪内容 - 不提供滚动机制。
			scroll	裁剪内容 - 提供滚动机制。
			auto	如果溢出框，则应该提供滚动机制。
			no-display	如果内容不适合内容框，则删除整个框。
			no-content	如果内容不适合内容框，则隐藏整个内容。
二级导航
在导航栏设置无序列表，在每一行设置二级列表。一般状态二级导航为display: none;（隐藏内容）。设置一级导航的hover属性；当鼠标经过时取消隐藏。

控制鼠标经过的hove加在一级导航的div中。hover后跟要控制的元素  例：
.div1:hover ul{						/*鼠标经过.div1元素时，控制的元素是ul*/
            display: block;
        }
2D
旋转 transform: rotate（*deg）；

倾斜 transform: skew（）；		skewX   /   skewY

平移 transform:translate（）；			X   /   Y

缩放 transform: scale（）；			X,Y

平滑过渡 transition: 1s;  //全部平滑过渡   transition: all 1s;
						//若要单个控制平滑   transition: width 1s;   (单独控制宽度的平滑时间)





 position: absolute;
            top:50%;
            left:50%; 
            transform: translate(-50%,-50%);
        	/*将页面移到中央*/
        	
动画
添加动画：1.			@keyframes 动画名 {
						from{}
						to{}
					}
2.                    @keyframes 动画名 {
						0%{
						}
						50%{
						}
						100%{
						}
					}
绑定动画：		animation: 动画名  动画持续时间  延迟多少时间播放  动画重复次数（infinite持续播放）（linear匀速播放）  动画结束位置（forwards留在原位）;
animation-name: example;			动画名
  animation-duration: 5s;			动画时间
  animation-timing-function: linear;		规定速度曲线（linear匀速 ease慢块慢 ease-in慢速开始 ease-out慢速结束 											ease-in-out慢速开始和结束  cubic-bezier(n,n,n,n)0 到 1 的数值）
  animation-delay: 2s;				动画延迟
  animation-iteration-count: infinite;		播放次数（持续播放 infinite；）
  animation-direction: alternate;		向前播放、向后播放还是交替播放





注意：使用移动动画的元素必须添加相对定位
	动画延迟可以为负值，动画则为从已播放的 N 秒开始

fiex布局
注意，设为 Flex 布局以后，子元素的float、clear 等属性将失效。
	容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
	主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
	项目默认沿主轴排列。单个项目占据的主轴空间叫做main size(项目宽度)，占据的交叉轴空间叫做cross size（项目高度）



弹性盒子内一般不设置死的宽高（突出弹性的特点）
子元素设置flex:1;即可铺满盒子     （若不给死宽高使用比例，则需要没有死宽高的子元素都设置比例）
设置在父盒子的属性
以下6个属性设置在父容器上。
*	flex-direction ：主轴方向
*	flex-wrap ：是否换行，怎么换行
*	flex-flow ：flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
*	justify-content： 属性定义了项目在主轴上（X）的对齐方式。
*	align-items：属性定义项目在交叉轴上（Y）如何对齐。
*	align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


*flex-direction属性值
	row（默认值）：(X)主轴为水平方向，起点在左端。
	row-reverse：(X)主轴为水平方向，起点在右端。
	column：(Y)主轴为垂直方向，起点在上沿。
	column-reverse：(Y)主轴为垂直方向，起点在下沿。

*flex-wrap属性值
	nowrap（默认）：不换行。（项目总宽度如果超出盒子宽度，项目宽度会被挤压【不会超出盒子】）
	wrap：换行，第一行在上方。
	wrap-reverse：换行，第一行在下方。

*flex-flow属性
	flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为 nowrap
	flex-flow:flex-direction flex-warp;

*justify-content属性
justify-content属性定义了项目在主轴上（X轴）的对齐方式
	flex-start（默认值）：左对齐
	flex-end：右对齐
	center： 居中
	space-between：两端对齐，项目之间的间隔都相等。
	space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(项目之间的间隔为左右两个项目间隔之和)
	space-evenly 间隔相等

*align-items属性
align-items属性定义项目在交叉轴上（Y轴）如何对齐
	flex-start：交叉轴的起点对齐。（上端对齐）
	flex-end：交叉轴的终点对齐。（下端对齐）
	center：交叉轴的中点对齐。（上下居中）
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

*align- content属性
align- content属性定义了行的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性中的六个属性值与justify-content中的六个属性意思相似，不同之处在于justify-content沿主轴方向的作用于单个子元素，而align-content沿交叉轴方向作用于行。
	flex-start：与交叉轴的起点对齐。（所有项目上对齐）
	flex-end：与交叉轴的终点对齐。（所有项目下对齐）
	center：与交叉轴的中点对齐。（所有项目上下居中，上下项目间没间隔）
	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。（所有项目上下排满，项目间有间隔，项目间间隔为两个单项目间隔）
	space-around：每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。（）
	stretch（默认值）：轴线占满整个交叉轴。（项目若没设高则会拉长占满）

设置在项目上的属性（子元素上）
*	order : 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
*	flex-grow: 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
*	flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
*	flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
*	flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
*	align-selff:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

*order属性 
	属性值一般为number类型也可以是initial（默认值），inherit（从父元素继承的值）为设置弹性盒对象元素的顺序：数字越小越靠前。取值0.1.2...

*flex-grow属性
	如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

*flex-shrink属性
	属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

 *flex-basis属性
	定义了在分配多余空间之前，项目占据的主轴空间（main size）相当于宽度，优先级大于自身设定的宽度。

* flex属性
	是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
	flex:1；0占有空间   ，1缩放比例，100px固定值
	这个0 1 auto是什么意思，
flex-grow：表示当子元素的空间小于父元素的空间时,如何处理剩余空间,默认值为0表示不占有剩余空间;
felx-shrink：表示当子元素的空间大于父元素的空间时,如何缩小子元素，默认值为1表示等比缩小
flex-basis ：用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值

*align-self属性
	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性（优先级高）。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

移动端布局（响应式）
*	视口：视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为视觉视口,布局视口和理想视口
*	布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。（当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容）
*	视觉视口：用户正在看到的网站区域。可以通过缩放操作视觉视口。但不会影响布局视口，布局视口依然保持原来的宽度。
*	理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。


meat视口标签

name=“viewport”:意为视口标签
Content:里边包裹的若干属性
	标准的写法:
	width：视口的宽度可以，设置特殊值device-width宽度是设备的宽度
	initial-scale：初始化缩放倍数 一般是大于0数字
	user-scalable：是否允许用户自行缩放，取值0或1，yes或no
	maximum-scale：最大缩放(一般是大于0数字)允许放大的倍数
	minimum-scale：最小缩放(一般是大于0数字)允许缩小的最大倍数

二倍图
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。 这是厂商在出场时就设置好了(也就是我们的分辨率)，
我们开发时候的1px不一定等于一个物理像素
PC端页面 1个px等于一个物理像素 但是移动端就不一样
一个px能显示的物理像素点的个数 称为物理像素比或屏幕像素比
对于一张 50px * 50px 的图片，在手机Retina(视网膜)屏中打开 按照原本的物理像素比会放大倍速 这样会造成图片模糊在标准的viewport设置中 使用倍图来提高图片质量 解决在高清设备中的模糊问题一般都是使用二倍图 ，但因为手机屏幕的影响 现在还存在三倍四倍图的情况背景图片注意缩放

移动端开发的选择
1.单独制作移动端页面（主流）
	流式布局（也就是百分比布局）
	Flex布局（推荐）
	rem适配布局
	混合布局（我们日常的布局方式就叫混合布局）

rem单位 rem(root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对与html元素的字体大小。比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则会换成px表示就是24px。优势：可以通过修改html里面的文字大小来改变页面中元素大小，可以整体控制。rem是html与单个元素的比例单位，em是父元素与子元素的比例单位。

*	rem的适配方案
<1>.媒体查询+rem方案
<2>.rem.js+rem

（媒体查询限制CSS样式的范围，以便于在满足某些媒体条件时才适用。简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
）
*	它都有那些媒体类型
	All（所有设备）
	Print（打印设备）
	Screen（电脑，笔记本，手机等设备）
*	它都有那些媒体特性
	width 网页显示区域完全等于设置的宽度
	height 网页显示区域完全等于设置的高度
	max-width / max-height 网页显示区域小于等于设置的宽度
	min-width / min-width 网页显示区域大于等于设置的宽度
	orientation: portrait (竖屏模式) | landscape (横屏模式)

*    语法关键字，将媒体特性与媒体类型链接到一块进行设备检测
	and 可以将多个媒体特性链接到一块,相当于且
	not 排除某个媒体特性 相当于非,可以省略
	only 指定某个特定的媒体类型, 可以省略

    
*	媒体查询有两种语法
    外联语法:
	内嵌式语法:
    @media screen and (min-width:320px){
		html{
			font-size: 21.33px;
		}
	}

*	外联语法：




*	内嵌语法：
    @media screen and (min-width:320px){
		body {
			background：#000；			
		}
	}
	@media screen and (min-width:750px){
		body{
			background：#f99;			
		}
	}

    
    

2制作响应式页面兼容移动端（其次）
	就是通过媒体查询  限制屏幕的宽度 然后根据不同的宽度写不同的代码
移动端PC端转换
 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i))) { 
    // window.location.href = ""; //手机 
    } else {
      window.location.href = ""; //电脑 
    }

/*pc 移动都添加到scipt标签中(位置在body下面)*/


// 摘要：控制不同尺寸屏幕上的rem基准单位
    // 以iPhone6位基准 375px 最大适配750px 屏幕
    var maxAdaptation = 750
    document.addEventListener('DOMContentLoaded', function () {
      var deviceWidth = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
      document.documentElement.style.fontSize = (deviceWidth / 15) + 'px'
      var funID
      window.onresize = function () {
        clearTimeout(funID)
        funID = setTimeout(function () {
          var deviceW = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
          document.documentElement.style.fontSize = (deviceW / 15) + 'px'
        }, 500)
      }
    }, false)



/*只添加在移动端*/
添加下划线的方法
1.元素名::after{
	content:'';
	height:2px;
	background-color:black;
	display:block;
}
2.div{
	border-bottom:宽度 样式 颜色；
}
以下属性使用时必须配合定位
使用动画时配合相对定位
z-index;调整显示优先级时必须使用定位
JS
JS基本知识
一个完整的javascript实现应该有三个部分构成:ECMAScript、DOM、BOM
javascript特点：1.解释型语言（不进行编译，不用转换成二进制的计算机语言）2.动态型语言（是一类在运行时可以改变其结构的语言）
JS能够做什么：
	能改变页面中的所有 HTML 元素
	能改变页面中的所有 HTML 属性
	能改变页面中的所有 CSS 样式
	能删除已有的 HTML 元素和属性
	能添加新的 HTML 元素和属性
	能对页面中所有已有的 HTML 事件作出反应
	能在页面中创建新的 HTML 事件
JS外部引入
1、引入
2、脚本可被放置与 HTML 页面的  或  部分中，或兼而有之。
3、把脚本置于  元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

变量
声明变量： var name ;
	var 是一个js关键字，用来声明变量的，使用var关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
JS输出方式
Js的输出方式：
alert（msg）：弹出框
console.log(msg)：打印日志（consol方法不止一个）
prompt(msg):输入框    注意：输入类型为字符串  
	例：输入班级人数与每个人分数求和
var a = prompt('请输入班级总人数')
var sum = 0
for(var i = 1;i<=a;i++){
    var b = Number( prompt ('请输入第' + i + '位同学的分数'))//进行强制类型转换将输入的字符串转换为Number
    sum = sum + b
}
console.log(sum) 
基本数据类型
JS 把数据类型分为两类： 
简单数据类型 （Number  String  Boolean  Undefined  Null）
  
复杂数据类型 （数组、object、function...)//数组属于object（对象）

三种对象类型：
对象（Object）\ 日期(Date)\ 数组（Array）

	* Number 数字型，包含整型和浮点型值	默认值：0
	* Boolean	布尔值类型，true\false	等价于1\0
	* String	字符串类型	注意：在JS中，字符串都带有引号
	* Undefined		声明变量但是没有给变量赋值，此时 变量=undefined
	* Null	声明变量为空值

简单数据类型
	数字型范围：
	* 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 
	* 最小值：Number.MIN_VALUE，这个值为：5e-324

三个特殊值：
	* Infinity ，代表无穷大，大于任何数值  
	* -Infinity ，代表无穷小，小于任何数值 
	* NaN ，Not a number，是计算机科学中数值数据类型的一类值，表示未定义或不可表示的值。常在浮点数运算中出现


字符串型 String
	var a = '我是帅哥'
	var a = "我是帅哥"
	注意：因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)不能单双引号搭配


Undefined
	声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
	例：
	var a;
	console.log(a); // undefined 
	console.log('你好' + a); // 你好undefined 
	console.log(11 + a); // NaN
	NaN console.log(true + a); // NaN

null
	一个声明变量给 null 值，里面存的值为空
	例:
	var q = null; 
	console.log('你好' + q); // 你好null 
	console.log(11 + q); // 11 
	console.log(true + q); // 1







转义符：
	\n	换行
	\	代码中换行使用（在行尾添加）
	\'	单引号
	\"	双引号
	\t	tab缩进
	\b	空格

字符串长度
	通过字符串的 .length 属性

            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
          
相关文章