• 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

  css盒子模型由4部分構成，margin、border、padding、content。標準盒子模型和IE盒子模型的主要區別是在於width的計算，標準盒子模型中，width = content的寬度，IE盒子模型中width包括content、padding、border。

• CSS選擇符有哪些？哪些屬性可以繼承？
  ID選擇器、類選擇器、標籤選擇器、屬性選擇器、後代選擇器等。優先順序：ID > 類 = 偽類 = 屬性 > 元素 = 偽元素。內聯樣式優先順序比ID高，！important優先順序最高。
  可繼承的屬性：visibility. cursor
• 如何居中div？如何居中div中的內容？
  居中div

//適用於寬高已知的元素。
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
<div class="item"></div>

//利用flex佈局，不限制寬高
.parent{
    display: flex;
    justify-content
 
: center;
    align-items: center;
    height: 500px;
    width: 500px;
    background:red;
}
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
<div class="parent">
    <div class="item"></div>
</div>

//
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000
 
;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="item"></div>

居中div中的內容

//缺點是如果div寬度設定不夠，內容會自動換行超出容器。只有當div的寬度足夠容納文字時，才會達到想要的效果，適用於單行文字居中。
.item{
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    line-height: 100px; //行高與div等高，實現垂直居中
    text-align: center; //實現水平居中
}
<div class="item">垂直水平我都居中了。</div>

//利用table佈局。適用於多行居中。
.parent{
    display: table;
}
.item{
    display: table-cell;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}
<div class="parent">
    <div class="item">垂直水平我都居中了。</div>
 </div>

• 用純CSS建立一個三角形的原理是什麼？
• 滿屏 品 字佈局 ?非滿屏品字佈局？三列布局，左右定寬，中間自適應？

<div class="content">

    <div class="top">p1</div>

    <div class="left">p2</div>

    <div class="right">p3</div>

</div>
//滿屏品字佈局
*{
    margin: 0;
    padding: 0;
}
.top{
    width: 100%;
    height: 100px;
    background: pink;
}
.left,.right{
    float: left;
    width: 50%;
    height: 100px;
    background: yellow;
}
.right{
    background:blue;
}
 //非滿屏品字佈局
 *{
    margin: 0;
    padding: 0;
}
.top{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: pink;
}
.left,.right{
    float: left;
    width: 100px;
    height: 100px;
}
.left{
    margin-left: 50%;
    background:red;
}
.right{
    background:blue;
    margin-left: -200px;
}
//三列布局，左右定寬中間自適應。本文采用的方法注意center放在最後面一個div
<div class="content">
    <div class="left">p1</div>
    <div class="right">p3</div>
    <div class="center">p2</div>
</div>
*{
    margin: 0;
    padding: 0;
}

.center{
    width: auto;
    background:pink;
    height: 100%;
    margin-left: 150px;
    margin-right: 200px;
}
.left{
    background: #E79F6D;
    width:150px;
    float:left;
}
.right{
    background: #77BBDD;
    width:200px;
    float:right;
}

//三列布局，利用flex佈局
<div class="content">
    <div class="left">p1</div>
    <div class="center">p2</div>
    <div class="right">p3</div> 
</div>
*{
     margin: 0;
     padding: 0;
     height: 100%
 }
 .content{
  display: flex;
}
.left,.right{
  width: 120px;
  height: 100%;
  background: green;
}
.center{
  height: 100%;
  background: pink;
  width: 100%;
}

• 常見相容性問題？

  1.不同瀏覽器的標籤預設的margin和padding不同：*{margin：0；padding：0}
  2.塊級元素float後，又存在margin-left/right時，IE6中顯示margin比設定的大：只要在float的標籤樣式中加入 display:inline;將其轉化為行內屬性即可
  3.設定較小高度標籤（一般小於10px），在IE6，IE7中高度超出自己設定高度：設定overflow：hidden或者是將line-height設定為更小的高度。
  4.圖片預設有間距：使用float屬性為img佈局。

• li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

  li標籤之間的空白間隔是由於換行符導致的。所以最簡單的辦法是寫li標籤的時候不換行，但是不美觀。

• CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
  當在表格元素中使用時，設定visibility：collapse可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。

• position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
  1.首先看display、position、float之間的關係。
  display：none，則positon/float不起作用。
  display不為none，看position是否是absolute/fixed，如果是的話，float不起作用，display按照block/table展示；如果不是的話，再看float的值，如果float為none，display同設定值。如果float不是none或者元素為根元素的時候，調整diaplay的值。
  2.再看margin-collapse：兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊
• 對BFC規範(塊級格式化上下文：block formatting context)的理解？
  * BFC主要有這樣3個特性：*
  1.屬於不同BFC的元素不會發生margin-collapse
  2.BFC相當於一個隔離的盒子，不影響外部元素的佈局，外部元素也不會影響內部盒子的佈局。
  3.塊級格式化上下文不會重疊浮動元素，
  觸發BFC的條件：
  1.float不為none
  2.position為absolute/fixed的元素
  3.display為table/table-cell/table-caption/inline-block
  4.overflow不為visible
• 清除浮動的方式
  1.在浮動元素末尾新增一個空的標籤，設定 clear:both
  2.父元素設定overflow：hidden/auto
  3.利用after偽元素：這裡我們使用::after。新增一個類clear，在需要清除浮動時，只需要給父元素追加clear類即可

.clear::after { 
     content:""; 
     display:table; 
     clear:both;
}

• ::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
  雙冒號表示偽元素，單冒號表示偽類。
  ：:before將會在內容之前“新增”一個元素，而:：after將會在內容後“新增”一個元素。在它們之中新增內容我們可以使用content屬性

• 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？
  **多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
  **

• 有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

<div class="content">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
//絕對佈局
*{
    margin: 0;
    padding: 0;
}
.content{
    width: auto;
    height: 200px;//演示方便，所以設定了一個高度
    border: 5px solid #000;
    position: relative;
}
.top{
    height: 100px;
    background: red;
}
.bottom{
    position: absolute;
    top: 100px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: green;
}
//flex
    .content{
        display: flex;
        flex-flow: column wrap;
        border: 1px solid blue;
      }
      .top{
        height: 100px;
        background: red;
      }
      .bottom{
        background: green;
      }

• 什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
  因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie資料
• style標籤寫在body後與body前有什麼區別？
  寫在body後面會重新渲染