前端总结

超哥要逆天
222 阅读12分钟

盒子模型

css盒子模型本身就是一个盒子，包装周围的其他的HTML元素，css盒子模型主要包含几个方面的属性  padding , border, margin ,content

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

CSS3中新添加了很多选择器   哪些属性可以继承

    1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = "external"]）
    9.伪类选择器（a:hover, li:nth-child）

*   可继承的样式： font-size font-family color, UL LI DL DD DT;

*   不可继承的样式：border padding margin width height ;

CSS优先级算法

选择器栗子
ID#id
class.class
标签p
属性[type='text']
伪类:hover
伪元素::first-line
相邻选择器、子代选择器>+

important Infinity

行间样式 1000

id 100

class/属性/伪类 10

标签选择器/伪元素 1

通配 0

 * 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;

清除浮动方法 

1、对父级设置适合CSS高度

2、clear:both清除浮动

3、父级div定义 overflow:hidden

    对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可      以很少CSS代码即可解决浮动产生。

float   absolute异同

相同点：都使元素脱离文档流可以设置宽高

不同点：float仍然占据空间，absolute可以覆盖

CSS单行省略和多行省略

overflow: hidden;//隐藏溢出 

text-overflow:ellipsis;//省略号

 white-space: nowrap;//不换行

 px pt em rem区别

px：绝对单位，页面按精确像素展示。

pt ：是point，是印刷行业常用单位，等于1/72英寸。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

PX特点：

  1. IE无法调整那些使用px作为单位的字体大小；

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM特点 ：

  1. em的值并不是固定的；

  2. em会继承父级元素的字体大小。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。


display:none与visibility:hidden

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。

position有哪些值？

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。元素位置变换以后，不会脱离文档流。 

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级，会脱离文档流。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

如何让非文字类元素实现水平垂直居中？

  普通div的水平居中

margin: 0 auto;
height: 50px; 
width: 80px;

 

绝对定位的水平居中：

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;


浮动元素的水平垂直居中：

border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
复制代码

利用绝对定位元素的自动伸缩特性水平垂直居中

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

复制代码

利用flex布局水平垂直居中（回答这个显得更高端）

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}

flex布局

www.ruanyifeng.com/blog/2015/0…

首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：

1
2
3
4
5
6
7
8
9
10
11
12
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (换行)
nowrap, wrap, wrap-reverse
flex-flow (以上两者的简写)
flex-direction || flex-wrap
justify-content (水平对齐方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直对齐方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直对齐方式)
stretch, flex-start, flex-end, center, space-between, space-around

项目的属性：

1
2
3
4
5
6
7
8
9
10
11
order 排列顺序，数值，默认0
"integer"
flex-grow 如图示7，定义放大比例，默认0，即如果存在剩余空间，也不放大。
"number"
flex-shrink 如图示8，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
"number"
flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直），定义项目本来的大小，跟width或者height一样。
flex 推荐，以上三个的缩写，默认 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如图示9，单个项目有与其他项目不一样的对齐方式，可覆盖align-items
"auto","flex-start","flex-end","center","baseline","stretch"　

1.flex-direction

1
2
3
4
row (从左往右)默认
row-reverse (从右往左)
column (从上往下)
column-reverse (从下往上)

2.flex-wrap

1
2
3
nowrap (不换行)默认
wrap (换行，且往下一行换)
wrap-reverse (换行，且往上一行换)

3.flex-flow，是flex-direction和flex-wrap的简写形式。

1
flex-flow:<flex-direction> || <flex-wrap>;

4.justify-content

1
2
3
4
5
flex-start
flex-end
center
space-between
space-around

5.align-items

1
2
3
4
5
stretch 默认
flex-start
flex-end
center
baseline 项目第一行文字的基准线对齐

　　

6.align-content

1
2
3
4
5
6
stretch 默认
flex-start
flex-end
center
space-between
space-around

7.flex-grow

定义了放大比例，默认为0，即如果存在剩余空间，也不会放大。但是，如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有的话），如果其中一个为2，则他是其他项目的2倍宽度。

8.flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果有一个项目的flex-shrink为0，其他都为1，空间不足时，前者不缩小。

9.align-self，定义项目自己的对齐方式

link和@import引入css的区别

www.cnblogs.com/omiwa/artic…

transition与animation的区别

blog.csdn.net/liaozhongpi…

 BFC 原理(块级格式化上下文)

blog.csdn.net/jiaojsun/ar…

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

BFC区域不会与float box重叠

BFC是页面上的一个独立容器，子元素不会影响到外面

计算BFC的高度时，浮动元素也会参与计算

那些元素会生成BFC：

根元素

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption，flex，inline-flex的元素

overflow不为visible的 

js栈内存和堆内存的区别

首先JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。

1、基本类型

基本类型有Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。

2、引用类型

引用类型，值大小不固定，栈内存中存放地址指向堆内存中的对象。是按引用访问的。如下图所示：栈内存中存放的只是该对象的访问地址，在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。 这样，当查询引用类型的变量时， 先从栈中读取内存地址， 然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问

当我们看到一个变量类型是已知的，就分配在栈里面，比如INT,Double等。其他未知的类型，比如自定义的类型，因为系统不知道需要多大，所以程序自己申请，这样就分配在堆里面。基本类型大小固定，引用类型大小不固定，分开存放使得程序运行占用内存最小。

3、栈内存：存放基本类型。 堆内存：存放引用类型（在栈内存中存一个基本类型值保存对象在堆内存中的地址，用于引用这个对象。）

4、基本类型在当前执行环境结束时销毁，而引用类型不会随执行环境结束而销毁，只有当所有引用它

的变量不存在时这个对象才被垃圾回收机制回收。

深入javascript之原型和原型链

 函数对象

  • 所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）
  •  所有函数拥有prototype属性（显式原型）（仅限函数）
  •  原型对象：拥有prototype属性的对象，在定义函数时就被创建
  1. 所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”）
  2. 所有的引用类型（数组、对象、函数）都有一个 _proto_ 属性(隐式原型属性），属性值是一个普通的对象
  3. 所有的函数，都有一个 prototype(显式原型）属性，属性值也是一个普通的对象
  4. 所有的引用类型（数组、对象、函数）， _proto_ 属性值(隐式原型属性）指向它的构造函数的“prototype”属性值

原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念

JavaScript深入之词法作用域和动态作用域

作用域

作用域是指程序源代码中定义变量的区域。

作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。

JavaScript 采用词法作用域，也就是静态作用域。

静态作用域与动态作用域

因为Javascript采用的是词法作用域，所以它的函数的作用域在函数定义的时候就决定了。

而与词法作用域相对的是动态作用域，它的函数的作用域是在函数调用的时候才决定的。

让我们认真看个例子就能明白之前的区别：

var value = 1;

function foo(){
  console.log(value)
}

function bar(){
  var value = 2;
  foo();
}

bar();

// 结果是？

假设javascript采用静态作用域，让我们分析下执行过程：

执行foo函数，先从foo函数内部查找是否有局部变量value，如果没有，就根据书写的位置，查找上面一层的代码，也就是value等于1，所以结果会打印1。

假设javascript采用动态作用域，让我们分析下执行过程：

执行foo函数，依然是从foo函数内部查找是否有局部变量value，如果没有，就从调用函数的作用域，也就是bar函数内部查找value变量，所以结果会打印 2。

前面我们已经说了，javascript采用的是静态作用域，所以这个例子的结果是1。

引起内存泄漏的操作有哪些

1.全局变量引起

2.闭包引起

3.dom清空，事件未清除

4.子元素存在引用

5.被遗忘的计时器

如何添加、删除、移动、复制DOM节点

创建

  • createTextNode() //创建文本节点
  • createElement() //创建元素节点
  • createDocumentFragment() //创建文档碎片

操作

  • appendChild() //增加
  • removeChild() //删除
  • replaceChild() //替换
  • insertBefore() //插入

查找

  • getElementById()
  • getElementByTagName()
  • getElementByName()



avatar
文章
阅读
粉丝