前端知識點亂燉之一（HTML/CSS）

時間 2019-11-06

標籤前端知識之一 html css 欄目 HTML 简体版

原文原文鏈接

前面面試知識總結之HTML/css篇

1.行內元素、塊級元素和空（void）元素有哪些？

行內元素：a 、b、span、img、input、strong、select、label、em、button、textarea。css

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote。html

空元素(沒有內容的HTML元素): br、meta、hr、link、input、img。前端

2. css實現垂直水平居中的方法？

方法一：使用絕對定位+margin使其垂直水平居中；

<html>
<head>
<meta charset="utf-8">
<title>垂直水平居中</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>

.container{ 
    position:relative;
    height: 100vh;
}
.content{
        position: absolute;  
        width:200px;
        height:200px; 
        background-color:#26A9DF;    
        top: 50%;
        left: 50%;
        margin-top:-100px ;  
        margin-left: -100px;
}

方法二：使用絕對定位+css3 tansform轉換使其使其垂直水平居中；

.container{ 
    position:relative;
    height: 100vh;
    width:100%;
}
.content{
    position: absolute;
    width:200px;
    height:200px; 
    background-color:#26A9DF;  
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); 
}

方法三：使用flex佈局使其垂直水平居中；

html, body {
  height: 100%;
  margin: 0;
}
 
.container {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  margin: 0;
}
.content{
    width:200px;
    height:200px; 
    background-color:#26A9DF;  
}

方法四：使用flex佈局使其水平居中；

第一種方式：css3

.container{ 
  display: -webkit-flex;
  display: flex;
}
.content{
    width:200px;
    height:200px; 
    background-color:#26A9DF;  
    margin:auto;
}

第二種方式：web

.container{ 
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}
.content{
    width:200px;
    height:200px; 
    background-color:#26A9DF;  
}

方法四：使用table佈局水平居中元素；

.container{ 
  display: table;
  margin: 0 auto;
}
.content{
    width:200px;
    height:200px; 
    background-color:#26A9DF;  
}

3. em、px仍是%？

現在頁面功能變得愈來愈多，用來訪問頁面的設備愈來愈多，頁面的佈局就是一個頗具挑戰的事情，而頁面當中的元素的尺寸和字體、圖片的大小等也跟佈局息息相關。鑑於此，前端開發開始重視如何提升頁面佈局，核心思想是將頁面元素的尺寸和字體大小設置爲相對值。字體相對單位包括：em、ex、ch、rem。面試

（1）儘可能設置相對尺寸

所謂設置相對尺寸，並非說頁面總體的佈局是自適應的，總體的尺寸能夠是固定尺寸也能夠是自適應的尺寸，這取決於頁面的設計。瀏覽器

（2）只有在可預知元素尺寸的狀況下才使用絕對尺寸

好比設計上要求使用絕對寬度，好比總體寬度，側邊欄寬度，頁頭頁尾的高度固定等，在展現圖片、視頻的時候，合適的固定尺寸會讓這些多媒體元素展現得到最佳的效果。安全

（3）使用em設置字體大小

使用px設置字體大小的可擴展性很差，使用百分比設置字體大小也不符合習慣，最佳方式是使用em設置字體大小，但隨着字體設置的層級增多，這種方式反而增長了維護的成本，對於此，css3引入了rem單位，是相對於根元素的字體大小計算的，就避免了這個問題，目前除了IE8及如下，大部分瀏覽器都支持它。網絡

px的值是固定的，指定是多少就是多少，計算比較容易。ide

em的值不是固定的，而且em會繼承父級元素的字體大小。瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

rem是經過根元素進行適配的，網頁的中的根元素指的是html。網頁html設置根元素爲10px，那麼1rem=10px，12px = 1.2rem。

4.優雅降級與漸進加強？

要說這2個隨css3流傳開來的概念，首先得定義一個基準線，在此之上的加強爲漸進加強，在此之下的兼容爲優雅降序，這個基準線每個開發者根據需求都不同，主要是基於低版本的瀏覽器，這兒就覺得IE8瀏覽器舉例。

優雅降級（graceful degradation）：

是向下兼容，一開始就構建完整的功能，而後針對低版本瀏覽器進行兼容。一個簡單的示例是使用24位alpha-transparent png。這些圖像能顯示在現代瀏覽器是。IE5.5 IE6將顯示圖像,但透明效果會失敗(必要時它可使工做)。老的瀏覽器不支持PNG將顯示alt文本或一個空的空間。開發人員一般採用優雅降級指定瀏覽器支持的水平,如一級瀏覽器(最好的經驗)和二級瀏覽器(退化的經驗)。

漸進加強（progressive enhancement）:

‍‍漸進加強是一個網頁設計,強調戰略的可訪問性,語義HTML標記,和外部樣式表和腳本技術。漸進加強使用web技術以分層的方式,容許每一個人都訪問一個web頁面的基本內容和功能,使用任何瀏覽器或網絡鏈接,同時也提供了一個加強的頁面版本與更先進的瀏覽器軟件或更大的帶寬。漸進加強是向上兼容，簡單地說是針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的需求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。‍‍

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

下面有一個css3的例子：

.transition{
    -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s; 
}

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

參考資源：

前端亂燉- 《web前端最佳實踐》—高維護性css 做者：靈感_idea ；

伯樂在線- 2016年Web前端面試題目彙總做者：_燎原之火；

StackOverflow- What is the difference between Progressive Enhancement and Graceful Degradation?

CSDN-漸進加強、優雅降級做者：xiongzhengxiang

轉載時請註明：來自w-rain的我的博客