web前端开发⾯试题，易莱胜web前端开发培训⾯试题web前端开发⾯试题，易莱胜web前端开发培训⾯试题
热点：百读易莱胜官⽹
上海易莱胜
易莱胜
上海百读易莱胜
1.⾏内元素转化为块级元素?
⾏元素转换为块级元素⽅式：display：block；
数据库系统概论第五版重点
2.将多个元素设置为同⼀⾏?清除浮动有⼏种⽅式?
将多个元素设置为同⼀⾏：position,float，inline-block
清除浮动的⽅式：⽅法⼀：添加新的元素、clear：both；
⽅法⼆：⽗级div定义overflow: hidden；
⽅法三：利⽤:after和:before来在元素内部插⼊两个元素块，从⾯达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility: hidden;}
3.怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：
盒⼦总宽度/⾼度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒⼦的总宽度和⾼度是包含内边距padding和边框border宽度在内的。
盒⼦总宽度/⾼度=width/height + margin = 内容区宽度/⾼度+ padding + border + margin;
box-sizing有两个值⼀个是content-box，另⼀个是border-box。
当设置为box-sizing:content-box时，将采⽤标准模式解析计算；
当设置为box-sizing:border-box时，将采⽤怪异模式解析计算。
4.简述⼏个css hack?
(1) 图⽚间隙
在div中插⼊图⽚，图⽚会将div下⽅撑⼤3px。
hack1：将
与写在同⼀⾏。
hack2：给添加display：block；
dt li 中的图⽚间隙。
hack：给添加display：block；
(2) 默认⾼度，IE6以下版本中，部分块元素，拥有默认⾼度（低于18px）hack1：给元素添加：font-size：0；hack2：声明：overflow：hidden；
表单⾏⾼不⼀致
hack：给表单添加声明：float：left；height：；border：0；
⿏标指针
hack：若统⼀某⼀元素⿏标指针为⼿型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE⾥⾯会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；
5. :before 和::before 区别?
单冒号(:)⽤于CSS3伪类，
双冒号(::)⽤于CSS3伪元素。
对于CSS2之前已有的伪元素，⽐如:before，单冒号和双冒号的写法::before作⽤是⼀样的。
6.如何让⼀个div 上下左右居中?
答：有三种⽅法。
⽅法1：
.div1{ width:400px;
height:400px;
border:#CCC 1px solid;
background:#99f;
position:absolute; left:50%; top:50%;
transform: translate(-50%,-50%); }
⽅法2：
.div2{ width:400px;
height:400px;
border:#CCC 1px solid;
background:#99f;
position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
⽅法3：
.div3{ width:400px;
height:400px;
border:#CCC 1px solid;
background:#9f9;
position: absolute; left: 50%; top:50%;
margin-left:-200px;
margin-top: -200px; }
7.css2.0 和css3.0
答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了⼀些冗余的标签，在布局⽅⾯减少了代码量。以前⽐较复杂的布局现在⼀个属性就搞定了（columns之类的属性）。在效果⽅⾯加⼊了更多的效果(圆⾓，动画之类的)，还有在盒⼦模型和列表模块都进⾏了改进。不过CSS3兼容性不好，只有⼀些⾼级版本的浏览器⽀持。
8.弹性盒⼦模型?flex|box区别?
(1) 引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的条⽬进⾏排列、对齐和分配空⽩空间。
即便容器中条⽬的尺⼨未知或是动态变化的，弹性盒布局模型也能正常的⼯作。在该布局模型中，容器会根据布局的需要，调整其中包含的条⽬的尺⼨和顺序来最好地填充所有可⽤的空间。
当容器的尺⼨由于屏幕⼤⼩或窗⼝尺⼨发⽣变化时，其中包含的条⽬也会被动态地调整。⽐如当容器尺⼨变⼤时，其中包含的条⽬会被拉伸以占满多余的空⽩空间；当容器尺⼨变⼩时，条⽬会被缩⼩以防⽌超出容器的范围。弹性盒布局是与⽅向⽆关的。
在传统的布局⽅式中，block 布局是把块在垂直⽅向从上到下依次排列的；
⽽inline 布局则是在⽔平⽅向来排列。弹性盒布局并没有这样内在的⽅向限制，可以由开发⼈员⾃由操
作。
(2) flex和box的区别: display：box 是⽼规范，要兼顾古董机⼦就加上它；⽗级元素有display:box；属性之后。他的⼦元素⾥⾯加上box-flex属性。可以让⼦元素按照⽗元素的宽度进⾏⼀定⽐例的分占空间。flex是最新的，董机⽼机⼦不⽀持的；
⽗元素设置display:flex后，⼦元素宽度会随⽗元素宽度的改变⽽改变，⽽display:box不会。Android UC浏览器只⽀持display: box语法；⽽iOS UC浏览器则⽀持两种⽅式。
9.viewport 所有属性？
(1)width ：设置layout viewport的宽度，为⼀个正整数，或字符串'device-width';
(2)initial-scale：设置页⾯的初始缩放值，为⼀个数字，可以带⼩数。
(3)minimum-scale：允许⽤户的最⼩缩放值，为⼀个数字，可以带⼩数。
(4)maximum-scale：允许⽤户的最⼤缩放值，为⼀个数字，可以带⼩数。
(5)height：设置layout viewport的⾼度，这个属性对我们并不重要，很少使⽤
(6)user-scalable：是否允许⽤户进⾏缩放，值为‘no’或者‘yes’。
安卓中还⽀持：target-densitydpi，表⽰⽬标设备的密度等级，作⽤是决定css中的1px 代表多少物理像素
(7)target-densitydpi：值可以为⼀个数值或者high-dpi 、medium-dpi、low-dpi、device-dpi 这⼏个字符串中的⼀个
10.如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。语义化的主要⽬的就是让⼤家直观的认识标签(markup)和属性(attribute)的⽤途和作⽤，对搜索引擎友好，有了良好的结构和语义我们的⽹页内容便⾃然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，⽹站的推⼴便可以省下不少的功夫，⽽且可维护性更⾼，因为结构清晰,⼗分易于阅读。这也是搜索引擎优化SEO重要的⼀步。
11.伪类选择器和伪元素？c3中引⼊的伪类选择器有？c3中伪元素有?
伪类⽤⼀个冒号来表⽰，⽽伪元素则⽤两个冒号来表⽰。
伪类选择器：
由于状态是动态变化的，所以⼀个元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
伪元素选择器：
并不是针对真正的元素使⽤的选择器，⽽是针对CSS中已经定义好的伪元素使⽤的选择器；
c3中引⼊的伪类选择器：
:root()选择器，根选择器，匹配元素E所在⽂档的根元素。在HTML⽂档中，根元素始终是。:root选择器等同于元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器⼀模⼀样，可以选择除某个元素之外的所有元素。
:empty()选择器表⽰的就是空。⽤来选择没有任何内容的元素，这⾥没有内容指的是⼀点内容都没有，哪怕是⼀个空格。
:target()选择器来对页⾯某个target元素(该元素的id被当做页⾯中的超链接来使⽤)指定样式，该样式只在⽤户点击了页⾯中的超链接，并且跳转到target元素后起作⽤。
:first-child()选择器表⽰的是选择⽗元素的第⼀个⼦元素的元素E。简单点理解就是选择元素中的第⼀个⼦元素，记住是⼦元素，⽽不是后代元素。
:nth-child()选择某个元素的⼀个或多个特定的⼦元素。
:nth-last-child()从某⽗元素的最后⼀个⼦元素开始计算，来选择特定的元素
:nth-of-type(n)选择器和:nth-child(n)选择器⾮常类似，不同的是它只计算⽗元素中指定的某种类型的⼦元素。
:only-child表⽰的是⼀个元素是它的⽗元素的唯⼀⼀个⼦元素。
:first-line为某个元素的第⼀⾏⽂字使⽤样式。
:first-letter 为某个元素中的⽂字的⾸字母或第⼀个字使⽤样式。
:before 在某个元素之前插⼊⼀些内容。
:after 在某个元素之后插⼊⼀些内容。
c3中伪元素：
::first-line选择元素的第⼀⾏，⽐如说改变每个段落的第⼀⾏⽂本的样式
::before和::after这两个主要⽤来给元素的前⾯或后⾯插⼊内容，这两个常⽤"content"配合使⽤，见过最多的就是清除浮动::selection⽤来改变浏览⽹页选中⽂的默认效果
12.placeholder?如何在ie8上兼容placeholder这个效果
建筑ppt模板免费下载 素材
⽅法⼀：web前端基础面试题
⾸先判断浏览器是否⽀持placeholder属性，如果不⽀持的话，就遍历所有input 输⼊框，获取placeholder属性的值填充进输⼊框作为提⽰信息，同时字体设置成灰⾊。
当输⼊框获得焦点( focus )同时输⼊框内⽂字等于设置的提⽰信息时，就把输⼊框内清空；
当输⼊框失去焦点( blur )同时输⼊框内⽂字为空时，再把获取的placeholder属性的值填充
进输⼊框作为提⽰信息，同时字体设置成灰⾊；
当输⼊框内有输⼊( keydown )时，此时输⼊框内的提⽰信息已经由focus事件清除，此时只需要把字体再恢复成⿊⾊即可
此⽅法的缺点是，不适⽤于加载完DOM时即获得焦点的输⼊框，因为在⽤户的⾓度，加载完页⾯时看到的获得焦点的那个输
⼊框，它的提⽰⽂字是看不到的。HTML
CSS：.phcolor{ color:#999;}
JS$(function(){
//判断浏览器是否⽀持placeholder属性
supportPlaceholder='placeholder'ateElement('input'), placeholder=function(input){
js字符串加密var text = input.attr('placeholder'),
defaultValue = input.defaultValue;
if(!defaultValue){
input.val(text).addClass("phcolor");
}
input.focus(function(){
if(input.val() == text){
$(this).val("");
}
});
input.blur(function(){
if(input.val() == ""){
$(this).val(text).addClass("phcolor");
}
});
/
/输⼊的字符不为灰⾊
input.keydown(function(){
$(this).removeClass("phcolor");
});
};
//当浏览器不⽀持placeholder属性时，调⽤placeholder函数
if(!supportPlaceholder){
$('input').each(function(){
text = $(this).attr("placeholder");
if($(this).attr("type") == "text"){
placeholder($(this));
}
});
}});
⽅法⼆：
此⽅法的思路是做⼀张含有提⽰⽂字的图⽚作为input输⼊框的背景图，初始时获得焦点同时加载背景图；当输⼊框不为空时，去掉背景图；
当输⼊框为空时，加载背景图；dhtmlxgantt
当⽤户键盘按键且输⼊框不为空( 输⼊字符)时，去掉背景图；
当⽤户键盘按键且输⼊框为空( 删除字符)时，加载背景图。
此⽅法的缺点是：需要为每⼀个提⽰⽂字不同的input制作背景图⽚，并且设置input的样式。
CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}
JS$(function(){
//判断浏览器是否⽀持placeholder属性
supportPlaceholder='placeholder' ateElement('input');
if(!supportPlaceholder){
学php培训去哪里好//初始状态添加背景图⽚
$("#uname").attr("class","phbg");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。