专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2022-12-28 14:59:46 来源：星辉 浏览823次
今天小编收集了一些关于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年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
官方微信
官方抖音
