CSS基礎面試題
1.盒模型寬度計算
1) offsetWidth = (內容寬度+內邊距padding+邊框border)
無外邊距margin
2) 想讓div的width = offsetWidth
設定:box-sizing:border-box;

2.margin縱向重疊問題

• 1).相鄰元素的margin-top和margin-bottom會發生重疊
• 2).空白內容的<p></p>也會發生重疊

3.margin負值的問題

• 1).margin-top和margin-left負值,元素向上,向左移動
• 2).margin-right負值,右側元素向左移動,自身不受影響
• 3).margin-bottom負值,下方元素上移,自身不受影響

4.BFC理解與應用

　　4.1 Bolck Format Context

• 塊級格式上下文
• 一塊獨立渲染區域,內部元素的渲染不會影響邊界以外的元素

　　4.2 形成BFC的常見條件

　　　　1. float不是none

　　　　2. position是absolute或fixed

　　　　3. overflow不是visible

　　　　4. display是flex或inline-block等

　　4.3 BFC常見應用

• 清除浮動

5.float佈局

• 聖盃佈局和雙飛翼佈局的目的

　　　　　　1)三欄佈局,中間一欄最先載入和渲染(內容最重要)

　　　　　　2)兩側內容固定,中間內容隨著寬度自適應

　　　　　　3)一般用於PC網頁

• 聖盃佈局和雙飛翼佈局的技術總結

　　　　　　1) .使用float佈局

　　　　　　2) .兩側使用margin負值,以便和中間內容橫向重疊

　　　　　　3) .防止中間內容被兩側覆蓋,

　　　　　　　　一個用padding留白(聖盃),

　　　　　　　　一個用margin留白(雙飛翼)

• 手寫clearfix

.clearfix:after{
     content:'';
     display:table;
     clear:both;            
}
 

<div id="container" class="clearfix">...</div>

<!-- 相容IE低版本-->

.clearfix{
     *zoom:1;
}

6.flex佈局

• 6.1 flex常用語法回顧

　　　　1) flex-direction:橫/縱向,主軸的對齊方向.

　　　　　　　　row（預設值）：主軸為水平方向，起點在左端

　　　　　　　　row-reverse：主軸為水平方向，起點在右端

　　　　　　　　column：主軸為垂直方向，起點在上沿

　　　　　　　　column-reverse：主軸為垂直方向，起點在下沿。

　　　　2) justify-content: 定義了專案在主軸上的對齊方向。

　　　　　　 　　flex-start：左對齊

　　　　　　　　　　flex-end：右對齊

　　　　　　　　　　center：居中對齊

　　　space-between：兩端對齊，專案之間間隔相等

　　　　　　　　　　space-around：每個專案兩側的間隔相等。

　　　　　　　　　　　　　　　　　　專案之間的間隔比專案與邊框的間隔大一倍。

　　　　3) align-items: 專案在交叉軸的對齊方式

　　　　　　flex-start：起點對齊

　　　　　　 　flex-end：終點對齊

　　　　　　　center：中點齊

　　　　 baseline：專案第一行的文字基線對齊

　　　　　　 　stretch：(預設值)如果專案未設定高度或設為auto，將佔滿整個容器的高度

　　　　4) flex-wrap: 換行

　　　　　　　　nowrap不換行

　　　　　　　　wrap換行，第一行在上方

　　　　　　　　wrap-reverse換行，第一行在下方


　　　　5) align-self: 子元素在交叉軸的對齊方式。

　　　　　　屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。

　　　　　　預設值為auto，表示繼承父元素的align-items屬性，

　　　　　　　　　　　　　　 如果沒有父元素，則等同於stretch。

　　　　　　auto | flex-start | flex-end | center | baseline | stretch;

• 6.2 示例:flex實現一個三點的色子

.box{
    display:flex;
    justify-content:space-between;/*兩端對齊*/
    width:200px;
    height:200px;
    border:2px solid #ccc;
    border-radius:10px;
    padding:20px;
}
.item{
    display:block;
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:#666;
}
.item:nth-child(2){
    align-self:center;/*第二項居中對齊*/
}
.item:nth-child(3){
    align-self:flex-end;/*第三項 尾對齊*/
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

*補充其他 .伺服器
　　安裝:npm install -g http-server
　　啟動:http-server -p 8881
　　http://127.0.0.1:8881
　　停止:Ctrl+C