1. 程式人生 > >前端面試題答案整理之CSS

前端面試題答案整理之CSS

  • 介紹一下標準的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後面會重新渲染