1 浮動元素居中

(1) 沒有寬度
父子元素都float:left;position:relative.父元素left:50%,子元素left:-50%

<meta charset="utf-8">
<style>
  .box {
    border: 2px solid green;
    float: left;
    position: relative;
    left: 50%;
    /*move to right 50% of the window width*/

  }

  p {
    border: 2px solid red;
    float: left;
    position: relative;
    left: -50%;
    /*move to left 50% of the box width*/

  }
</style>
<div class="box">
  <p>我是浮動的</p>
</div>

(2) 有寬度
margin-left:50%;position:relative;left:-100px;不能是-50%，否則就不是自身一半，而是body的一半。

<meta charset="utf-8">
<style>
  .box {
    border: 2px solid green;
    width: 200px;
    float：left;
    margin-left: 50%;
    position: relative;
    left: -100px;
    text-align: center;
  }
</style>
<div class="box">hhh</div>

2 display:none和visibility:hidden區別

(1) display:none會讓元素從渲染樹上消失，不佔據空間。
visibility:hidden不會讓元素從渲染樹上消失，有空間沒內容。
(2) display:none具有株連性，子孫元素都不可見。
visibility:hidden子元素設置visible可以顯示。

3 link與@import的區別

(1) link屬於html標籤，@import是CSS提供的。
(2) 頁面被加載時，link會被同時加載，@import引用的CSS會等到頁面被加載完再加載。
(3) link無兼容問題，@import只在IE5以上才能被識別。
(4) link樣式的權重高於@import的權重。

4 清除/閉合浮動的方法

清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0的問題。
(1) 在浮動元素末尾添加一個空標籤，比如div，並設置clear:both。clear取值一共三種，left,right,both，分別表示不允許左側/右側/兩側有浮動元素。
缺點：添加了無意義標籤。
(2) 父元素添加overflow:hidden/auto/scroll觸發BFC。
缺點：內容增多時候容易造成不自動換行從而內容被隱藏掉，無法顯示需要溢出的元素。
(3) 父元素添加after僞元素清除浮動。

.clearfix:after{
  content:'.';
  height:0;
  display:block;
  clear:both;
  visibility:hidden;
}
.clearfix{
  *zoom:1;//IE6-7兼容
}

(4) before和after雙僞元素清除浮動。

.clearfix:before,.clearfix:after{
  content:'.';
  display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
}

5 標籤顯示模式

一般分爲塊級元素和行內元素。
block元素：
(1) 總是從新行開始
(2) 高度、行高、內外邊距都可以控制
(3) 寬度默認是容器的100%
(4) 可以容納內聯元素和其他塊元素
舉例：div、p、ul、ol、li、h1-h6，其中p、h1-h6都是文字類塊級標籤，裏面不能放其他塊級元素。

inline元素：
(1) 和相鄰行內元素在一行上
(2) 只有水平的內外邊距有效，高寬、垂直邊距都無效
(3) 默認寬度就是本身內容的寬度
(4) 行內元素只能容納文本或者其他行內元素
舉例：a、span、strong、del，其中鏈接裏面不能再放鏈接

inline-block元素：在行內元素中有幾個特殊標籤img、input、td，可以設置寬高和對齊
(1) 和相鄰行內元素在一行上，但之間會有空白縫隙。可以通過設置父元素font-size:0解決。
(2) 默認寬度就是本身內容寬度
(3) 高度、行高、內外邊距都可以控制

6 優雅降級和漸進增強

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，爲無法支持功能的瀏覽器提供候選方案，降低體驗但不至於完全失效。
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步添加只有新式瀏覽器才支持的功能。

7 em與rem

都是相對文本長度單位。em:相對當前對象內/父元素 rem:相對根元素html,所有瀏覽器默認16px。

8 box-sizing屬性

content-box：標準模式盒模型，高寬不包括border和padding。
border-box：怪異模式盒模型，高寬包括border和padding。
對HTML文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理。爲了確保你的頁面使用標準模式，請確認你的頁面擁有 DOCTYPE。怪異模式按照瀏覽器自己的方式執行。在盒模型計算方式、圖片對齊方式、行內元素設置寬高等方面都有差別。

9 定位

定位屬性=定位模式+邊偏移

10 BFC和IFC

BFC
(1) 哪些元素或者屬性會產生BFC

根元素html
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible
(2) BFC佈局規則特性：
1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
(3) 用於清除內部元素浮動、外邊距合併、自適應佈局等

IFC
(1) 框會從包含塊的頂部開始，一個接一個地水平擺放。
(2) 擺放這些框時，它們在水平方向的內外邊距+邊框所佔用的空間都會被考慮；在垂直方向上，這些框可能會以不同形式來對齊：水平的margin、padding、border有效，垂直無效。不能指定寬高;
(3) 行框的寬度是由包含塊和存在的浮動來決定; 行框的高度由行高來決定

11 頁面佈局方式

聖盃/雙飛翼佈局、彈性佈局、多欄佈局、響應式佈局、瀑布流佈局
(1) 聖盃/雙飛翼佈局
參考 https://github.com/zwwill/blog/issues/11
之前寫的一篇聖盃佈局https://blog.csdn.net/ChristineAS/article/details/87868374
之前寫的一篇雙飛翼佈局https://blog.csdn.net/ChristineAS/article/details/87869012
總結如下：
聖盃佈局

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下爲簡碼，僅保留關鍵部分 */
header,footer {height: 50px;}
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
</style>

一句話概括：使用了relative佈局、float和負margin，包裹left、main、right的wrapper採用padding，left和right還加了偏移值。
缺點：當 main 部分的寬小於 left 部分時就會發生布局混亂。

雙飛翼佈局

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下爲簡碼，僅保留關鍵部分 */
header,footer {height: 50px;}
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>

一句話概括：同樣使用了float和負margin，但是並未使用relative，而是給main增加了一個dom層。是聖盃佈局的優化版本。
絕對定位

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下爲簡碼，僅保留關鍵部分 */
header,footer { height: 50px;}
.wrapper { position: relative;}
.main { height: 200px; margin:0 100px;}
.left, .right{ width: 100px; height: 200px; position: absolute; top: 0;}
.left{ left: 0;}
.right{ right: 0;}
</style>

(2) 彈性佈局 flex
參考 https://www.cnblogs.com/qcloud1001/p/9848619.html 這一篇就夠了
(3) 多欄佈局
參考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts
主要是columns:column-count|column-width，單獨寫也不會產生歧義。

(4) 響應式佈局
參考 http://www.alloyteam.com/2014/01/responsive-design/
不修改dom前提下調整佈局

float流佈局
根據不同分辨率設置CSS
@media only screen and (max-width:320px){//表示屏幕寬度小於等於320像素時生效}
添加viewport的meta標籤否則手機端可能會自動縮放
(5) 瀑布流佈局
參考 https://segmentfault.com/a/1190000016255824
可以使用flex或者多欄佈局

高頻面試題之CSS篇

1 浮動元素居中

2 display:none和visibility:hidden區別

3 link與@import的區別

4 清除/閉合浮動的方法

5 標籤顯示模式

6 優雅降級和漸進增強

7 em與rem

8 box-sizing屬性

9 定位

10 BFC和IFC

11 頁面佈局方式

高頻面試題之HTTP篇

vue教程實踐

0829面試總結

【JavaScript高級】貪喫蛇

高頻面試題之CSS篇

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

linux以太網驅動總結