1.css盒模型

簡介：就是用來裝頁面上的元素的矩形區(qū)域。CSS中的盒子模型包括IE盒子模型和標(biāo)準(zhǔn)的W3C盒子模型。

border-sizing(有3個值哦)：border-box,padding-box,content-box.

• 標(biāo)準(zhǔn)盒子模型：

<img width="624" alt="2018-07-10 4 24 03" src="https://user-gold-cdn.xitu.io...;h=686&f=png&s=963248">

• IE盒子模型：

<img width="620" alt="2018-07-10 4 24 12" src="https://user-gold-cdn.xitu.io...;h=656&f=png&s=1023920">

區(qū)別：從圖中我們可以看出，這兩種盒子模型最主要的區(qū)別就是width的包含范圍，在標(biāo)準(zhǔn)的盒子模型中，width指content部分的寬度，在IE盒子模型中，width表示content+padding+border這三個部分的寬度，故這使得在計算整個盒子的寬度時存在著差異：

標(biāo)準(zhǔn)盒子模型的盒子寬度：左右border+左右padding+width
IE盒子模型的盒子寬度：width

在CSS3中引入了box-sizing屬性，box-sizing:content-box;表示標(biāo)準(zhǔn)的盒子模型，box-sizing:border-box表示的是IE盒子模型

最后，前面我們還提到了，box-sizing:padding-box,這個屬性值的寬度包含了左右padding+width

也很好理解性記憶，包含什么，width就從什么開始算起。

2.畫一條0.5px的線

• 采用meta viewport的方式

  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• 采用 border-image的方式

• 采用transform: scale()的方式

3.link標(biāo)簽和import標(biāo)簽的區(qū)別

• link屬于html標(biāo)簽，而@import是css提供的
• 頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結(jié)束后加載。
• link是html標(biāo)簽，因此沒有兼容性，而@import只有IE5以上才能識別。
• link方式樣式的權(quán)重高于@import的。

4.transition和animation的區(qū)別

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。

5.Flex布局

文章鏈接：
http://www.ruanyifeng.com/blo...（語法篇）
http://www.ruanyifeng.com/blo...（實例篇）

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。

簡單的分為容器屬性和元素屬性
容器的屬性：

• flex-direction：決定主軸的方向（即子item的排列方法）

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

• flex-wrap：決定換行規(guī)則

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

• flex-flow：

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

• justify-content：對其方式，水平主軸對齊方式
• align-items：對齊方式，豎直軸線方向

項目的屬性（元素的屬性）：

• order屬性：定義項目的排列順序，順序越小，排列越靠前，默認(rèn)為0
• flex-grow屬性：定義項目的放大比例，即使存在空間，也不會放大
• flex-shrink屬性：定義了項目的縮小比例，當(dāng)空間不足的情況下會等比例的縮小，如果定義個item的flow-shrink為0，則為不縮小
• flex-basis屬性：定義了在分配多余的空間，項目占據(jù)的空間。
• flex：是flex-grow和flex-shrink、flex-basis的簡寫，默認(rèn)值為0 1 auto。
• align-self：允許單個項目與其他項目不一樣的對齊方式，可以覆蓋align-items，默認(rèn)屬性為auto，表示繼承父元素的align-items

比如說，用flex實現(xiàn)圣杯布局

6.BFC（塊級格式化上下文，用于清楚浮動，防止margin重疊等）

直譯成：塊級格式化上下文，是一個獨立的渲染區(qū)域，并且有一定的布局規(guī)則。

• BFC區(qū)域不會與float box重疊
• BFC是頁面上的一個獨立容器，子元素不會影響到外面
• 計算BFC的高度時，浮動元素也會參與計算

那些元素會生成BFC：

• 根元素
• float不為none的元素
• position為fixed和absolute的元素
• display為inline-block、table-cell、table-caption，flex，inline-flex的元素
• overflow不為visible的元素

7.垂直居中的方法

(1)margin:auto法

css:

div{
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

html:

<div>
 <img src="mm.jpg">
</div>

定位為上下左右為0，margin：0可以實現(xiàn)脫離文檔流的居中.

(2)margin負(fù)值法

.container{
  width: 500px;
  height: 400px;
  border: 2px solid #379;
  position: relative;
}
.inner{
  width: 480px;
  height: 380px;
  background-color: #746;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -190px; /*height的一半*/
  margin-left: -240px; /*width的一半*/
 }

補(bǔ)充：其實這里也可以將marin-top和margin-left負(fù)值替換成，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脫離文檔流的）

設(shè)置父元素的display:table-cell,并且vertical-align:middle，這樣子元素可以實現(xiàn)垂直居中。

css:
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

(4)利用flex

將父元素設(shè)置為display:flex，并且設(shè)置align-items:center;justify-content:center;

css:
.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

8.關(guān)于js動畫和css3動畫的差異性

渲染線程分為main thread和compositor thread，如果css動畫只改變transform和opacity，這時整個CSS動畫得以在compositor trhead完成（而js動畫則會在main thread執(zhí)行，然后出發(fā)compositor thread進(jìn)行下一步操作），特別注意的是如果改變transform和opacity是不會layout或者paint的。
區(qū)別：

• 功能涵蓋面，js比css大
• 實現(xiàn)/重構(gòu)難度不一，CSS3比js更加簡單，性能跳優(yōu)方向固定
• 對幀速表現(xiàn)不好的低版本瀏覽器，css3可以做到自然降級
• css動畫有天然事件支持
• css3有兼容性問題

9.塊元素和行元素

塊元素：獨占一行，并且有自動填滿父元素，可以設(shè)置margin和pading以及高度和寬度
行元素：不會獨占一行，width和height會失效，并且在垂直方向的padding和margin會失
效。

10.多行元素的文本省略號

 display: -webkit-box
-webkit-box-orient:vertical
-web-line-clamp:3
overflow:hidden

11.visibility=hidden, opacity=0，display:none

opacity=0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點擊該區(qū)域，也能觸發(fā)點擊事件的visibility=hidden，該元素隱藏起來了，但不會改變頁面布局，但是不會觸發(fā)該元素已經(jīng)綁定的事件display=none，把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪除掉一樣。

12.雙邊距重疊問題（外邊距折疊）

多個相鄰（兄弟或者父子關(guān)系）普通流的塊元素垂直方向marigin會重疊

折疊的結(jié)果為：

兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。