面試題中常見的佈局類問題總結

時間 2019-12-17

標籤面試題中常見的佈局問題總結欄目快樂工作简体版

原文原文鏈接

雙飛翼佈局，聖盃佈局

主要是margin爲負數的應用

負邊距的使用；

影響文檔流位置：會使它們在文檔流中的位置發生偏移，相對定位是原來的位子還在，可是影子不見了；負邊距則是本身的位置也被移動了；

影響文檔流寬度：若是元素沒有定寬，元素的寬度將會被增長；

影響浮動元素位置：好比說下面：

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
#div1 { background-color: red; width: 100%; float: left; } #div2 { background-color: blue; float: left; margin-left: -100%; } #div3 { background-color: yellow; float: left; margin-left: -60px; }

margin - left : -100% 被向左移動了父元素的寬度那麼長的距離；直接移到了上一行的那個位置，

margin - left: 60px (他本身的寬度)，向左移動了本身的寬度那麼長的距離，上一行從右邊開始減去60px的位置；

因此雙飛翼佈局，聖盃佈局的原理：

雙飛翼佈局：middle的div裏又插入一個div，經過調整內部div的margin值不被蓋住；

聖盃佈局 ： container 是細腰，因此經過margin 複製調整到一行中後，咱們能夠經過position： relative 來不讓他們蓋住；

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
 <style> .container{ padding-right: 40px; padding-left: 40px; background-color: gray; height: 400px ; } .main { background-color: red; width: 100%; float: left; height: 100%; } .left { background-color: blue; width: 40px; float: left; height: 100%; margin-left: -100%; position: relative; left: -40px; } .right { background-color: yellow; width: 40px; float: left; height: 100%; margin-left: -40px; position: relative; right: -40px; } </style></head><body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div></body></html>

負邊距對絕對定位的影響：絕對定位的元素如何居中對齊的解決方案的原理；

margin / padding 百分比是什麼的值？

padding/margin取形式爲百分比的值時，不管是left/right，仍是top/bottom，都是以父元素的width爲參照物的

border 百分比是什麼的值？

border 的值不支持百分比；

background-color 的覆蓋範圍

到 border的地方，包含content 和 padding;

今日頭條一面面試題：用css 畫一個正方形：

1. 使用vw ,vh 的單位；

2. 使用padding-bottom 的百分比是元素的寬度，同時設置height : 0 防止元素被撐開；

3. 使用父盒子的僞元素，margin-top爲100%　來撐開，可是僞元素會和父元素margin 重疊，因此在父盒子上面觸發 BFC 就能夠了；

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
 .test { width: 200px; background-color: red; overflow:hidden; // 觸發 BFC } .test::after { margin-top: 100%; //經過兒子的margin-top 來撐開父親的高度，利用了margin百分比是父元素寬度 content: ''; // 僞元素的content 仍是不能少 display: block; }

vertical-align在什麼狀況下會起做用？

只有一個元素屬於 inline或是 inline-block（table-cell也能夠理解爲inline-block水平），其身上的vertical-align屬性纔會起做用，好比說：圖片，按鈕，單複選框，單行/多行文本框

vertical-align 和 line-height 有基友的關係，vertical的百分比就是基於 line-height的:

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
{ line-height: 30px; vertical-align: -10%;}

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ }

對於內聯元素，vertical-align與line-height雖然看不見，但實際上「處處都是」

line-height 的做用：

   
   
   
   
    
    
    
    
   
   
   
   
有一個空的div，<div></div>，若是沒有設置至少大於1像素高度height值時，該div的高度就是個0。若是該div裏面打入了一個空格或是文字，則此div就會有一個高度。那麼您思考過沒有，爲何div裏面有文字後就會有高度呢？ 不是文字撐開了div的高度，而是line-height

首先，行內元素一行就會有一個行框，裏面有上，下邊距，加上文本高度；在文本高度裏面，有頂，中，基，底四個線。而基線之間的距離就是line-height的高度。

若是一段文本的高度爲16px，若是給他設置line-height的高度爲200，那麼至關於，文本的上下間距的高度增長了，可是文本自己的高度依然是16是不變的，而且一直默認在行框中垂直居中，而上間距和下間距平分了200px的高度而且減去文本自己的高度。因此，容器被這一行文本佔滿，而自己文字在本身的一行中是垂直居中的，因此看起來就像是在容器中垂直居中。

水平居中：

1. 行內元素，父元素 text-align : center
2. 塊級元素有定寬，margin:0 auto;

3. 塊級元素絕對定位，transform : translate（-50%，0）；

4. 塊級元素絕對定位，而且知道寬度， margin-left: - 寬度的一半

5. 塊級元素絕對定位，left:0; right:0; margin:0 auto

垂直居中

1. 若元素是單行文本, 則可設置 line-height 等於父元素高度，原理見上面；
2. 若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和一個僞元素讓內容塊處於容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }

3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;

4. 絕對定位的塊用 transform: translate(0, -50%)

5. 絕對定位，而且有定高， margin-top : -高度的一半注意不要用 margin-bottom, 不會生效的

6. 設置父元素相對定位(position:relative), 子元素以下css樣式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }

null