前端混合笔记

风安•辛幸

已于 2023-03-23 15:04:15 修改

阅读量396

点赞数 3

分类专栏：前端文章标签：前端 css3 css

于 2019-08-12 15:54:35 首次发布

本文链接：https://blog.csdn.net/qq_36278221/article/details/83867347

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、absolute定位，完全脱离文档流，不受父级盒宽高限制，多出部分之间溢出，是相对于最近一个有位置定位属性的元素定位，如果父级元素都没有定位则相对于浏览器定位，内容在相对定位元素溢出时，也是相对定位的那个元素出现滚动条，absolute的默认位置，如果不设置周围边距默认也是以原来位置（文档内容）相对定位，但同级absolute元素之间不会相互让出位置（因为脱离里文档流）但会为float元素让出位置；当设置周围边距时，是以相对定位元素的边框边界定位的；fixed定位，是相对于浏览器

2、relative、relative+float和absolute和默认同时叠加，显示顺序为：relative>relative+float>absolute>默认,从上到下顺序
注意：火狐浏览器存在absolute兼容问题，当某absolute属性的div前后同级的div都有float属性时，火狐浏览器显示不出absolute属性效果。解决方案：在absolute属性的div前或后添加一个空的没有float属性的div层。

relative+float的层会单独脱离出文档流，同时受父级盒宽限制不会向左溢出，超过父级盒高直接向下溢出，但依然占用着其浮动后原来的位置，行内，行内块元素会为他让出位置，块级元素不会为他让出位置。每一个relative+float都是单独脱离出来的，默认位置之间会相互让位，在进行前后左右定位时，其相对位置都是他原来默认的位置，所以，relative+float层与层间进行相对定位是没有相对位置关系的。

行内，行内块，overflow不是初始值的块元素，都会为溢出的float层让出位置，但不会为溢出的非float元素让位置。

当父级元素内有overflow为默认值是，relative+float和absolute都能溢出显示，且父级元素不会被它们撑开，但若父级元素设置了overflow：hidden包括单独设置overflow-x/overflow-y：hidden时，relative+float能撑开父级元素，但absolute还是不会撑开父级元素。

当元素有position:absolute/float属性是 , 其自动添加display:inline-block属性,
在这里插入图片描述
当元素设置了position:absolute ,float , display:inline-block, overflow:hidden属性时会转化为bfc模型可处理margin塌陷bug

absolute + z-index可以实现类似fixed的效果

移动端输入法框会使页面高度整体高度变小，相当于浏览器的高度变成原有浏览器高度 - 输入法弹出框高度

3、实现div字数超出用…表示
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

4、实现div透明
css设置：filter:alpha(opacity:30);opacity:0.3; filter:grayscale(100%);
js设置： *.style.filter=“alpha(opacity=50%)”; IE下
*.style.opacity = “0.5”; FF下

.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
鼠标经过图片变灰半透明

5、实现背景颜色渐变
（1）上下渐变：background: linear-gradient(red, blue); /* 标准的语法 /
（2）左右渐变：background: linear-gradient(to right, red , blue); / 标准的语法 /
（3）径向渐变：background: linear-gradient(to bottom right, red , blue); / 标准的语法 /
径向渐变颜色不均匀分布：
background: radial-gradient(red 5%, green 15%, blue 60%); / 标准的语法 /
（4）渐变+透明：background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); / 标准的语法（必须放在最后） */
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
（5）彩虹渐变色 background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
（6）渐变重复：background: repeating-linear-gradient(red, yellow 10%, green 20%);

6、a标签中，padding属于链接生效区域，margin不属于生效区域

7、div盒子中width，height表示的是最里面content的宽高。

8、margin: 20px 30px 40px 50px; 代表：上 - 右 - 下 - 左
margin:20px 20px 30px; 代表：上 - 左右 - 下
margin:20px 30px; 代表：上下 - 左右
maring:20px; 代表：上下左右

9、行内元素（如span）对height和width无效，必须转换成块级元素才能设置高度，margin和padding有效

10、div不设置位置属性，默认显示在最底层，同时z-index属性无效（包括设置默认的static），

11、指定每个 p 元素匹配的父元素中第 * 个子元素（从1开始计数）

p:nth-child(odd) 奇数
{
background:#ff0000;
}
p:nth-child(even) 偶数
{
background:#0000ff;
}
:nth-child(-n+4)选取小于等于4标签

:nth-child(n+4)选取大于等于4标签
注意：n要放前面，数字放后面，否则无效

:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

:last-child选取最后一个标签

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

12、li浮动后撑不开ul，给ul加上浮动就能撑开了（可能会影响到布局，）或者给ul设置overflow属性，也可以是overflow:hidden/auto，又或者给最后一个li后面加空元素清除浮动（clear:both）；但能撑开直接父级div，依次类推，都是撑开直接父级块级元素，所以隔一代撑不开

13、margin是不在div定位中的

14、返回：οnclick=“javascript:window.history.back(-1);”

15、js选择class执行时，选择的是页面中匹配到的第一个class，后面的会忽略

16、

17、max-width可以居中,min-width不可以

18、创建$.cookie(‘cookie_name’, ‘cookie_value’, { expires: 7, path: ‘/’ });

1>.读取cookie：

$.cookie(‘cookie_name’); // cookie存在 => ‘the_value’，其返回的是string，特殊情况返回的"false"是true，可用**===“false”？false：true；来装换

$.cookie(‘not_existing’); // cookie不存在 => null

2>.删除cookie，通过传递null作为cookie的值即可：

$.cookie(‘cookie_name’, null);

新手学习js或jquery时，一般是在本地调试（前端学习一般用不到服务器端），当学习到cookie一节时，在谷歌浏览器chrome中调试居然不生效！！！不管是使用jquery的cookie插件，还是js原生态的cookie方法都不生效！！！
什么原因呢？
原因在于chrome不支持js在本地操作cookie!
据测试，除了chrome浏览器外，其他主流浏览器（ie、firefox等）都支持js在本地操作cookie。当然部署到服务器上所有浏览器都是支持的。
当然，还有另外一个原因：浏览器设置成不支持cookie。这样，调试js操作cookie当然也是不生效的。
那么，怎么知道当前浏览器不支持或Cookie已被禁用呢？可以使用以下js代码：
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = “cookietest=1; expires=” + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1;
if(!cookiesEnabled) {
//没有启用cookie
alert("没有启用cookie ");
} else{
//已经启用cookie
alert("已经启用cookie ");
}

19、js文件中的位置是相对于引用该js文件代码所在的位置定位的

20、document.getElementsByClassName和document.getElementById
document.getElementsByClassName(“”)[0].innerHTML;

21、//以下是 setTimeout 在 jQuery 中的用法
function funA(){
log(‘funA…’);
setTimeout(‘funA()’, 1000);
}
jQuery(document).ready(function($){
//用法1 : 把要调用的函数写在ready外面,使它成为全局函数
funA();
//用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数
function funB(){
log(‘funB…’);
setTimeout(funB, 1000);
}
funB();
//用法3 : 通过调用匿名函数来执行,适合有带参数的函数
function funC(v){
log(‘funC…’+v);
setTimeout(function(){funC(v+1)}, 1000);
}
funC(1);
//用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots setTimeout("$ .funD(“+(v+1)+”)",1000);
}
});
$.funD(101);
});

22、响应式:320-479;480-767;768-****;

23、js变量不能设负值；

24、清楚html中元素换行后产生间距：把对应元素的父标签的设置：font-size：0；即可

25、box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：IE6,7不支持此属性，需使用css hack调整（*）
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;

*width:150px;

26、jquery阻止 click 事件冒泡到父元素：那么bar也属于document，点击bar也会让自己隐藏，显然这不是想要的，这时候要阻止冒泡事件，即document的事件对bar无效
$(“#bar”).click(function(event){
event.stopPropagation();
});

27.js中button中注意：使用button的click事件要使用return false来取消其默认行为，不然click没有效果

28.jquery append出来的元素，触发不了事件解决：用事件委托代替直接绑定，也就是用 $document).on('click', '.xxx', function(){})替换$ (‘.xxx’).click()

29.text-align问题
所有主流浏览器都支持 text-align 的 justify 属性值；
text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
text-align-last 是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用该属性；
大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
大部分浏览器尚不支持 text-align-last；
由于所有浏览器都支持 text-align 的 justify 属性值，但不全支持 text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
demo示例：div::after{content:“”;display:inline-block;width:100%;}使用display:block;无效，width：100%;是必须要的

30.$(window).scroll(function(){

		if ($(document).height()==($(window).height()+$(window).scrollTop())) {
			//判断页面滑动到底部
		}
	});

31.js屏幕与设备相关：
网页body可见区域宽： document.body.clientWidth （不包括浮动元素所占空间）
网页body可见区域高： document.body.clientHeight
网页body可见区域宽： document.body.offsetWidth (包括边线的宽)
网页body可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight （含padding不含border和margin）
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
网页可见区域高/屏幕物理分辨率的高： window.screen.height =$(window).width()
屏幕物理分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

屏幕缩放因子：window.devicePixelRatio

屏幕逻辑分辨率：window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)

32.一像素边框

@media (min-device-pixel-ratio:1.5),(-webkit-min-device-pixel-ratio:1.5) {
	-webkit-transform:scaleX(0.7);-ms-transform:scaleX(0.7);transform:scaleX(0.7);
}
@media (min-device-pixel-ratio:2),(-webkit-min-device-pixel-ratio:2) {
	-webkit-transform:scaleX(0.7);-ms-transform:scaleX(0.7);transform:scaleX(0.7);
}

33.正则汉字区间表示：

\u4e00-\u9fa5（不含数字）\w(含数字）_\+\-
var reg = /[^\w\s\u4e00-\u9fa5\(\)\（\）\-]/g;

34.通用html

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="renderer" content="webkit">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->

35.rem布局html的font-size设置

  (function () {  
  		var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        /*recalc重新计算*/
       recalc = function () {
       		var clientWidth = Math.min( window.innerWidth , docEl.clientWidth ); 
            if (!clientWidth) return;
          docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
         };

        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false); //false由里向外
        document.addEventListener('DOMContentLoaded', recalc, false);
  })();

36.对象的创建方法：

1.var obj = {} 对象字面量/对象直接量

var obj = {
  name:"xinxin"
}
增：obj.sex='male';
删：delete obj.name;

2.构造函数

  1）系统自带的构造函数  new object()  Array()  Number()
      var obj = new Object();
      obj.name = "xinxin",  
      obj.

  2）自定义：
  函数名默认遵循大驼峰命名法：

  function Person (sex) {
     this.sex=sex;
     this.name="xinxin";
     this.run=function(){
      this.name='xin';
     };
     this.....
  }

  var person = new Person('male');
  var name = new Person('female').name;

  3)构造行数内部原理：
    1>在函数体最前面隐式加上var this={__proto__:***.prototype}
    2>执行this.xxx=xxx
    3>隐式返回this

    function Car() {
      // var this={};

        this.sex='male';
        this.name="xinxin";

      // return 123; new 只会返回对象，返回原始值会自动忽略
      // return {} 不会忽略，会覆盖return this
      // return this;
    }

    4)原型(祖先 ，子继承)：prototype
      Person.prototype = {}
      Person.prototype.name="xinxin" 加原型属性
      Person.prototype = {
        name:"xinxin",
        ...
      }
      function Person () {
        this.name='xu';
      }

      new Person().name  //（重写）就近访问，构造函数里没有，就访问原型里的

      construct//构造器,原型属性,可被手动修改
      new Person().constructor // Person(){}

      function Car () {}
      Person.prototype.constructor = Car;
      
	 原型链：
	 function Son () {}
	 Son.prototype = new Person()
	 原型链不足：
	 1：new Son().constructor => 也是Person() {},但期望是Son()，解决：Son.prototype = new Person();Son.prototype.constructor = Son

  Object.prototype是所有对象的最终原型
  原型链是通过对象的__proto__属性链接的

37.包装类：
var str = “string”
str.abc = “abc” //new String(srt).abc = “abc” 包装复制完即销毁
console.log(str.abc) //undefined

str.length 是 new String(str).length 拋回的值

38.function Person (age,sex) {
this.name=‘xu’;
this.age=age;
this.sex=sex;
}
call，apply 改变this指向，但传参列表不同
Person.call(this,age,sex)
Person.apply(this,[age,sex])

39.var obj={
a:123,
b:345
}
for-in可以用来访问数组和对象
for(var prop in obj){
if(obj.hasOwnProperty(prop)){ //判断是否为自己的属性

}
if(‘a’ in obj){ //只能判断能不能在该对象上调用这个属性

}
}

40.A instanceof B A:对象 B:构造函数
判断A对象的原型链上有没有B的原型

41.$event.stopPropagation()对a链接无效

42.js复制（input或textarea元素有效）
let copyInput = document.getElementById("input)
copyInput.select();
document.execCommand(“Copy”);

43.THIS指向问题

函数调用（指向window），
对象方法（对象）
构造函数（实例化出来的对象）
计时器调用（全局）
匿名函数（window）
自执行（window 走预编译）

原型中的this指向调用他的对象不指向本身

44.rem会导致容器宽高计算值为非整数的情况，由此会导致某些情况下进行宽高计算比较结果不够精确或者错误的问题，另外js对浮点型计算存在丢失精度的问题

JSON.stringify()除了要序列化的 JavaScript 对象外，还可以接收另外两个参数，这两
个参数用于指定以不同的方式序列化 JavaScript 对象。第一个参数是个过滤器，可以是一个数组，也可
以是一个函数；第二个参数是一个选项，表示是否在 JSON 字符串中保留缩进。单独或组合使用这两个
参数，可以更全面深入地控制 JSON 的序列化。

 JSON.stringify(book, ["title", "edition"]);
 JSON.stringify(book, function(key, value){
 switch(key){
 case "authors":
 return value.join(",")
 case "year":
 return 5000;
 case "edition":
 return undefined;
 default:
 return value;
 }
});

JSON.parse()方法也可以接收另一个参数，该参数是一个函数，将在每个键值对儿上调用。为了
区别 JSON.stringify()接收的替换（过滤）函数（replacer），这个函数被称为还原函数（reviver），
但实际上这两个函数的签名是相同的——它们都接收两个参数，一个键和一个值，而且都需要返回一
个值。
如果还原/替换函数返回 undefined，则表示要从结果中删除相应的键；如果返回其他值，则将该值插
入到结果中。

 JSON.parse(jsonText, function(key, value){
 if (key == "releaseDate"){
 return new Date(value);
 } else {
 return value;
 } 
});
alert(bookCopy.releaseDate.getFullYear());

46.值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、（数组(Array)、函数(Function)。）
typeof （返回字符串）， instanceof

47.Object.preventExtensions()方法可以改变这个行为，让你不能再给对象添加属性和方法。（不可扩展对象方法）

要密封对象，可以使用 Object.seal()方法。
密封对象不可扩展，而
且已有成员的[[Configurable]]特性将被设置为 false。这就意味着不能删除属性和方法，因为不能
使用 Object.defineProperty()把数据属性修改为访问器属性，或者相反。属性值是可以修改的。

最严格的防篡改级别是冻结对象（frozen object）。冻结的对象既不可扩展，又是密封的，而且对象
数据属性的[[Writable]]特性会被设置为 false。如果定义[[Set]]函数，访问器属性仍然是可写的。
ECMAScript 5 定义的 Object.freeze()方法可以用来冻结对象。.

48.函数防抖（持续触发函数时在持续动作结束后多久开始执行被触发的函数）

/*@method 被触发（执行）函数
  @context  被触发（执行）函数的需要的执行期上下文（this）
  @arg 被触发（执行）函数参数
*/
function debounce(method, context,arg) {
 clearTimeout(method.tId);
 method.tId= setTimeout(function(){
 method.call(context,arg);
 }, 100);
} 

函数节流（持续触发函数时每隔多久执行被触发的函数）
function throttle(method,context,arg) {
let cur = +new Date();
if (cur - (method.last || 0) > 10) {
method.call(context,arg);
method.last = cur;
}
},

49.对于 localStorage 而言，大多数桌面浏览器会设置每个来源 5MB 的限制。Chrome 和 Safari 对每
个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制，
但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。IE8+和 Opera 对
sessionStorage 的限制是 5MB。

50.如果看到了与 null 比较的代码，尝试使用以下技术替换：
 如果值应为一个引用类型，使用 instanceof 操作符检查其构造函数；
 如果值应为一个基本类型，使用 typeof 检查其类型；
 如果是希望对象包含某个特定的方法名，则使用 typeof 操作符确保指定名字的方法存在于对
象上。
代码中的 null 比较越少，就越容易确定代码的目的，并消除不必要的错误。

60.直接使用未声明的变量会报错(aa)，但直接使用对象的未定义属性不会报错(aa={},aa.cc)

61.+new Date() 和geTime()返回值一样都是返回从 1970 年 1 月 1 日至今的毫秒数。

62.setTimeout（“code”，millisecond）中的引号的code执行期上下文（作用域）指window，不带引号则作用域链从当前执行期上下文开始，但不关怎么样，this都是指向window

63.判断当前系统

let System = {
          isWechat:navigator.userAgent.indexOf('MicroMessenger') > -1,
          isIOS:!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
          isAndroid:navigator.userAgent.indexOf('Android') > -1,
          isNative:location.protocol.toLowerCase().indexOf('file') > -1,
          isIP:!!location.href.match('192'),
          iPhoneX:/iphone/gi.test(navigator.userAgent) && (screen.height === 812 && screen.width === 375)
        }