HTML/CSS 面試題總結
1.css垂直水平居中：
-
有寬高的狀況下水平於垂直居中？css
-
使用position 進行定位。left 與 top 值 爲 50% margin：-50%；->沒有兼容性問題html
-
文字元素使用text-align:center; linheight = 盒子高度 -> 沒有兼容性問題jquery
-
-
沒有寬高的元素實現水平與垂直居中?webpack
-
使用彈性盒佈局 display:flex; justify-content:center;align-item:center;（適用於內層多元素-> IE9以上瀏覽器支持，需添加前綴web
-
外層建立兩個包裹 -> 最外層 display:table; 內層元素 display:table-cell;vertical-align:middle; 內層元素全部的元素實現垂直居中(適用於內層多元素)-> 沒有兼容性問題，無需添加前綴chrome
-
使用position進行定位，left top bottom right 均爲 0 margin-auto -> 沒有瀏覽器兼容性問題element-ui
-
2.移動端經常使用佈局：
一、固定佈局（通常進行其餘佈局的配合使用）bootstrap
- heade標籤內建立meta標籤，定義viewport進行視口設置
複製代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
複製代碼
二、流式佈局windows
- 流式佈局與固定寬度佈局基本不一樣點就在於對網站尺寸的測量單位不一樣，流式佈局就是使用百分比來代替px做爲單位。 優勢是流動佈局能夠很好解決自適應需求。缺點是不夠靈活，添加元素時，須要更改其餘元素的值。
複製代碼
三、柵格化佈局 表明框架 bootstrap -> 12等分元素寬度/element-ui -> 24等分元素寬度瀏覽器
- 柵格系統能夠實現響應式的移動端佈局。柵格系統：Bootstrap中定義了一套響應式的網格系統，其使用方式就是將一個容器劃分紅12列，而後經過col-xx-xx的類名控制每一列的佔比， 在使用的時候，咱們給相應的div設置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成佈局。
複製代碼
四、媒體查詢+REM佈局
- 使用媒體查詢能夠根據不一樣的設備寬度加載不一樣的css樣式。rem是一個相對單位，會根據根節點的字體大小來計算的，使用媒體查詢和rem能夠實現移動端的響應式。
rem相對於HTML的字體大小進行調整 相對單位還有em em相對於最近的有設置的的父元素的字體大小進行設置；vw/vh 相對於當前的瀏覽器窗口大小進行設置 1vw = 百分之一瀏覽器窗口大小
複製代碼
五、flex佈局
- Flexbox是CSS3引入的新的佈局模式，也稱爲彈性佈局，他會根據頁面的剩餘寬度自動分配空間。 它決定了元素如何在頁面上排列，使它們能在不一樣的屏幕尺寸和設備下可預測地展示出來。它可以擴展和收縮 flex 容器內的元素， 以最大限度地填充可用空間。Flexbox佈局最適合應用程序的組件和小規模的佈局，而網格佈局更適合那些更大規模的佈局
1）父容器相關屬性
flex-direction flex-wrap flex-flow justify-content align-items align-content
2）子容器相關屬性
order ->排列順序 flex-grow -> 放大比列 flex-shrink ->縮小比例 flex-basis -> 主軸空間 flex -> 前三個值的簡寫 align-self 元素再集合中的排列方式 覆蓋父元素的align-item
複製代碼
3.如何處理瀏覽器兼容問題：
一、咱們項目上要是作的時候 全局的reset.css => 處理瀏覽器的默認樣式，添加樣式的私有前綴，行內樣式style屬性使用建立的js插件進行私有前綴的添加；
- 私有前綴添加JS插件封裝：
複製代碼
let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
// prefixStyle('transform')
// 'webkitTransform'
複製代碼
二、最先的時候爲了兼容IE瀏覽器，使用 CSS 的hack 條件hack 屬性hack 選擇器hack filter 濾鏡處理透明度 -> 只是瞭解
三、js的兼容處理 ，DOMBOM操做能夠藉助jquery類庫 兼容了IE8瀏覽器 1.幾的版本兼容IE瀏覽器 使用構建工具webpack + 相關loader 進行 CSS文件及JS文件的兼容性語法轉移 如 post-css/css-loader/babel 等進行轉碼
4.css 的權重等級劃分
CSS權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。
權重的等級
- !important，加在樣式屬性值後，權重值爲 10000
- 內聯樣式，如：style=」」，權重值爲1000
- ID選擇器，如：#content，權重值爲100
- 類，僞類和屬性選擇器，如： content、:hover 權重值爲10
- 標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1
- 通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0
實例：
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">這是一個div元素</div>
<!--
兩條樣式同時做用一個div，上面的樣式權重值爲10000+1，下面的行間樣式的權重值爲1000，
因此文字的最終顏色爲red
-->
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>這是一個h2標題</h2>
</div>
</div>
複製代碼
第一條樣式的權重計算： 100+1+10+1，結果爲112； 第二條樣式的權重計算： 100+10+1，結果爲111； h2標題的最終顏色爲red
五、CSS實現一個幻燈片效果的方案？
-
1 使用a標籤 + :active屬性實現
-
2 使用 css僞類 ：checked +號選擇器實現
六、什麼是外邊距重疊？重疊的結果是什麼？
在 CSS 當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一 個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊 外邊距。
七、rgba()和 opacity 的透明效果有什麼不一樣、background-color rgb hsl的區別分別是什麼？
rgba()和 opacity 都能實現透明效果，但最大的不一樣是 opacity 做用於元素，以及元素內的 全部內容的透明度， 而 rgba()只做用於元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承透明 效果！）rgb -> red green blue; hsl 0~360選值
八、display:none 與 visibility:hidden 的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。 visibility: 隱藏對應的元素而且擠佔該元素原來的空間。 便是，使用 CSS display:none 屬性後，HTML 元素（對象）的寬度、高度等各類屬性值都將 「丟失」;而使用 visibility:hidden 屬性後，HTML 元素（對象）僅僅是在視覺上看不見（完 全透明），而它所佔據的空間位置仍然存在。
九、CSS 中 link 和@import 的區別是：
link 爲標準導入css的方法，@import導入的css文件，使用JavaScript沒法進行style的獲取，老式瀏覽器中@import方法導入的文件會出現樣式的短暫消失
十、BFC 是什麼?
BFC（塊級格式化上下文），一個建立了新的 BFC 的盒子是獨立佈局的，盒子內元素的佈局 不會影響盒子外面的元素。在同一個 BFC 中的兩個相鄰的盒子在垂直方向發生 margin 重疊 的問題 BFC 是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外 元素的佈局，這個渲染區域只對塊級元素起做用
十一、多屏幕+高清+手機系統字體大小適配 方案
/**
* @description （多屏幕+手機系統字體+webview+750設計稿）適配方案
* 1rem = 100px
*/
(function(win, doc) {
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var _dpr = win.devicePixelRatio || 1;
var _scale = 1 / _dpr;
var setStyleFontSize = function(num) {
docEl.style.fontSize = (num > 100 ? 100 : num) + 'px';
};
// 計算並設置根元素fontSize
var calcRem = function() {
var _rem = (docEl.clientWidth * _dpr) / 7.5;
/* 設置viewport，進行縮放，達到高清效果 */
metaEl.setAttribute(
'content',
'width=device-width' +
',initial-scale=' +
_scale +
',maximum-scale=' +
_scale +
', minimum-scale=' +
_scale +
',user-scalable=no'
);
/* 設置data-dpr屬性，留做的css hack之用 */
docEl.setAttribute('data-dpr', _dpr);
/* 動態寫入樣式 */
setStyleFontSize(_rem);
/* 給js調用的，某一dpr下rem和px之間的轉換函數 */
win.rem2px = function(v) {
v = parseFloat(v);
return v * _rem;
};
win.px2rem = function(v) {
v = parseFloat(v);
return v / _rem;
};
win.dpr = _dpr;
win.rem = _rem;
};
/* 解決部分手機webview一開始獲取的clientWidth爲0，致使font-size爲0即1rem=0 的bug */
var canSetFontSize = function() {
if (docEl.clientWidth === 0) {
setTimeout(function() {
canSetFontSize();
}, 50);
return;
}
calcRem();
};
canSetFontSize();
/* 解決手機更改系統字體大小的適配問題 */
var calcScale = function() {
setTimeout(function() {
(function() {
try {
var realFz = parseInt(win.getComputedStyle(docEl).fontSize.replace('px', ''), 10);
var expectFz = parseInt(win.rem, 10);
console.log(realFz, expectFz);
if (realFz != expectFz && docEl.clientWidth < 750) {
var realRem = expectFz / (realFz / expectFz);
setStyleFontSize(realRem);
}
} catch (e) {
console.error(e);
}
})();
}, 50);
};
win.onload = function() {
console.log('onload');
calcScale();
};
var debounce = function(fn, delay, immediate) {
if (!delay) {
delay = 300;
}
if (!immediate) {
immediate = false;
}
var timer = null;
return function() {
var that = this;
var argumentsCopy = arguments;
if (immediate && !timer) {
console.log(immediate, timer);
fn.apply(that, argumentsCopy);
}
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
if (!immediate) {
fn.apply(that, argumentsCopy);
}
timer = null;
}, delay);
};
};
win.onresize = debounce(function() {
console.log('onresize');
var _rem = docEl.clientWidth / 7.5;
setStyleFontSize(_rem);
});
})(window, document);
複製代碼
12.移動端1像素邊框
一、 媒體查詢利用設備像素比縮放，設置小數像素
- IOS8下已經支持帶小數的px值, media query對應devicePixelRatio有個查詢值-webkit-min-device-pixel-ratio, css能夠寫成這樣
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
複製代碼
- 【缺點】對設備有要求，小數像素目前兼容性較差。
二、viewport + rem 方案
- 該方案是對上述方案的優化，總體思路就是利用viewport + rem + js 動態的修改頁面的縮放比例，實現小於1像素的顯示。在頁面初始化時，在頭部引入原始默認狀態以下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製代碼
var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
複製代碼
【缺點】覺得縮放涉及全局的rem單位，比較適合新項目，對於老項目可能要涉及到比較多的改動。
三、transform: scale(0.5) 方案 - 推薦: 很靈活
- 設置height: 1px，根據媒體查詢結合transform縮放爲相應尺寸。
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
用::after和::befor,設置border-bottom：1px solid #000,而後在縮放-webkit-transform: scaleY(0.5);能夠實現兩根邊線的需求
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}
複製代碼
13.移動端300毫秒延遲
產生緣由：
- 300 毫秒延遲的主要緣由是解決雙擊縮放(double tap to zoom)。雙擊縮放，顧名思義，即用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 那麼這和 300 毫秒延遲有什麼聯繫呢？ 假定這麼一個場景。用戶在 iOS Safari 裏邊點擊了一個連接。因爲用戶能夠進行雙擊縮放或者雙擊滾動的操做，當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是確實要打開這個連接，仍是想要進行雙擊操做。所以，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。 鑑於iPhone的成功，其餘移動瀏覽器都複製了 iPhone Safari 瀏覽器的多數約定，包括雙擊縮放，幾乎如今全部的移動端瀏覽器都有這個功能。
解決方案：
一、使用viewport
- 添加viewpoint meta標籤
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
複製代碼
二、使用fastclick插件
-
移動端事件觸發順序：在移動端，手指點擊一個元素，會通過：touchstart --> touchmove -> touchend -->click。
-
fastclick.js的原理是：FastClick的實現原理是在檢測到touchend事件的時候，會經過DOM自定義事件當即出發模擬一個click事件，並把瀏覽器在300ms以後真正的click事件阻止掉。
fastclick一樣能夠解決移動端點透現象。
- 點透現象：當A/B兩個層上下z軸重疊，上層的A點擊後消失或移開（這一點很重要），而且B元素自己有默認click事件（如a標籤）或綁定了click事件。在這種狀況下，點擊A/B重疊的部分，就會出現點透的現象。點透現象的關鍵點：A/B兩個層上下z軸重疊。上層的A點擊後消失或移開。（這一點很重要）B元素自己有默認click事件（如a標籤） 或 B綁定了click事件。在以上狀況下，點擊A/B重疊的部分，就會出現點透的現象。
-
fastclick產生問題：
頁面引入fastClick.js後，滑動H5頁面的時候發現谷歌瀏覽器會報錯,以下
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/...
複製代碼
最簡單的是加上*{ touch-action: none; } 不進行任何touch相關默認行爲.
touch-action的屬性值，auto是默認值，表示手勢操做什麼的徹底有瀏覽器本身決定。manipulation表示瀏覽器只容許進行滾動和持續縮放操做，相似雙擊縮放這種非標準操做就不能夠。click事件在移動端有個300ms延時，就是由於避免和手機雙擊行爲發生衝突。然而，當咱們設置了touch-action:manipulation幹掉了雙擊行爲，則顯然，300ms延時就不復存在，所以，html {touch-action: manipulation;}聲明能夠用來避免瀏覽器300ms延時問題。touch-action的兼容性在移動端大多數仍是兼容的。因而移動端之後就能夠大膽的使用click事件了。
14.移動端常遇問題及解決方法：
參考連接：caibaojian.com/web-mobile-…
15.經常使用meta標籤集合
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設置viewport寬度，爲一個正整數，或字符串‘device-width’
// height 設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
// initial-scale 默認縮放比例，爲一個數字，能夠帶小數
// minimum-scale 容許用戶最小縮放比例，爲一個數字，能夠帶小數
// maximum-scale 容許用戶最大縮放比例，爲一個數字，能夠帶小數
// user-scalable 是否容許手動縮放
空白頁基本meta標籤
<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本之後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別爲電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其餘meta標籤
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
複製代碼
- 1. htmlCSS面試題
- 2. 面試題總結
- 3. 面試題-總結
- 4. 前面面試題總結
- 5. Android面試試題總結
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Markdown 標題 - Markdown 教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******