前端一面之CSS篇

阿新 • • 發佈：2020-11-06

一、佈局相關

1.盒模型寬度計算

offsetWidth = （內容寬度 + 內邊框 + 邊框），無外邊距，通過設定box-sizing: border-box，使offsetWidth等於100px，否則是122px，如下：

  #div1 {
    width: 100px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
  }

2.margin縱向重疊的問題

相鄰元素的 margin-top 和 margin-bottom 會重疊
空白內容的<p></p>也會重疊

所以如下示例A和B之間的距離等於15px，即A的margin-bottom和B的margin-top發生重疊，空白亦重疊

<style>
  p {
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px; 
  }
</style>>
<body>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>

3.margin負值的問題，對margin的top left right bottom 設定負值，有何效果

margin-top 和 margin-left 負值，元素向上、向左移
margin-right 負值，右側元素左移，自身不受影響
margin-bottom 負值，下方元素上移，自身不收影響

4.BFC（Block format context）塊級格式化上下文的理解與應用

一塊獨立渲染區域，內部元素的渲染不會影響邊界以外的元素
BFC形成的常見條件：

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是flex inline-block等

常見的應用，如清除浮動：

<style 
>
  .container {
    background-color: #f1f1f1;
  }
  .left {
    float: left;
  }
  .bfc {
    overflow: hidden;/* 觸發元素 BfC */
  }
</style>
<div class="container bfc">
  <img class="left" src="assets/logo.png" alt="tt">
  <p class="bfc">某一段文字。。。</p>
</div>

5.float佈局，如何實現聖盃佈局和雙飛翼佈局、手寫 clearfix

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

三欄佈局，中間一欄最先載入和渲染（內容最重要）
兩側內容固定，中間內容隨著寬度自適應
一般用於PC網頁

<style type="text/css">
  /*以下實現聖盃佈局*/
  body {
    min-width: 550px;
  }
  #header {
    text-align: center;
    background-color: #f1f1f1;
  }
  #container {
    padding-left: 200px;
    padding-right: 150px;
  }
  #container .column {
    float: left;
  }
  #center {
    background-color: #ccc;
    width: 100%;
  }
  #left {
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -100%;
    right: 200px;
  }
  #right {
    background-color: red;
    width: 150px;
    margin-right: -150px;
  }
  #footer {
    text-align: center;
    background-color: #f1f1f1;
  }
  /* 手寫 clearfix */
  .clearfix:after {
    content: '';
    display: table;
    clear: both;
  }
</style>
<body>
  <div id="header">this is header</div>
  <div id="container" class="clearfix">
    <div id="center" class="column">this is center</div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>
  </div>
  <div id="footer">this is footer</div>
</body>

<style type="text/css">
  /* 以下實現雙飛翼佈局 */
  body {
    min-width: 550px;
  }
  .col {
    float: left;
  }
  #main {
    width: 100%;
    height: 200px;
    background-color: #ccc;
  }
  #main-wrap {
    margin: 0 190px 0 190px;
  }
  #left {
    width: 190px;
    height: 200px;
    background-color: #0000FF;
    margin-left: -100%;
  }
  #right {
    width: 190px;
    height: 200px;
    background-color: #FF0000;
    margin-left: -190px;
  }
</style>
<body>
  <div id="main" class="col">
    <div id="main-wrap">
      this is main
    </div>
  </div>
  <div id="left" class="col">
    this is left
  </div>
  <div id="right" class="col">
    this is right
  </div>
</body>

技術總結

使用 float 佈局
兩側使用margin 負值，以便和中間的內容橫向重疊
防止中間內容被兩側覆蓋，用padding或margin

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

float的特點

破壞了流式佈局，脫離文件流
塊級元素浮動後inline-block化，具有包裹性，使得元素兼併了塊元素和內聯元素的的優點，即浮動前是父元素的寬度100%，浮動後只有內容的寬度
（帶有浮動屬性的元素會脫離標準流進行排列布局，脫離標準流後的浮動元素漂浮在正常塊元素上面，但是依然佔據正常文件流的文字空間，使得後面的文字以除了浮動元素之外的空間為排列基準，形成了文字環繞的效果。）
當行級元素浮動後變成了塊級元素，即行級元素浮動後可以設定寬和高
當父元素未設定寬高時，父元素的所有子元素都浮動後，父元素會塌陷，且會對父元素後面的元素造成影響

清除浮動幾種方法

給父元素設定寬高
給父元素設定overflow:hidden（這會強制瀏覽器算父元素的高度）
利用clear屬性清除浮動
利用after偽元素星廚浮動，見clearfix手寫

6.flex佈局，實現一個三點的色子

常用語法回顧

flex-direction 主軸方向
justify-content 主軸對其方式
align-items 交叉軸對其方式
flex-wrap 是否換行
align-self 子元素在交叉軸中的對其方式

<style>
  /* flex 畫三個點的色子 */
  .box {
    display: flex; /* flex 佈局 */
    justify-content: space-between; /* 兩端對齊 */
  }
  .item {
     /* 背景色、大小、邊框等  */
  }
  .item:nth-child(2) {
    align-self: center; /* 第二項居中對齊 */
  }
  .item:nth-child(3) {
    align-self: flex-end; /* 第三項尾對齊 */
  }
</style>

二、定位

1.abolute 和 relative 分別依據什麼定位

relative 依據自身定位，absolute 依據最近一層的定位元素定位（absolute relative fixed 或 body）

2.居中對其有哪些實現方式

水平居中：

inline 元素： text-align: center
block 元素：margin: auto
absolute 元素：left:50% + margin-left 負值

垂直居中：

inline 元素： line-height 的值等於height值
absolute 元素： top:50% + margin-top 負值
absolute 元素：top:50%，left:50%， transform(-50%, -50%)
absolute 元素： top, left, bottom, right = 0 + margin:auto

三、CSS圖文樣式

1.line-height 如何繼承

寫具體數值，如 30px，則繼承該值
寫比例，如 2、1.5，則繼承該比例
寫百分比，如 200%，則繼承計算出來的值（考點：如下結果值為40px）

<style type="text/css">
  /* line-height 繼承問題 */
  body {
    font-size: 20px;
    line-height: 200%;
  }

  p {
    background-color: #ccc;
    font-size: 16px;
  }
</style>
<body>
  <p>這是一行文字</p>
</body>

四、CSS響應式

1.rem是什麼

rem 是一個長度單位

px，絕對長度單位，最常用
em，相對長度單位，相對於父元素，不常用
rem，相對長度單位，相對於根元素，常用語響應式佈局

2.響應式佈局的常用方案

miedia-query，根據不同的螢幕寬度設定根元素 font-size
rem，基於根元素的相對單位

<style type="text/css">
  /* 響應式佈局 */
  @media only screen and (max-width: 374px) {

    /* iphone5 或者更小的尺寸，以 iphone5 的寬度（320px）比例設定 font-size */
    html {
      font-size: 86px;
    }
  }

  @media only screen and (min-width: 375px) and (max-width: 413px) {

    /* iphone6/7/8 和 iphone x */
    html {
      font-size: 100px;
    }
  }

  @media only screen and (min-width: 414px) {

    /* iphone6p 或者更大的尺寸，以 iphone6p 的寬度（414px）比例設定 font-size */
    html {
      font-size: 110px;
    }
  }

  body {
    font-size: 0.16rem;
  }

  #div1 {
    width: 1rem;
    background-color: #ccc;
  }
</style>