常見的佈局類問題及面經

時間  2019-11-15
標籤 常見的 佈局 問題 简体版
原文   原文鏈接

本身的地址
github.com/CodingMeUp/…css

按期更新面經P5 P6面經、歡迎star

左邊定寬、右邊自適應（相似管理臺）

  • 方案一 左邊設置左浮動，右邊寬度設置100% ()

    .left {
    float: left;
  }
  .right {
    width: 100%
  }複製代碼

  • 方案二 左設置左浮動、右邊也左浮動 可是使用calc去補寬度長度計算（方案一二沒有徹底分層）

    .left {
    float: left;
  }
  .right {
    width: calc(100vw-200px);
  }複製代碼
    -【分析】
  1. 浮動。（注意：爲了避免影響其餘元素，別忘了在父級上清除浮動）
  2. calc() = calc(四則運算) 用於在 css 中動態計算長度值，須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；
  3. vw： viewport width。1vw = viewport 寬度的 1%, 100vw = viewport width,
    一樣的還有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。
    瀏覽器支持狀況： 主流瀏覽器、IE10+
    vw 和 vh 會隨着viewport 的變化而變化，所以十分適合於自適應場景來使用。

  • 方案三 父容器設置 display：flex；right部分設置 flex：1

    .contain {
    display: flex
  }
  .right {
    flex: 1
  }複製代碼

  • 方案四 右邊div套個包裹、並前置、左及包裹 雙浮動左

    .contain{
   background: pink;
   float: left;
   width: 100%;
 }

 .left{
   height: 200px;
   width: 200px;
   float: left;
   margin-left: -100%;
   background: red;
 }

 .right {
   background: blue;
   height: 300px;
   margin-left: 200px;
 }複製代碼
    <div class="contain">
 <div class="right">
   rrr
 </div>
</div>
<div class="left">lll </div>複製代碼

    【分析】html

  1. 首先設置左邊部分和右邊部分左浮動，併爲自適應部分（Right）設置寬度100%。此時的效果是這樣的：
  2. 設置左邊部分左外邊距爲負100%，此時效果以下：
    可是右邊部分的寬度仍然爲100%，部份內容被 Left 所覆蓋。
  3. 爲 Right 部分添加左邊距（即 Left 部分的寬度）

總結

  • 關於左側寬度固定，右側寬度自適應兩列布局的一種很經常使用的方法我相信你們都知道。就是利用左側元素浮動，或者絕對定位的方式使其脫離常規文檔流，讓兩個塊級元素可以在同一行顯示。而後右側元素 margin-left 的值等於左側元素寬度，這時右側元素將緊挨着左側元素，因爲塊元素的寬度會自動默認充滿剩下的屏幕，因此就實現了右側自適應的效果了。
  • 第二種方法，我利用的是建立一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。它能夠經過如下任何一種方式來建立：
    float的值不爲none
    position的值不爲static或者relative
    display的值爲 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
    overflow的值不爲visible
    　　關於BFC，在w3c裏是這樣描述的：在BFC中，每一個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式化時，則爲右邊框緊挨）。即便在浮動裏也是這樣的（儘管一個包含塊的邊框會由於浮動而萎縮），除非這個包含塊的內部建立了一個新的BFC。

    這樣，當咱們給右側的元素單首創建一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。就像是箱子一個個排列 而不是疊上去

    <!DOCTYPE>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="test.css" type="text/css">
</head>
<style media="screen">
.one {
float: left;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
<body>
  <div class="one"></div>
  <div class="two">第二種方法</div>
</body>
</html>複製代碼

左右定寬 中間自適應

  • position（絕對定位法） center的div須要放在最後面
    絕對定位法原理是將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們上面，而後使用margin屬性，留出左右元素的寬度，既可使中間元素自適應屏幕寬度。git

    <div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center</div>
.left,.right{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #df8793;
  top:0;
}
.left{
  left:0px;
}
.right{
  right: 0px;
}
.center{
  margin: 0 210px;
  overflow: hidden;
  background-color: yellow;
  height: 200px;
}複製代碼

  • float：自身浮動法 center的div須要放在最後面
    自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。github

    <div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center</div>
.left,.right{
  width: 200px;
  height: 200px;
  background-color: #df8793;
}
.left{
  float: left;
}
.right{
  float: right;
}
.center{
  margin: 0 210px;
  overflow: hidden;
  background-color: yellow;
  height: 200px;
}複製代碼

  • 聖盃佈局
    聖盃佈局的原理是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div，包含div須要設置float屬性使其造成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值進行配合瀏覽器

<div class='wrap'>
    <div class='center'>center</div>
</div>
<div class='left'>left</div>
<div class='right'>right</div>

.wrap{
    width: 100%;    // .left  margin-left 同步
    float: left;
    height: 200px;
    background-color: #238978;
}
.center{
    margin: 0 210px;
}
.left{
    float: left;
    margin-left: -100%; // .wrap width同步
    width: 200px;
    height: 200px;
    background-color: #eee;
}
.right{
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 200px;
    background-color: #eee;
}複製代碼
  • flex佈局
    在外圍包裹一層div，設置爲display：flex；中間設置flex：1；可是盒模型默認牢牢挨着，可使用margin控制外邊距。
    <div class='wrap'>
  <div class='left'>left</div>
  <div class='center'>center</div>
  <div class='right'>right</div>
</div>
.wrap{
  display: flex;
}
.center{
  flex:1;
  margin: 0 10px;
  background-color: pink;
}
.left{
  width: 200px;
  height: 200px;
  background-color: #eee;
}
.right{
  width: 200px;
  height: 200px;
  background-color: #eee;
}複製代碼

水平居中

  • 行內元素的居中 (父元素 text-align: center ) 這樣子元素若是爲inline-block 就會居中
  • 塊狀元素居中 (塊狀無法用text-align)
    • 寬度必定： 咱們使用對該元素margin: auto來實現 或 margin: 20px auto 而且必定要設置寬度值width 一塊兒使用
      • 寬度不定 :
        1) 加table標籤設置 margin:0 auto 將須要進行居中的元素，用一個大表格將其圍起來（並且這個表格只有這一個單元格哦），而後設置表格的屬性（如第2條方法）居中就行。不過缺點是加了很多的無用標籤，代碼看起來比較臃腫。
        2) display: inline 設置text-align:center 居中的塊級元素的display屬性設置爲inline，這樣的目的是先把塊級元素變爲行內元素，能夠在一行內顯示，而後將這些元素的父級元素text-align設置爲：center便可。大概原理就是：塊級->行內->居中(參照第1條方法)，不過缺點也很明顯，塊級元素的一些特色沒有了，例如高度、寬度設置等。
        3) 運用float屬性，主要的思想也就是將所須要居中的元素先float到左邊，這樣就能在一行內顯示，而後將整個列表float到父元素左邊，而後設置left來設置居中。怎麼設置呢？先設置父元素：left:50%，這樣整個父元素就往右便宜50%，而後設置列表：right:50%，這樣列表的東西再往左走父元素的50%，這樣就達到了居中的目的 基本思想也就是將父元素（容器）先往右偏移父容器寬度的50%，而後再將列表的元素向左相對偏移50%，就能夠獲得居中的效果。

垂直居中

1) 固定高度bash

  • line-height + height 可是 固定高度，沒法實現兩行文本的垂直居中對齊
  • absolute 固定高度 沒法自適應內容 元素脫離文檔流
    <div class="container">Hello World！</div>複製代碼
    .container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
// 支持calc 
.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}複製代碼
  • 空標籤+float:left 
    <div class="space"></div>
<div class="container">
<div class="inner">
    hello world！
</div>
</div>複製代碼
    .space {
    float: left;
    height: 50%;
    margin-top: -150px;
}
.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}複製代碼

2) 高度自適應函數

  • CSS3裏使用transform裏的translate()的兩個百分比參數 若是兩個參數都爲百分比值，此時會基於自身寬度和高定進行移動。此函數移動的機制同position:relative類似
    <div class="container">Hello World！</div>
.container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); // 自身寬度和高度的一半
 border: 1px solid red;
}
優勢：無需定高度。高度隨內容自適應。
缺點：元素脫離文檔流。若是須要居中的元素已經在高度上超過了視口，那它的頂部會被視口裁切掉。複製代碼

  • 擺脫maigin 百分比靠父元素寬度的問題 50%加上translate負值並不能實現垂直居中佈局。 改用
    vh來作佈局

    <div class="container">Hello World！</div>

 .container {
     width: 300px;
     margin: 50vh auto 0;
     transform: translateY(-50%);
     border: 1px solid red;
 }複製代碼
  • flex佈局 
    <div class="container">
 <div class="inner">
     <p>hello world!</p>
 </div>
</div>複製代碼
    .container {
     display: flex;
     height: 100vh;
 }
 .inner {
     margin: auto;
 }複製代碼
    當咱們使父元素display: flex時，margin: auto不只能夠水平居中，也可以實現垂直居中。這是由於auto外邊距會平分水平或垂直方向上的額外空間。
    固然，也可使用justify-content: center來定義彈性項目主軸的對齊方式，align-items: center來定義彈性項目側軸的對齊方式。
    .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }複製代碼

  • 模擬表格 父display:table 子display: table-cell vertical-align: middlepost

    <div class="container">
  <div class="inner">
      hello world！
  </div>
</div>複製代碼
    .container {
      display: table;         /* 讓div以表格的形式渲染 */
      width: 100%;
      border: 1px solid red;
  }

  .inner {
      display: table-cell;    /* 讓子元素以表格的單元格形式渲染 */
      text-align: center;
      vertical-align: middle;
  }複製代碼
做者：渺渺惜雨懷_ 連接：https://juejin.im/post/5a1e2f246fb9a045186a7db2 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程