專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-12-28 14:59:46 來源：動力節(jié)點(diǎn) 瀏覽1497次
今天小編收集了一些關(guān)于web前端開發(fā)面試題及答案的一些相關(guān)內(nèi)容，通過對知識點(diǎn)的整理與經(jīng)驗(yàn)的總結(jié)，重新鞏固了一些前端基礎(chǔ)的知識，希望可以幫助到大家：
1. 一個200*200的div在不同分辨率屏幕上下左右居中，用css實(shí)現(xiàn)
<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;">
<div style="">
上下左右居中
</div>
</div>
2. 寫一個左中右布局占滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應(yīng)寬，要求先加載中間塊，請寫出結(jié)構(gòu)及樣式：
<div id="left">我是左邊</div>
? ? <div id="center">我是中間</div>
? ? <div id="right">我是右邊</div>
?
html,body{ margin: 0px;width: 100%; }?
#left,#right{width: 200px;height: 200px;background-color: aqua;
? ? position: absolute;}
? ? #left{left: 0;top:0;}
? ? #right{right: 0;top:0;}
? ? #center{margin: 0 200px;background-color: blue;height: 200px;}
或者利用彈性盒子
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
?
? ? ? ? html,
? ? ? ? body {
? ? ? ? ? ? height: 100%;
? ? ? ? }
?
? ? ? ? body {
? ? ? ? ? ? display: flex;
? ? ? ? }
?
? ? ? ? .left {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? background-color: rgb(199, 170, 223);
? ? ? ? }
?
? ? ? ? .center {
? ? ? ? ? ? background-color: rgb(151, 228, 148);
? ? ? ? ? ? flex: 1;
? ? ? ? }
?
? ? ? ? .right {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? background-color: rgb(199, 170, 223);
?
?
? ? ? ? }
? ? </style>
?
<body>
? ? <div class="left">left</div>
? ? <div class="center">center</div>
? ? <div class="right">right</div>
</body>
3. 闡述清楚浮動的幾種方式(常見問題)
1.父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
2.父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
4. 結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理;如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
5. 解釋css sprites ，如何使用?
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片
6. 如何用原生js給一個按鈕綁定兩個onclick事件?
Var btn=document.getElementById(‘btn’);
//事件監(jiān)聽 綁定多個事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7. 拖拽會用到哪些事件
dragstart:拖拽開始時在被拖拽元素上觸發(fā)此事件,監(jiān)聽器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時不觸發(fā)此事件.
以上就是“程序員面試助手：web前端開發(fā)面試題及答案”，你能回答上來嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動力節(jié)點(diǎn)Java官網(wǎng)。
相關(guān)閱讀
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號