首页 > 代码库 > 2017年3月7日以前前端学习笔记（稍乱，待整理）
2017年3月7日以前前端学习笔记（稍乱，待整理）
笔记:
1: jq环境搭建;
|
<script type="text/javascript" src="http://www.mamicode.com/http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> |
2:stackoverflow 问题查询
3: < dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了：
dl ——define list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。
dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解
例子：
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
4:html 注释格式：<！--注释内容—>;
5: (绝对定位也有此特点:. )
6:
7:当父包含块里面的元素设置了浮动导致父包含块缩成一条时:
在父包含块设置:overflow:hidden;才有效果……
8: css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$(‘.float‘)
摘要: css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
一、抛一块问题砖（display： block）先看现象：
分析HTML代码结构：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
分析CSS代码样式：
.outer{border:1pxsolid#ccc;background:#fc9;color:#fff;margin:50pxauto;padding:50px;}
.div1{width:80px;height:80px;background: red;float: left;}
.div2{width:80px;height:80px;background: blue;float: left;}
.div3{width:80px;height:80px;background: sienna;float: left;}
这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
二、清楚css浮动：
方法一：添加新的元素 、应用 clear：both；
HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{clear:both;height:0;line-height:0;font-size:0}
result： （纠正： padding不会受影响）
方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
HTML：
<div class="outer over-flow">//这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS：
.over-flow{
overflow: auto; zoom:1;//zoom: 1; 是在处理兼容性问题
}结果：当然是实现了！ img{display: none}; 略图
原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。
方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：
.outer{zoom:1;}/*==for IE6/7 Maxthon2==*/
.outer:after{clear:both;content:‘.‘;display:block;width:0;height:0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/
其中clear:both;指清除所有浮动；content: ‘.‘; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
最后：但不是不重要，也不是不知道！
下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。
$(‘.float‘).end().结语：清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。再次again：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
9: border-collapse: collapse; table边框样式;
10: 文字与图片对齐三种情况
1，img{vertical-align:top;}
2，img{vertical-align:middle;}
3，img{vertical-align:bottom;}
FF：文字和图片在同一行时
1.文字行高的顶部和图片顶部对齐
2.文字行高的中部和图片中部对齐
3.文字行高的底部和图片底部对齐
11:
12:字体设置:
13: 清除浮动:mainbody:after {
clear: both;
content: ".";
display: block;
height: 0;
width: 0;
visibility: hidden;
}
14: Html 让文字显示在图片的上面
如题：
第一种方式便是将 image 作为背景图片，即：background-image:url(".......");
在此可以控制背景图片的横向和纵向的平铺：
background-repeat : none; 不进行平铺
background-repeat : repeat-x; 横向x轴进行平铺
background-repeat : repeat-y; 横向y轴进行平铺
background-repeat : repeat; 横向x轴与纵向y轴都进行平铺，这也是默认情况的状态
第二种方式是将img块与文字块放在同一个div 中，然后设置他们之间的位置，例如如下代码块：
<div style="position:relative;">
<img src="http://www.mamicode.com/...." />
<div style="position:absolute; z-index:2; left:10px; top:10px">
haha
</div>
</div>
其余的位置再根据实际情况进行微调就好~~
关于position中relative 以及 absolute 属性值的区别：
position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
比如：<div class="1"></div><div
class="2"></div>
当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px
15:
以上三角形的实现:
HTML: <P><span class="triangle"></span>前端前端前端前端前端前端..............前端</P>
<P><span class="triangle"></span>前端前端前端前端.....................前端前</P>
<P><span class="triangle"></span>前端前端前端前端前端前端前端..........前端</P>
CSS样式:
.triangle{
width: 0;
height: 0;
border-left:5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #10456b;
display: inline-block;
HTML有2种路径的写法：相对路径和绝对路径。
HTML相对路径(Relative Path)
1.同一个目录的文件引用---直接写引用文件名即可
如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。
例如：
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.html
在info.html加入index.html超链接的代码应该这样写：
<a href =
"http://www.mamicode.com/index.html">这是超连接</a>
Notice:
如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/sites/index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "http://www.mamicode.com/index.html">这是超连接</a>
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/index.html
在info.html加入index.html超链接的代码应该这样写：
<a href =
"http://www.mamicode.com/index.html">index.html</a>
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/sites/wowstory/index.html
在info.html加入index.html超链接的代码应该这样写：
< a href = "http://www.mamicode.com/wowstory/index.html">index.html</a>
Notice：
如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/index.html
在info.html加入index.html超链接的代码应该这样写：
<a href =
"http://www.mamicode.com/html/index.html">这是超连接</a>
假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/tutorials/index.html
在info.html加入index.html超链接的代码应该这样写：
<a href =
"http://www.mamicode.com/html/tutorials/index.html">这是超连接</a>
HTML绝对路径(Absolute Path)
大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.ajaxstu.com/img/photo.jpg来确定文件位置的方式也是绝对路径。
HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。
假设你注册了域名http://www.ajaxstu.com，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
假设你在www根目录下放了一个文件default.asp，这个文件的绝对路径就是： font color="#0058db">http://www.ajaxstu.com/default.asp。
假设你在www根目录下建了一个目录叫archives，然后在该目录下放了一个文件2886.html，这个文件的绝对路径就是http://www.ajaxstu.com/archives/2886.html。
在html中,引入css的方法主要有行内式、内嵌式、导入式和链接式4种
1。行内式
即在标记的style属性中设定css样式，这种方式本质上没体现出css的优势，因此不推荐使用。
2。嵌入式
在对页面中各种元素的设置集中写在<head>和</head>之间的，对于单个页面来说，这种方式很方便
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。 但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。
3。导入式
导入式格式如下：
<style type="text/css">
@import "mystyle.css";
</style>
4。连接式
这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。
格式如下：
<link href="http://www.mamicode.com/mystyle.css" rel="stylesheet" type="text/css"/>
圆角边框样式:border-radius:25px;
方框阴影: box-shadow: 10px 10px 5px #888888;
弹性布局Flex布局:
.box{
display: flex; }
容器的6个属性值:
? flex-direction: row | row-reverse | column | column-reverse;
? flex-wrap: nowrap | wrap | wrap-reverse;
? flex-flow: <flex-direction> || <flex- wrap>,默认值为row nowrap;
? justify-content（定义了项目在主轴上的对齐方式）：flex-start | flex-end | center | space-between | space-around;
? align-items：（项目在交叉轴上如何对齐方式：flex-start | flex-end | center | baseline | stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。;
? align-content （多根轴线的对齐方式）：flex-start | flex-end | center | space-between | space-around | stretch;
项目的6个属性值:
Order：项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
Flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto；
例子：.item {
flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
}
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;}
例图：
CSS3的em及rem设置字体大小
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
px,em,rem单位转换工具地址：http://pxtoem.com/
1 ÷ 根元素的font-size × 需要转换的像素值 = rem值
Rem相对于根元素的大小,通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
兼容性例子: p {font-size:14px; font-size:.875rem;}
20161222:
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
20161223:
Css部分值属性选择器: 选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
Html:
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
Css:
p[class~="important"]{color: red;} 表示: 选择 class 属性中包含 important 的元素
"~=" 属性选择器能用于任何属性，而不只是 class。
子串匹配属性选择器:
类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
特定属性选择类型
Html:
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G‘day!</p>
Css:
*[lang|="en"] {color: blue;}
{
color: red;
}
图片透明度设置：
img
{
opacity:0.4; opacity 属性能够设置的值从 0.0 到 1.0。值越小
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
20161226:
css3: 2D transform转换方法:
translate():移动, 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
rotate()：旋转。元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale()：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix()：matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
CSS3 过渡：transition；
实例
应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
与上面相等的间歇形式：
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
}
CSS3 动画：
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
或
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
改变背景色和位置：
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
20161228:
nth-of-type(even):偶数的()的样式
nth-child(-n+3)：表示前三。
20160104:
Mdn网站:英文改中文: zh-CN
字符串-数字=数字
字符串+数字=字符串
20170212: js正则表达式判断是否为数字:
if (/[^0-9/.\s]/g.test(inputNum)) {
alert(‘请输入数字‘);
return 1;
}
return 0;
}
(“inputNum”为输入内容)
2010214:
1.方形变为圆形:border-radius:100%;
2.获取随机图片方法: ‘url(https://bing.ioliu.cn/v1/rand?t=‘ + new Date().getTime() + ‘)‘;
2017年3月7日以前前端学习笔记（稍乱，待整理）