web前端面試題合輯（二）

CSS

介紹下標準的盒模型？低版本IE的盒子模型有什麼不同？（必考）
1. 有兩種，IE盒模型、W3C標準盒模型
2. 盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（padding）
3. 區別：IE的content部分把border和padding計算了進去
CSS選擇符有哪些？哪些屬性可以繼承？

id選擇器（ # myid）

類選擇器（.myclassname）

標籤選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

後代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = “external”]）

僞類選擇器（a:hover, li:nth-child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

css定義的權重

標籤的權重爲1，class的權重爲10，id的權重爲100，以下例子是演示各種定義的權重值：

 /*權重爲1*/
 div{
  }
  /*權重爲10*/
  .class1{
  }
  /*權重爲100*/
  #id1{
  }
  /*權重爲100+1=101*/
  #id1 div{
  }
  /*權重爲10+1=11*/
  .class1 div{
  }
  /*權重爲10+10+1=21*/
  .class1 .class2 div{
  }/*如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現*/

CSS優先級算法如何計算？
1. 同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
2. !important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
3. important 比內聯優先級高
如何垂直水平居中？
- 已知寬高：
  - position=absolute,lrtb=0,margin=auto,包含塊一定的是容器。（絕對定位盒模型的特性）
    
    left+right+w+p+m = 包含塊的寬度
    top+bottom+h+p+m = 包含塊的高度
  - position=absolute,lt=50%,marginT/L爲負的自身的一半//包含塊一定的是容器
- 未知寬高
  - position=absolute,lt=50%,transform:tranlate3d(-50%,-50%,0)//包含塊一定得是容器
  - flex: display: flex; justify-content: center;align-items: center;
CSS3有哪些新特性？
- 新增各種css選擇器
- 文本新增樣式（怎麼溢出顯示省略號）
```
.ellips{
	white-space:no-wrap;/*不換行*/
	overflow:hidden; /*超過部分隱藏*/
	text-overflow:ellipsis; /*省略號顯示溢出*/
	}
```
- 盒模型新增樣式
  1. 陰影 box-shadow/text-shadow
  2. 倒影（webkit內核文字描邊背景鏤空）-webkit-box-reflect
- box-sizing
  - 值： content-box 默認值，標準盒子模型
  - 值： border-box：代表元素上設置的width和height表示的是border-box尺寸
- 圓角(border-radius)
- 多列布局（multi-column layout）
- 過渡(transition)、2D變換（transform 補間動畫）、keyframe （關鍵幀動畫）、animation(逐幀動畫)
Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition需要觸發一個事件才能改變屬性，而animation不需要觸發任何事件的情況下會隨時間改變屬性值，並且transition爲2幀，從from .... to，而animation可以一幀一幀的。
請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

一個用於頁面佈局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。較爲複雜的佈局還可以通過嵌套一個伸縮容器（flex container）來實現。採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的所有子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。在佈局上有了比以前更加靈活的空間。

用純CSS創建一個三角形的原理是什麼？

/*把上、左、右三條邊隱藏掉（顏色設爲 transparent）*/
#wrap .sjx {
  width: 0px;
  height: 0px;
  overflow: hidden;/*開啓IE底下的BFC*/
  border-width: 40px;
  border-style: dashed  dashed dashed solid; /*由於transparent屬性在IE6中不支持*/
  border-color: transparent transparent transparent #ccc;
 /*border-color: red green yellow #ccc;*/
}

實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
- <div style="height:1px;overflow:hidden;background:red"></div>
像素問題（畫一條0.5px的線）
- image背景：css3的background-image:linear-gradient，缺點就是：樣式多，遇到圓角這個方案就杯劇了;
- 僞類縮放：現在用的比較多的方式之一 :after 1px然後transform: scale(0.5);基本能滿足所有場景，對於圓角的處理也
經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？
- png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
- 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
- IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。
- 首先，巧妙的使用“\9”這一標記，將IE瀏覽器從所有情況中分離出來。接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
```
/*css*/
 .bb{
     background-color:red;/*所有識別*/
     background-color:#00deff\9; /*IE6、7、8識別*/
     +background-color:#a200ff;/*IE6、7識別*/
     _background-color:#1e0bd1;/*IE6識別*/
 }
```
li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
- 行框的排列會受到中間空白（回車\空格）等的影響，因爲空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小(font-size)設爲0，就沒有空格了。
爲什麼要初始化CSS樣式? css reset 和 normalize.css 有什麼區別
- 因爲瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
- reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易於保持各瀏覽器渲染的一致性;
  normalize 的理念則是儘量保留瀏覽器的默認樣式，不進行太多的重置。
請解釋一下爲什麼需要清除浮動？清除浮動的方式
- 清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。
- 父級div定義height；
- 父級div 也一起浮動；
- 常規的使用一個class；
```
.clearfix::before, 
.clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
```
- SASS編譯的時候，浮動元素的父級div定義僞類:after
```
&::after,
&::before{
 content: " ";
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
```
  解析原理：
  1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
  2) height:0 避免生成內容破壞原有佈局的高度。
  3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互;
  4）通過 content:".“生成內容作爲最後一個元素，至於content裏面是點還是其他都是可以的，例如oocss裏面就有經典的 content:”.",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
  5）zoom：1 觸發IE hasLayout。
  通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是爲了隱藏掉content生成的內容，這也就是其他版本的閉合浮動爲什麼會有font-size：0，line-height：0。
什麼是外邊距合併？
- 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
瀏覽器是怎樣解析CSS選擇器的？
- 樣式系統從關鍵選擇器開始匹配，然後左移查找規則選擇器的祖先元素。
  只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因爲不匹配而放棄該規則。
在網頁中的應該使用奇數還是偶數的字體？爲什麼呢？
- 應該用偶數的字體。
1. 比例關係
  
  相對來說偶數字號比較容易和頁面中其他部分的字號構成一個比例關係。
2. 瀏覽器緣故
  
  其一是低版本ie6會把奇數字體強制轉化爲偶數，即13px渲染爲14px
  其二是爲了平分字體。偶數寬的漢字，如12px的漢字，去掉1像素的字體間距，填充了的字體像素寬度其實就是11px，這樣的漢字中豎線左右是平分的，如“中”子，左右就是5px了。
3. 系統差別
  
  Windows自帶的點陣宋體（中易宋體）從Vista開始只提供了12,14,16px這三個大小的點陣，而13,15,17px時用的是小一號的點陣（即每個字佔的空間大了1px,但點陣沒變），於是略顯稀疏。
  而在Linux和其他手持設備上，奇數偶數的渲染效果其實相差不大
元素豎向的百分比設定是相對於容器的高度嗎？

不是，而是寬度。對於一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
先看視覺稿，把可複用的組件找出來。然後把命名和結構確定下來。
全屏滾動的原理是什麼？用到了CSS的那些屬性？

原理：方法一是整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度是500%
，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現

overflow：hidden；transition：all 1000ms ease；

什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
- （1）響應式網站設計（Responsive Web design）的理念是：集中創建頁面的圖片排版大小，可以智能地根據用戶行爲以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的佈局。
- （2）基本原理：媒體查詢 @media
- （3）兼容IE可以使用JS輔助一下來解決
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
- 視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚歎的3D效果。
- 原理：
（1）CSS3實現
- 優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
（2）jquery實現
- 通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
- 優點：能兼容到各個版本的，效果可控性好
- 缺點：開發起來對製作者要求高
（3）插件實現方式
- 例如：parallax-scrolling，兼容性十分好
::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的作用。
- 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
- 雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器需要同時支持舊的已經存在的僞元素寫法，
- 比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的僞元素則不允許再支持舊的單冒號的寫法。

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；在代碼順序上，::after生成的內容也比::before生成的內容靠後。如果按堆棧視角，::after生成的內容會在::before生成的內容之上

使元素消失的方法
1. 隱藏&不佔據空間&不會被渲染，輔助設備無法訪問
  <script>標籤隱藏 ----script.innerHTML,textarea.value
2. 滿足條件1 情況下，資源有加載，DOM可以訪問
  使用display:none
3. 滿足條件1情況下，顯隱時可以有transtion淡入淡出效果
  { position：absolute; visibility:hidden}
4. 不可見&不能點擊&輔助設備無法訪問，佔據空間保留
  直接 visibility:hidden
5. 不可見&不能點擊&佔據空間保留，且鍵盤可以訪問
  { position:relative; z-index:-1;}
6. 不可見&不佔據空間，可點擊，使用透明度：opacity
  .opacity {position: absolute;opacity: 0;filter: Alpha(opacity=0); }
7. 單純希望元素看不見，佔據空間，可點擊可選擇：
  .opacity {opacity: 0;filter: Alpha(opacity=0); }
display:none 與 visibility:hidden 的區別？
1. visibility的繼承性
  - 父元素設置visibility:hidden,子元素也會看不見
  - 但是如果子元素設置了visibility：visible,則子元素又會顯示出來
2. visibility與CSS計數器
  - visibility：hidden 不會影響計數器的計數
  - display:none 的列表完全不參與計數
3. visibility 與 transition
  - CSS3 transition 支持的 CSS 屬性中有 visibility，但是並沒有 display。
爲什麼css放在頂部而js寫在後面
1. 瀏覽器預先加載css後，可以不必等待HTML加載完畢就可以渲染頁面了
2. 其實HTML渲染並不會等到完全加載完在渲染頁面，而是一邊解析DOM一邊渲染。
3. js寫在尾部，主要是因爲js主要扮演事件處理的功能，一方面很多操作是在頁面渲染後才執行的。另一方面可以節省加載時間，使頁面能夠更加的加載，提高用戶的良好體驗
關於CSS佈局（三欄佈局） 這一部分可以看我的另一篇筆記
- 聖盃佈局
- 雙飛翼佈局
- 左邊定寬，右邊自適應

方案一：左邊設置浮動，右邊寬度設置100% .
left{float:left} .right:{width:100%}

方案二：左設置浮動，右用cacl去補寬度計算
.left{float:left} .right:{width:cacl(100vw-200px}

	3. 方案三：父容器設置display：flex right部分是設置flex：1(簡寫屬性)

BFC是什麼
一個塊格式化上下文（block formatting context）由以下之一創建：
1. 根元素或其它包含它的元素
2. 浮動元素 (元素的 float 不是 none)
3. 絕對定位元素 (元素具有 position 爲 absolute 或 fixed)
4. 內聯塊 (元素具有 display: inline-block)
5. 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
6. 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
7. 具有overflow 且值不是 visible 的塊元素，//一般用overflow:hidden
8. display: flow-root 超級棒的，不會在創建bfc的同時觸發其他副作用
9. column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素並不被包裹在一個多列容器中。

功能1：爸爸管兒子
用 BFC 包住浮動元素。(這 TM 不是清除浮動，.clearfix 纔是清除浮動）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output爸爸變嚴厲
或者建個牆（border）也可以得到效果的
功能2：兄弟之間劃清界限
用 float + div 做左右自適應佈局
http://js.jirengu.com/felikenuve/1/edit?html,css,output

參考文章在這裏

web前端面試題合輯（二）

獲取引用組件(或者表單引擎組件)爲undefined問題

前端應該如何做單點登錄，跨域處理等

elem-ui中input輸入框enter失效

HTML和CSS基礎入門筆記

web前端面試題合輯（二）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結