px和pt 是絕對單位,指定是多少就是多少. px:畫素,是網頁設計中常用的單位, 代表螢幕上的乙個點
pt: 磅, 是印刷排版行業用來表示字型單位, 1 pt = 1/72 in.
word 中四號字型是14pt
em與 rem 是相對單位 em :
作為font-size的單位時,其代表父元素的字型大小.若父級字型大小 16px, 那1em=16px
作為其他屬性單位時,代表自身字型大小
rem: 取值分兩種情況
rem作用於非根元素時,相對於根元素字型大小;
rem作用於根元素字型大小時,相對於其出初始字型大小
/* 作用於根元素,相對於原始大小(16px),所以html的font-size為32px*/
html
/* 作用於非根元素,相對於根元素字型大小,所以為64px */
p
一、jquery 方法 $.trim()
var str=" ssss "
console.log("aaa"+$.trim(str)+"aaa"); //aaassssaaa
內部實現:
function trim(str)
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-z3viuk0x-1572410116903)(assets/1561529746015.png)]
二、通過正則替換
var str=" ssss "
string.prototype.trim = function()
console.log("aaa"+str.trim()+"aaa"); //aaassssaaa
實現步驟
取出字串中的字元,設為物件的key;利用物件的key 的不可重複性,統計出每個字元出現的次數遍歷物件,找出屬性值最多的key
var str = "aabbbccccddddaaa";
var obj = {};
for (var i = 0; i < str.length-1; i++) else
}console.log(obj); //
//遍歷物件,找到出現次數最多的字元和次數
var max = 0;
var maxchar = null;
for (var key in obj)
}console.log("最多的字元是" + maxchar); //最多的字元是a
console.log("出現的次數是" + max); //出現的次數是5
1px 是css畫素,在不同的畫素比下佔據的物理畫素不同
目前畫素比有 2 (iphone 6) 和3 (iphonex)
即css 畫素 1px 在iphone 6上佔 2px物理畫素 ,在iphonex上佔 3px 的物理畫素,會導致我們寫的1px 在移動端顯示偏粗
方法一:畫素比+rem 方案
先將頁面整體布局按畫素比進行縮放,然後用rem將縮放的那部分給抵消掉
1.畫素比屬性:window.devicepixelratio
2.縮放控制的是meta viewport的 initial-scale屬性
方法二: **查詢,根據裝置畫素比縮放,transform-scaley
場景:給子元素設定乙個margin-top隔開與父元素的上邊距,但結果卻加到父盒子上面
只有margin-top會出現此現象.
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-awnwaixs-1572410116904)(assets/1561523053495.png)]
解決方法
1.給父級設定邊框或內邊距(不建議使用)
border-top:1px solid transparent;
padding-top:1px;
2.觸發bfc(塊級格式上下文),改變父級的渲染規則
方法(1)position:absolute/fixed;
(2)display:inline-block;
(3)float:left/right;
(4)overflow:hidden;
方法一: es6塊級作用域let
for (let i = 0; i < 5; i++)
方法二: 自執行函式
for (var i=0; i<5; i++) )(i)
}
方法三:引數傳遞
var out = (i) =>
for (var i=0; i<5; i++)
var a=[1,2,3,4];答案:[1,3,4] a.splice(1,1);
a的值是什麼?為什麼
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-0or2u6v6-1572410116905)(assets/1561517665287.png)]
foo=foo||bar短路運算,意思是:如果foo存在,foo=foo,否則foo=bar ,多用於函式引數預設值設定.
函式引數預設值設定,es6 提出更簡潔的方法
function log(x='hello',y='world')
log(); //hello world
document.queryselector('[type="checkbox"]').checked
判斷核取方塊的checked 的屬性值,如果為true ,就表示被選擇了
js獲取
document.getelementbyid('username').value
jq獲取
$('#username').val()
(); //hello world
### 9.js中如何判斷核取方塊被選擇了
document.queryselector(』[type=「checkbox」]』).checked
判斷核取方塊的checked 的屬性值,如果為true ,就表示被選擇了
### 10.請用js和jq分別獲取id為username的表單元素的值
js獲取
document.getelementbyid(『username』).value
jq獲取
$(』#username』).val()
前端面試題
sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...
前端面試題
行內元素有哪些?塊級元素有哪些?空 void 元素有哪些?link和 import的區別是?常見相容性問題?含移動端 html5的離線儲存?描寫一段語義化的html 吧 html5的form如何關閉自動完成功能?什麼是閉包 closure 為什麼要用?localstorage和sessionstor...
前端面試題
朋友碰到的筆試題,在此記錄一下,並且記下碰到的有難點但是自己沒注意的到的面試題!function isnumber x else sum 2,3 5 sum 2 3 5 請寫出sum函式的具體實現。function sum a,c return a c 該題考查的是乙個以前沒接觸過的東西,叫做柯里化...