前端（一）CSS篇

時間  2019-11-17
標籤 前端 css 欄目 CSS 简体版
原文   原文鏈接

前言

本人是一名研究生，因爲準備實習和秋招，因此整理一下前端的基礎知識，幫助本身整理知識體系，理清知識點，系統的複習。css

CSS篇

一、盒模型

  • 由裏向外content,padding,border,marginhtml

  • 標準模型的寬高只是內容（content）的寬高：box-sizing：content-box前端

  • IE模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高：box-sizing：border-boxcss3

二、 css3有哪些僞類，僞類選擇器有哪些

這裏要區分一下僞類和僞元素的概念。根本區別在於它們是否創造了新的元素(抽象)。web

  • 僞類：用於向某些選擇器添加特殊的效果。例如，a標籤的:link, :visited, :hover, :active; 以及 :first-child, :last-child。瀏覽器

  • 僞元素：是html中不存在的元素，用於將特殊的效果添加到某些選擇器。例如:before,:after, :first-letter, :first-line。 css3只新增了一個僞元素 ::selection（改變用戶所選取部分的樣式）。bash

三、BFC（塊級格式化上下文）

BFC定義:

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。websocket

BFC佈局規則：

  • 內部的Box會在垂直方向，一個接一個地放置。
  • Box垂直方向的距離由margin決定。
  • 屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  • 每一個元素的margin box的左邊， 與包含塊border
  • box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
  • BFC的區域不會與float box重疊。
  • BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  • 計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC?

  • 根元素
  • float屬性不爲none
  • position爲absolute或fixed
  • display爲inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不爲visible

BFC的做用及原理

www.cnblogs.com/lhb25/p/ins…cookie

四、Flex 彈性盒佈局

CSS3彈性盒佈局的理解：

web應用有不一樣設備尺寸和分辨率，這時須要響應式界面設計來知足複雜的佈局需求，Flex彈性盒模型的優點在於開發人員只是聲明佈局應該具備的行爲，而不須要給出具體的實現方式，瀏覽器負責完成實際佈局。 當佈局涉及到不定寬度，分佈對齊的場景時，就要優先考慮彈性盒佈局。session

容器的屬性

  • 主軸的方向
flex-direction: row | row-reverse | column | column-reverse;
row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

複製代碼
  • 換行屬性
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

複製代碼
  • 主軸對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

複製代碼
  • 交叉軸對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

複製代碼
  • 項目的屬性

排列順序，數值越小，排列越靠前，默認爲0。

order: <integer>;
複製代碼

項目的放大比例,默認爲0，即若是存在剩餘空間，也不放大。

flex-grow: <number>; /* default 0 */
複製代碼

項目的縮小比例,默認爲1，即若是空間不足，該項目將縮小。

flex-shrink: <number>; /* default 1 */
複製代碼

項目佔據的空間,默認值爲auto，即項目的原本大小

flex-basis: <length> | auto; /* default auto */
複製代碼

簡寫：flex-grow, flex-shrink 和 flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
複製代碼

獨立的對齊方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;
複製代碼

五、水平垂直居中

貼上一位騰訊大佬總結的文章

16種方法實現水平居中垂直居中

按照固定寬高和不固定寬高分類各說幾個方法就能夠了。

  • 寬度和高度已知的
/* css */
#box{
    width: 400px;
    height: 200px;
    position: relative;
    background: red;
}
#box1{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
複製代碼
  • 寬度和高度未知
/* css */
 #box{
    width: 800px;
    height: 400px;
    position: relative;
    background: red;
}
#box1{
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
複製代碼
  • flex 佈局
/* css */
#box{
    width: 400px;
    height: 200px;
    background: #f99;
    display: flex;
    justify-content: center;//實現水平居中
    align-items: center;//實現垂直居中
}
#box1{
    width: 200px;
    height: 100px;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
複製代碼

-平移 定位+transform

/* css */
#box{
    width: 400px;
    height: 200px;
    background: red;
    position: relative;
}
#box1{
    width: 200px;
    height: 100px;
    background: #9ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
複製代碼
  • table-cell佈局
/* css */
#box{
    display: table-cell;
    vertical-align: middle
}
#box1{
    margin: 0 auto;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>

複製代碼

5.二、CSS居中佈局有哪些，適用於什麼場景，舉例說明？

  • 1）、CSS居中：margin設爲auto

    • 作法：把要居中的元素的margin-left和margin-right都設爲auto
    • 場景：只能進行水平的居中，且對浮動元素或絕對定位元素無效。

  • 2）、CSS居中：使用 text-align:center

    • 場景：只能對圖片，按鈕，文字等行內元素(display爲inline或inline-block等)進行水平居中。但要說明的是在IE六、7這兩個奇葩的瀏覽器中，它是能對任何元素進行水平居中的。

  • 3）、CSS居中：使用line-height讓單行的文字垂直居中

    • 作法：把文字的line-height設爲文字父容器的高度
    • 場景：適用於只有一行文字的狀況。

  • 4）、CSS居中：使用表格

    • 作法：td/th元素設置align="center"、valign="middle"便可處理單元格里面內容的水平和垂直居中問題
    • 場景：必須是table

  • 5）、CSS居中：使用display:table-cell來居中

    • 作法：經過display:table-cell模擬表格單元格，這樣就能夠利用表格那很方便的居中特性了。
    • 場景：IE六、IE7都無效。

  • 6）、CSS居中：使用絕對定位進行居中

    • 場景：只適用於寬度或高度已知的元素。
    • 原理：經過把這個絕對定位元素的left或top的屬性設爲50%,這個時候元素並非居中的，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，因此須要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。

  • 7）、CSS居中：使用絕對定位進行居中

    • 場景：只適用於寬度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c標準的現代瀏覽器。

    • 原理：這裏若是不定義元素的寬和高的話，那麼他的寬就會由left,right的值來決定，高會由top,bottom的值來決定，因此必需要設置元素的高和寬。同時若是改變left，right , top , bottom的值還能讓元素向某個方向偏移。

  • 8）、CSS居中：使用浮動配合相對定位來進行水平居中

    • 場景：不用知道要居中的元素的寬度，缺點是須要一個多餘的元素來包裹要居中的元素。

    • 原理：把浮動元素相對定位到父元素寬度50%的地方，但這個時候元素還不是居中的，而是比居中的那個位置多出了自身一半的寬度，這時就須要他裏面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，而由於相對定位正是相對於自身來定位的，因此自身一半的寬度只要把left 或 right 設爲50%就能夠獲得了，於是不用知道自身的實際寬度是多少。

六、三欄佈局

6.一、高度已知，左右兩欄固定，中間自適應的三欄佈局有幾種實現方式，各自的優缺點是什麼？

/* 浮動佈局 */
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
複製代碼
/* 絕對定位佈局 */
 .layout.absolute .left-center-right>div{
  position: absolute;
 }
.layout.absolute .left{
  left:0;
  width: 300px;
  background: red;
}
.layout.absolute .center{
  left: 300px;
  right: 300px;
  background: yellow;
}
.layout.absolute .right{
  right:0;
  width: 300px;
  background: blue;
}
複製代碼
/* flex佈局 */
  .layout.flexbox{
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex:1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }

複製代碼

6.二、聖盃佈局

  • ① 特色

    比較特殊的三欄佈局，一樣也是兩邊固定寬度，中間自適應，惟一區別是dom結構必須是先寫中間列部分，這樣實現中間列能夠優先加載。

<article class="container">
    <div class="center">
      <h2>聖盃佈局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

複製代碼
.container {
    padding-left: 220px;//爲左右欄騰出空間
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

複製代碼

  • ② 實現步驟

    • 三個部分都設定爲左浮動，不然左右兩邊內容上不去，就不可能與中間列同一行。而後設置center的寬度爲100%(實現中間列內容自適應)，此時，left和right部分會跳到下一行

    • 經過設置margin-left爲負值讓left和right部分回到與center部分同一行

    • 經過設置父容器的padding-left和padding-right，讓左右兩邊留出間隙。

    • 經過設置相對定位，讓left和right部分移動到兩邊。

- ③ 缺點

center部分的最小寬度不能小於left部分的寬度，不然會left部分掉到下一行

若是其中一列內容高度拉長(以下圖)，其餘兩列的背景並不會自動填充。(藉助等高佈局正padding+負margin可解決，下文會介紹)

6.三、雙飛翼佈局

  • ① 特色

一樣也是三欄佈局，在聖盃佈局基礎上進一步優化，解決了聖盃佈局錯亂問題，實現了內容與佈局的分離。並且任何一欄均可以是最高欄，不會出問題。

<article class="container">
        <div class="center">
            <div class="inner">雙飛翼佈局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

複製代碼
.container {
        min-width: 600px;//確保中間內容能夠顯示出來，兩倍left寬+right寬
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

複製代碼
  • ② 實現步驟(前兩步與聖盃佈局同樣)

三個部分都設定爲左浮動，而後設置center的寬度爲100%，此時，left和right部分會跳到下一行； 經過設置margin-left爲負值讓left和right部分回到與center部分同一行； center部分增長一個內層div，並設margin: 0 200px；

  • ③ 缺點

多加一層 dom 樹節點，增長渲染樹生成的計算量。

  • 兩種佈局實現方式對比:

    • 兩種佈局方式都是把主列放在文檔流最前面，使主列優先加載。
    • 兩種佈局方式在實現上也有相同之處，都是讓三列浮動，而後經過負外邊距造成三列布局。
    • 兩種佈局方式的不一樣之處在於如何處理中間主列的位置：
    • 聖盃佈局是利用父容器的左、右內邊距+兩個從列相對定位；
    • 雙飛翼佈局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行佈局調整

5.三、左右等高佈局

table 佈局就登場了

section {
    width:100%;
  display: table;
}
article  {
    display: table-cell;
}
.left {
    height: 100px;
    background: red;
}
.right {
    background: black;
}

複製代碼

七、移動端粘連佈局

  • 1）.特色

    • 有一塊內容<main>，當<main>的高康足夠長的時候，緊跟在<main>後面的元素<footer>會跟在<main>元素的後面。

    • 當<main>元素比較短的時候(好比小於屏幕的高度),咱們指望這個<footer>元素可以「粘連」在屏幕的底部

<div id="wrap">
      <div class="main">
        main <br />
        main <br />
        main <br />
      </div>
    </div>
    <div id="footer">footer</div>

複製代碼
* {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一層層繼承下來
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

複製代碼
  • 2）.實現步驟
    • (1)footer必須是一個獨立的結構，與wrap沒有任何嵌套關係
    • (2)wrap區域的高度經過設置min-height，變爲視口高度
    • (3)footer要使用margin爲負來肯定本身的位置
    • (4)在main區域須要設置padding-bottom。這也是爲了防止負 margin 致使 footer 覆蓋任何實際內容。

八、響應式佈局，怎麼作移動端適配

8.一、meta viewport：讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。

移動端適配方案：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製代碼
width=device-width: 讓當前viewport寬度等於設備的寬度

user-scalable=no: 禁止用戶縮放

initial-scale=1.0: 設置頁面的初始縮放值爲不縮放

maximum-scale=1.0: 容許用戶的最大縮放值爲1.0

minimum-scale=1.0: 容許用戶的最小縮放值爲1.0

複製代碼

8.二、媒體查詢（響應式)佈局

移動端優先首先使用的是min-width，PC端優先使用的max-width。

移動優先：

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

複製代碼

PC優先：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

複製代碼

8.三、rem佈局

rem 佈局的本質是等比縮放,rem和em單位同樣，都是一個相對單位，不一樣的是em是相對於父元素的font-size進行計算，rem是相對於根元素html的font-size進行計算的，這樣一來rem就完美的繞開了複雜的層級關係，實現了相似em單位的功能。默認狀況下，瀏覽器給的字體大小是16px，按照轉化關係16px = 1rem。

rem響應式的佈局思想：

  • 通常不要給元素設置具體的寬度，可是對於一些小圖標能夠設定具體寬度值
  • 高度值能夠設置固定值，設計稿有多大，咱們就嚴格有多大
  • 全部設置的固定值都用rem作單位（首先在HTML總設置一個基準值：px和rem的對應比例，而後在效果圖上獲取px值，佈局的時候轉化爲rem值)
  • js獲取真實屏幕的寬度，讓其除以設計稿的寬度，算出比例，把以前的基準值按照比例進行從新的設定，這樣項目就能夠在移動端自適應了

rem佈局的缺點：

在響應式佈局中，必須經過js來動態控制`根元素font-size`的大小，也就是說css樣式和js代碼有必定的耦合性，且必須將改變font-size的代碼放在css樣式以前
複製代碼
/*上述代碼中將視圖容器分爲10份，font-size用十分之一的寬度來表示，最後在header標籤中執行這段代碼，就能夠動態定義font-size的大小，從而1rem在不一樣的視覺容器中表示不一樣的大小，用rem固定單位能夠實現不一樣容器內佈局的自適應。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

複製代碼
/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

複製代碼

8.四、響應式佈局的特色

在實際項目中，咱們可能須要綜合上面的方案，好比用rem來作字體的適配，用srcset來作圖片的響應式，寬度能夠用rem，flex，柵格系統等來實現響應式，而後可能還須要利用媒體查詢來做爲響應式佈局的基礎，所以綜合上面的實現方案，項目中實現響應式佈局須要注意下面幾點：

  • 設置viewport
  • 媒體查詢
  • 字體的適配（字體單位）
  • 百分比佈局
  • 圖片的適配（圖片的響應式）
  • 結合flex，grid，BFC，柵格系統等已經成型的方案

參考： 移動端是怎麼作適配的？

九、 如何實現一個最大的正方形

用 padding-bottom 撐開邊距就能夠了。

section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

複製代碼

十、如何實現一個三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
複製代碼

十一、如何實現一個扇形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
    .sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <div class="sector"></div>
</body>

</html>


複製代碼

十二、css解析順序

css 選擇器匹配元素是逆向解析
複製代碼
  • 由於全部樣式規則可能數量很大，並且絕大多數不會匹配到當前的 DOM 元素（由於數量很大因此通常會創建規則索引樹），因此有一個快速的方法來判斷「這個 selector 不匹配當前元素」就是極其重要的。
  • 若是正向解析，例如「div div p em」，咱們首先就要檢查當前元素到 html 的整條路徑，找到最上層的 div，再往下找，若是遇到不匹配就必須回到最上層那個div，往下再去匹配選擇器中的第一個div，回溯若干次才能肯定匹配與否，效率很低。
  • 逆向匹配則不一樣，若是當前的 DOM 元素是 div，而不是 selector 最後的 em，那隻要一步就能排除。只有在匹配時，纔會不斷向上找父節點進行驗證。

1三、css 如何開啓 gpu 加速

請參考網易雲社區的文章 CSS動畫的性能分析和瀏覽器GPU加速

1四、清除浮動

經常使用的通常爲三種 .clearfix, clear:both, overflow:hidden;

比較好是 .clearfix,僞元素萬金油版本...後二者有侷限性..等會再扯

.clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
    
    
<!--
爲毛沒有 zoom ,_height 這些...IE6,7這類須要 csshack 再也不咱們考慮以內了
.clearfix 還有另一種寫法...
-->

.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}

<!--
用display:table 是爲了不外邊距margin重疊致使的margin塌陷,
內部元素默認會成爲 table-cell 單元格的形式
-->
複製代碼

clear:both:如果用在同一個容器內相鄰元素上,那是賊好的...有時候在容器外就有些問題了, 好比相鄰容器的包裹層元素塌陷

overflow:hidden:這種如果用在同個容器內,能夠造成 BFC避免浮動形成的元素塌陷

1五、css動畫

CSS 中transition和animate有何區別? animate 如何停留在最後一幀?

  • transition通常用來作過渡的, 沒時間軸的概念, 經過事件觸發(一次),沒中間狀態(只有開始和結束)
  • animate則是作動效,有時間軸的概念(幀可控),能夠重複觸發和有中間狀態; 過渡的開銷比動效小,前者通常用於交互居多,後者用於活動頁居多;
  • 至於如何讓animate停留在最後一幀也好辦,就它自身參數的一個值就能夠了
animation-fill-mode: forwards;  
<!--backwards則停留在首幀,both是輪流-->

複製代碼

動畫例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box-sizing</title>
  <style>
    .test {
      box-sizing: border-box;
      border: 5px solid #f00;
      padding: 5px;
      width: 100px;
      height: 100px;
      position:absolute;
      /*
      簡寫的姿式排序
      @keyframes name : 動畫名
      duration 持續時間
      timing-function 動畫頻率
      delay 延遲多久開始
      iteration-count 循環次數
      direction 動畫方式,往返仍是正向
      fill-mode  通常用來處理停留在某一幀
      play-state running 開始,paused 暫停 ....
       更多的參數去查文檔吧..我就不一一列舉了
      */
      animation: moveChangeColor  ease-in 2.5s 1  forwards running;
    }

    @keyframes moveChangeColor {
       from {
         top:0%;
         left:5%;
         background-color:#f00
       }
       to{
         top:0%;
         left:50%;
         background-color:#ced;
       }
    }

  </style>
</head>

<body>
  <div class="test"></div>
</body>

</html>

複製代碼

1六、css選擇器

  • 通用選擇器：*
  • 類別選擇器：.class
  • id選擇器：#id
  • 標籤選擇器：p
  • 後代選擇器：div p
  • 子選擇器：div > p
  • 羣組選擇器：div , p
  • 相鄰同胞選擇器：div +p
  • 僞類選擇器：:link :visited :active :hover :focus :first-child
  • 僞元素選擇器：:first-letter :first-line:before :after :lang(language)
  • 屬性選擇器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

1七、CSS 有哪些樣式能夠給子元素繼承

可繼承：

  • 字體相關：line-height, font-family, font-size, font-style, font-variant, font-weight, font
  • 文本相關：letter-spacing, text-align, text-indent, text-transform, word-spacing
  • 列表相關：list-style-image, list-style-position, list-style-type, list-style 顏色：color

不可繼承的通常是會改變盒子模型的:display,margin、border、padding、height等

1八、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 行內: input,span,a,img以及display:inline的元素
  • 塊級: p,div,header,footer,aside,article,ul以及display:block這些
  • void: br,hr

1九、position的值， relative和absolute分別是相對於誰進行定位的？

-absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

  • fixed（老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame進行定位。

-relative生成相對定位的元素，相對於其在普通流中的位置進行定位。

  • static 默認值。沒有定位，元素出如今正常的流中

  • sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

20、CSS3有哪些新特性？

  • （1）邊框：
border-radius：圓角邊框，border-radius:25px;

box-shadow：邊框陰影，box-shadow: 10px 10px 5px #888888;

border-image：邊框圖片，border-image:url(border.png) 30 30 round;
複製代碼
  • （2）背景：
background-size：規定背景圖片的尺寸，background-size:63px 100px;

background-origin：規定背景圖片的定位區域，背景圖片能夠放置於 content-box、padding-box 
或 border-box 區域。background-origin:content-box;

CSS3 容許您爲元素使用多個背景圖像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
複製代碼
  • （3）文本效果：
text-shadow：向文本應用陰影，能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。
text-shadow: 5px 5px 5px #FF0000;

word-wrap：容許文本進行換行。word-wrap:break-word;
複製代碼
  • （4）字體：CSS3 @font-face 規則能夠自定義字體。
  • （5）2D 轉換（transform）
translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數。
transform: translate(50px,100px);

rotate()：元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。
transform: rotate(30deg);

scale()：元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數。
transform:scale(2,4);

skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數。
transform: skew(30deg,20deg);

matrix()： 把全部 2D  轉換方法組合在一塊兒，須要六個參數，包含數學函數，
容許您：旋轉、縮放、移動以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

複製代碼
  • （6）3D 轉換
rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform: rotateX(120deg);

rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform: rotateY(130deg);
複製代碼

  • （7）transition：過渡效果，使頁面變化更平滑

  • （8）animation：動畫 使用CSS3 @keyframes 規則。

  • border-image

新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別以下：

  • content-box（默認）

佈局所佔寬度Width：

Width = width + padding-left + padding-right + border-left + border-right
複製代碼

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom
複製代碼
  • padding-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom
複製代碼

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
複製代碼
  • border-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)
複製代碼

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
複製代碼

2一、css3的新特性transform,transition,animation

1、transform

css3引入了一些能夠對網頁元素進行變換的屬性，好比旋轉，縮放，移動，或者沿着水平或者垂直方向扭曲（斜切變換）等等。這些的基礎都是transform屬性

transform屬性有一項奇怪的特性，就是它們對於其周圍的元素不會產生影響。換句話說，若是將一個元素旋轉45度，它其實是重疊在元素的上方，下方或者旁邊。而不會移動其周圍的內容。
複製代碼

  • 旋轉：transform:rotate(-45deg);

  • 縮放：transform:scale(.5);scaleX(2);scaleY(3)。若是給了負值，可以達到翻轉的效果：scaleX(-1)

  • 移動：transform:translate(1px,2px).使用其餘單位：em,%也是能夠的。

  • 傾斜：transform:skew(45deg,0);

固然，以上多個tranform的屬性能夠結合使用；

transform-origin:通常來講，當對一個元素使用transform時，web瀏覽器就會以元素的中心點做爲變黃點。該屬性能夠指定變換點，能夠提供關鍵字，以pixel爲單位的絕對值，以及em,%等等。

2、transition

transition能夠實現動態效果，其實是必定時間以內，一組css屬性變換到另外一組屬性的動畫展現過程。

爲了使transition生效，須要作這麼幾件事：
【1】兩個樣式：一個是最初的樣式，一個是最終的樣式，transition能夠實現這兩種演示見的轉換過程。

【2】transition屬性:
複製代碼

transition使用4個屬性控制：

  • 要以動畫展現哪些屬性（transition-property）:可使用all關鍵字

  • 動畫過程有多久(transition--duration),

  • 控制動畫速度變化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，貝塞爾曲線等），

  • 動畫是否延遲執行（transition-delay）等

可使用快捷方法來定義上述屬性：

.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc; 
}

複製代碼

通常來講，將transition屬性應用到最初的樣式裏，而不是放在結束的樣式裏，即定義動畫開始以前的元素外觀的樣式。只須要給元素設置一次transition，瀏覽器就會負責以動畫展現從一個樣式到另外一個樣式，再返回最初樣式的變化過程。

不過，在使用css下拉菜單的時候，有一個技巧，爲了防止鼠標離開菜單的時候，菜單很快消失，能夠利用transition-delay讓元素很快顯示，可是慢慢消失，作法是，在初始樣式中添加以下代碼：

transition-dealy:.5s
在：hover中不要添加延遲：

transition-delay:0
複製代碼
【3】觸發器：經常使用的觸發器是幾個僞類，`:active,:target,:focus`，也能夠是先後兩個類的改變。
複製代碼

3、animation

transition只能從一組css屬性變成另外一組css屬性。animation則能夠在多組屬性之間變換。

transition必須使用觸發器觸發，animation可使用觸發器，也能夠在頁面加載完成的時候自動觸發。

建立動畫有兩個步驟：
1）.定義動畫：主要指定義關鍵幀
複製代碼
@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}
複製代碼
2）.將動畫應用到元素上
複製代碼

可使用一下css屬性定義動畫：

.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
    animation-delay:.5s;
    animation-iteration-count:infinite;  
    animation-direction:alternate
}

複製代碼
  • animation-name:和當初定義的動畫名稱相對應；
  • animation-duration：動畫執行一次持續的時長； -animation-timing-function：動畫速率變化函數；
  • animation-delay：動畫延遲執行的時間長度；
  • animation-iteration-count：動畫執行的次數，能夠是數字，或者關鍵字：infinate(無限運行)；
  • animation-direction:alternate; - alternate(奇數次超前運行，偶數次後退運行).如但願動畫從黃色到藍色，而且再重複一次，使用alternate關鍵字就可以防止從藍色突變爲黃色
  • animation-fill-mode:告訴瀏覽器將元素的格式保持爲動畫結束時候的樣子。

2二、HTML5增長哪些新特性？

  • HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

  • 拖拽釋放(Drag and drop) API

  • 語義化更好的內容標籤（header,nav,footer,aside,article,section）

  • 音頻、視頻API(audio,video)

  • 畫布(Canvas) API

  • 地理(Geolocation) API

  • 本地離線存儲 localStorage長期存儲數據，瀏覽器關閉後數據不丟失；

  • sessionStorage 的數據在瀏覽器關閉後自動刪除

  • 表單控件，calendar、date、time、email、url、search

  • 新的技術webworker, websocket, Geolocation

2三、瀏覽器渲染過程是怎樣的？

  • HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
  • 在佈局階段，把DOM Tree和CSS Rule Tree通過整合生成Render Tree
  • 元素按照算出來的規則，把元素放到它該出現的位置，經過顯卡畫到屏幕上

2四、重排（Reflow）是什麼？

定義：DOM中各個元素都有本身的盒子模型，須要瀏覽器根據樣式進行計算，並根據計算結果將元素放到特定位置，這就是Reflow

觸發Reflow的條件：
複製代碼
  • 增、刪、改、移DOM
  • 修改CSS樣式
  • Resize窗口
  • 頁面滾動
  • 修改網頁的默認字體

2五、重繪（Repaint）是什麼？

定義：當各類盒子的位置、大小以及其餘屬性改變時，瀏覽器須要把這些元素都按照各自的特性繪製一遍，這個過程稱爲Repaint。

觸發Repaint的條件：
複製代碼
  • DOM改動
  • CSS改動

2六、如何減小重繪、避免重排？

本質上，就是合併修改。具體的措施有：

  • DOM層面：DocumentFragment本質上是一個佔位符，真正插入頁面的是它的全部子孫節點，因此，將須要變更的DOM節點先彙總到DocumentFragment，而後一次性插入，能夠減小DOM操做的次數。
  • CSS層面：操做多個樣式時，能夠先彙總到一個類中，而後一次性修改

2七、saas和less不一樣於普通css的地方

  • 定義變量，能夠把反覆使用的css屬性值定義成變量，而後經過變量名來引用它們，而無需重複書寫這一屬性值；
  • 嵌套寫法，父子關係一目瞭然；
  • 使用運算符，能夠進行樣式的計算；
  • 內置一些顏色處理函數用來對顏色值進行處理，例如加亮、變暗、顏色梯度等；
  • 繼承：爲多個元素定義相一樣式的時候，咱們能夠考慮使用繼承的作法；
  • Mixins （混入）：有點像是函數或者是宏，當某段CSS常常須要在多個元素中使用時，能夠爲這些共用的 CSS 定義一個Mixin，而後只須要在須要引用這些 CSS 地方調用該 Mixin 便可。

2八、meta標籤

meta標籤：提供給頁面的一些元信息（名稱/值對）， 好比針對搜索引擎和更新頻度的描述和關鍵詞。

name：名稱/值對中的名稱。經常使用的有author、description、keywords、generator、revised、others。 
把 content 屬性關聯到一個名稱。

http-equiv：沒有name時，會採用這個屬性的值。經常使用的有content-type、expires、refresh、set-cookie。把content屬性關聯到http頭部。

content： 名稱/值對中的值， 能夠是任何有效的字符串。 始終要和 name 屬性或 http-equiv 屬性一塊兒使用。

scheme： 用於指定要用來翻譯屬性值的方案。
複製代碼

2九、1. Xhtml和html的區別

  • XHTML 元素必須被正確地嵌套。
  • XHTML 元素必須被關閉。
  • 標籤名必須用小寫字母。
  • XHTML 文檔必須擁有根元素。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程