專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-12-28 14:59:46 來源：動力節點 瀏覽1569次
今天小編收集了一些關于web前端開發面試題及答案的一些相關內容，通過對知識點的整理與經驗的總結，重新鞏固了一些前端基礎的知識，希望可以幫助到大家：
1. 一個200*200的div在不同分辨率屏幕上下左右居中，用css實現
<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;">
<div style="">
上下左右居中
</div>
</div>
2. 寫一個左中右布局占滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應寬，要求先加載中間塊，請寫出結構及樣式：
<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無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2.父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
4. 結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理;如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
5. 解釋css sprites ，如何使用?
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網站節約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片
6. 如何用原生js給一個按鈕綁定兩個onclick事件?
Var btn=document.getElementById(‘btn’);
//事件監聽 綁定多個事件
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:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設置拖拽所需數據,從操作系統拖拽文件到瀏覽器時不觸發此事件.
以上就是“程序員面試助手：web前端開發面試題及答案”，你能回答上來嗎?如果想要了解更多的Java面試題相關內容，可以關注動力節點Java官網。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號