20200409-美團前端實習 一面涼經

嚴重發現自己手撕代碼,不能調試的情況下能力很差
原理還好,有些知識點就是緊張忘了orz

基本上這些,有點記不住了

行級塊級元素(沒怎麼舉出來) 
消除浮動 (clear:both和父級hidden)
js基本變量(我沒答上來忘了undefined和null)
tcp (三握四揮)爲什麼四揮
節流防抖(有大致思路,寫不出)
ajax(大致差不多??)
跨域(cors和jsonp)爲什麼?(同源策略)
原型鏈繼承(原型式、寄生蟲組合式)
letconstvar的區別
call、apply、bind的區別
讓我模擬call(中午剛看的就忘了)
重繪重排(迴流我也記不太清了)
bfc ifc(ifc忘記)

行級塊級元素

1、在衆多行內元素中,最常使用的是span,另外行內元素還包括img、a、big、small、sub、sup、strong、u、button(屬性默認爲display:inline-block)

2、行內元素的特點:相鄰的行內元素不換行,設置寬高無效,margin設置僅左右方向有效,上下無效,padding設置上右下左都有效。水平方向上padding-left,padding-right,margin-left,margin-right都有邊距效果,但是垂直方向上padding-top、padding-bottom、margin-top、margin-bottom都不會產生邊距效果。

3、塊級元素最具有代表性的就是div,其餘的有p、h1~h6、table、ul、li、ol、等等以及H5新增的屬性header、section、aside、footer等等。

消除浮動

1.額外標籤法:給誰清除浮動,就在其後額外添加一個空白標籤 。
優點:通俗易懂,書寫方便。(不推薦使用)
缺點:添加許多無意義的標籤,結構化比較差。

給元素small清除浮動(在small後添加一個空白標籤clear(類名可以隨意),設置clear:both;即可)
在這裏插入圖片描述在這裏插入圖片描述

2.父級添加overflow方法:可以通過觸發BFC的方式,實現清楚浮動效果。
優點:代碼簡潔(慎重使用,若該父盒子裏還有position定位會引起麻煩)
缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素。

注意:別加錯位置,是給父親加(並不是所有的浮動都需要清除,誰影響佈局,才清除誰。)

3.使用after僞元素清除浮動::after方式爲空元素的升級版,好處是不用單獨加標籤了。(較常用)
優點:符合閉合浮動思想,結構語義化正確
缺點:由於IE6-7不支持:after,使用zoom:1,觸發hasLayout。
在這裏插入圖片描述
注意:這個也是給父親添加 clearfix

4.使用before和after雙僞元素清除浮動:(較常用)
在這裏插入圖片描述
注意:是給父親添加clearfix

js基本變量

number、string、boolean、symbol、undefined、null

節流防抖

前幾天剛看了orz,有點思路但是不嚴謹

https://blog.csdn.net/mus123/article/details/105333431

ajax

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}

跨域(cors和jsonp)爲什麼?(同源策略)

https://blog.csdn.net/mus123/article/details/105262096

原型鏈繼承

https://blog.csdn.net/mus123/article/details/105412287

let、const、var

變量提升、塊作用域、暫時性死區、同名變量、const固定
https://www.cnblogs.com/zhaoxiaoying/p/9031890.html

call、apply、bind的區別

https://blog.csdn.net/mus123/article/details/105391096

重繪/重排(迴流)

原來回流就是重排。。
尺寸、位置相關重排
顏色、可見性相關重繪
https://www.baidu.com/link?url=7fk8NogNusT0qCV4oBxiF-Bfu-kOklpMRDXFpyOdSOktEwEwFvIGUr2MRqA4M8tL73LRrCYbgRT8j9u8QKlzhq&wd=&eqid=ec072ca200000fbc000000035e8ed2d3

bfc ifc

https://segmentfault.com/a/1190000014886753
bfc
Formatting Context,格式化上下文,指頁面中一個渲染區域,擁有一套渲染規則,它決定了其子元素如何定位,以及與其他元素的相互關係和作用。

內部的Box會在垂直方向,一個接一個地放置。

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的左外邊緣(margin-left), 與包含塊的左邊(contain box
left)相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。除非這個元素自己形成了一個新的BFC。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時,浮動元素也參與計算

IFC(Inline Formatting Contexts)直譯爲"行內格式化上下文",IFC的line box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的 padding/margin 影響)

IFC中的line box一般左右都貼緊整個IFC,但是會因爲float元素而擾亂。float元素會位於IFC與與line
box之間,使得line box寬度縮短。
IFC中時不可能有塊級元素的,當插入塊級元素時(如p中插入div)會產生兩個匿名塊與div分隔開,即產生兩個IFC,每個IFC對外表現爲塊級元素,與div垂直排列。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章