前端开发技巧与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Always_on_line_/article/details/81041462

以下是本人学习前端的一些笔记，分享出来供自己也供有需要的人学习，可能有不正确的地方，欢迎指正。（不定期更新）

1、vscode用Ctrl+shift+~打开控制台

2、运行vue项目

npm install
npm run dev

3、git上传文件顺序：commit -> pull(merge) -> push
merge合并分支
switch/checkout切换分支
切记：开发的时候切换到自己的分支

4、移动端触摸滑动插件Swiper

swiper4:

<script> 
var mySwiper = new Swiper('.swiper-container',{

  //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay,操作包括触碰，
  //拖动，点击pagination等。
  autoplay: {
    disableOnInteraction: false,
  },

  //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
  direction : 'vertical',   
})
</script>

5、如果用position来布局页面，父级元素的position属性必须为relative，
而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素
的padding的属性影响，当然你也可以用position，不过到时候计算的时候
不要忘记padding的值。

6、cd ../返回上一级

7、server:服务器
使用koa-generator生成koa2项目
    1、npm install -g koa-generator （全局安装）
    2、koa2 koa_demo （koa_demo为“项目名称”，即：项目文件夹）
    3、安装koa2依赖，命令：cd koa_demo && npm install
    4、npm start 启动项目，打开浏览器 http://localhost:3000/ 就能看到页面了

8、scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

9、scope作用域

10、HBuilder代码缩进：选择多行,tab键向右移动,shift+tab键向左

11、overflow 属性规定当内容溢出元素框时发生的事情。
    visible 默认值。内容不会被修剪，会呈现在元素框之外。
      hidden 内容会被修剪，并且其余内容是不可见的。
      scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
      auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
      inherit 规定应该从父元素继承 overflow 属性的值。

12、z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）

13、cursor: pointer;光标呈现为指示链接的指针（一只手）

14、animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）

15、block，inline和inlinke-block细节对比
display:block
　　　　1.block元素会独占一行，多个block元素回去各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
　　　　2.block元素可以设置width，height属性。块级元素即使设置了宽度，仍然是独占一行。
　　　　3.block元素可以设置margin和pading属性。
display:inline
　　　　1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，知道一行排列不下，才会新一行，其宽度随元素的内容而变化。
　　　　2.inline元素设置width和height属性无效。
　　　　3.inline元素的 margin和padding属性，水平方向的 padding-left，padding-right，margin-left，margin-right都会产生边距效果，但竖直方向　　的的padding-top，padding-bottom，margin-top和margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

16、一行几个元素设置float，用margin来控制位置，父元素用overflow:hidden清除浮动

17、左右两栏固定宽度，中间部分自适应

1、圣杯布局

<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

html代码中 middle部分首先要放在container的最前部分，然后是left,right。

1、设置基本样式：

left（width:200px）,right(width:300px)。

为了高度保持一致给left main right都加上min-height:200px。

2、圣杯布局是一种相对布局，首先设置父元素container的位置

padding:0 300px 0 200px；会在main的左右两边留白；

3、将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）

4、middle部分 width:100%占满

5、此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%；把right拉到最右边，用margin-right:-300px;

6、最后一步，把left、right移到左右的两个留白部分，对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-300px。

2、双飞翼布局

双飞翼布局和圣杯布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。

他的HTML结构发生了变化：

<div class="container"> 
　　<div class="main">
        <div class="main-inner>"main</div> 
    </div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

1、设置基本样式：

left（width:200px）,right(width:300px)。

为了高度保持一致给left main right都加上min-height:200px。

2、将三者都 float:left；

3、middle部分 width:100%占满；

4、此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%；把right拉到最右边，用margin-right:-300px;

5、main内容被覆盖了，给main增加一个内层div:main-inner, 然后margin:0 300px 0 200px;

双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。

3、Flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

对于Flex布局的一些具体语法实现，可参见阮一峰大神的Flex 布局教程：语法篇； Flex布局的具体实例可参见阮一峰大神的Flex 布局教程：实例篇；

1、首先将container块设置为一个Flex容器：display:flex;

那么container下属的main、left和right这三个子元素自动成为容器成员，称为 Flex 项目（flex item）

2、通过order熟悉设置排列顺序：main排在了第一个，要让main在中间，left在左边，可以通过Flex容器下的项目的属性“order”属性(order属性：定义项目的排列顺序，越小越靠前，默认为0)来设置：.left{order:-1}

3、通过项目属性flex-grow设置main的放大比例，将空余的空间用main来填充，使三个项目不满一整行；默认为0，也就是对剩余空间不做处理：.main{flex-grow:1}

4、通过项目属性flex-basis 设置left和right的固定宽度：

.left{order:-1; flex-basis:200px;}

.right{flex-basis:300px}

4、绝对定位布局

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

18、切记清除默认样式，比如 ul 要清除默认样式，用margin:0; padding:o;

19、清除 li 的默认斜体样式：font-style:normal；

20、background-position

21、Bootstrap 模态框（Modal）插件

22、相对路径使用的特殊符号

"./"：代表目前所在的目录。

"../"：代表上一层目录。

以"/"开头：代表根目录。

23、

例子：<a href="javascript:;">我的大学</a>

javascript: 是一个伪协议

javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。

href="javascript:;"就是去掉a标签的默认行为，跟href="javascript:void(0)"是一样的。

24、清除浮动

               /*在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面
                插入一个clear: both的块级元素，从而达到清除浮动的作用。*/
			   .clearfix:after {
				/*内容为“.”就是一个英文的句号而已。也可以不写。*/
				content: ".";
				/*加入的这个元素转换为块级元素。*/
				display: block;
				/*清除左右两边浮动。*/
				clear: both;
				/*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;
                                仍然占据空间，只是看不到而已；*/
				visibility: hidden;
				/*下面这些都是为了防止元素继承*/
				/*行高为0；*/
				line-height: 0;
				/*高度为0；*/
				height: 0;
				/*字体大小为0；*/
				font-size: 0;
			}
			/*这是针对于IE6的，因为IE6不支持:after伪类*/
			.clearfix {
				*zoom: 1;
			}
			/*支持Windows IE*/
			*html.clearfix {
				height: 1%;
			}

25、input form

26、JS获取url地址

           //获取URL单个参数type=1中的参数1，如/shopIndex1.html?type=1
			function GetRequest() {
				var url = location.search; //获取URL中？后字符串
				if(url.indexOf("?") != -1) {  //如果？存在
					var str = url.substr(1);
					strs = str.split("=");
				} else {
					return 1; //链接后面没有?的话，默认跳转到type=1的页面
				}
				return strs[1];
			}
            //获取最后一个参数1，如http://www.111yaocheng.com/shopNew/1
            function GetRequest(){
            	var url = location.href;  //返回整个url字符串(在浏览器中就是完整的地址栏)
            	var str = url.split("/");  //用/来分隔字符串得到数组
            	var strs = str[str.length-1];  //获取数组最后一个字符串
            	return strs;
            }
			var request = GetRequest();
			console.log(request);

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

stringObject.substr(start,length)

split() 方法用于把一个字符串分割成字符串数组。

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

27、white-space 属性设置如何处理元素内的空白

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

28、text-overflow 属性规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

29、overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

30、在网页标题中加入小图标，就像优快云前面那个红色的C一样。

把你的网站LOGO图标制作成一个16x16尺寸的icon图标，命名为favicon.ico，传到网站根目录上。
然后在head区嵌入代码，
如<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
或者你也可以不嵌代码，浏览器也会自己搜索出.ico图标并显示出来。
注意：文件一定要命名为favicon.ico，文件用专用软件转换而不能直接改后缀名。

31、动画三兄弟：transform、transition和animation。

参考： CSS3 Transform、Transition和Animation属性总结、CSS3中动画效果新属性----transition&transform。

32、box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

33、onmouseover、onmouseout 设置鼠标移入移出时的效果。

34、不同div可以对应相同的class，所以需指定是哪个：

document.getElementsByClassName('selfsale-box')[1].style.display='block';
document.getElementsByClassName('display_none')[0].style.display='none';

问题解决参考：
Cannot set property 'display' of undefined【利用Chrome浏览器查看js语法错误】

前端notes