web前端开发面试题易莱胜web前端开发培训面试题Word格式文档下载.docx

1、before来在元素内部插入两个元素块，从面达到清除浮动的效果。.clearzoom:1;.clear:aftercontent:”;clear:both;display:block;height:0;overflow:hidden;visibility:3.怪异盒模型box-sizing？弹性盒模型|盒布局?在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的。盒子总宽度/高度=width/height + margin = 内容区宽度/高度

2、 + padding + border + margin;box-sizing有两个值一个是content-box，另一个是border-box。当设置为box-sizing:content-box时，将采用标准模式解析计算；border-box时，将采用怪异模式解析计算。4.简述几个css hack?（1） 图片间隙在div中插入图片，图片会将div下方撑大3px。hack1：将与写在同一行。hack2：给添加display：dt li 中的图片间隙。hack：（2） 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）给元素添加：font-size：0；声明：overflo

3、w：hidden；表单行高不一致给表单添加声明：float：left；height： ；border： 0；鼠标指针若统一某一元素鼠标指针为手型：cursor：pointer；当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状给a加display：inline-block；给li加float：5. :before 和 :before 区别?单冒号（:）用于CSS3伪类，双冒号（:）用于CSS3伪元素。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法:before作用是一样的。6.如何让一个div 上下左右居中?答：有三种方法。方法1： .div1 wid

4、th:400px;border:#CCC 1px solid;background:#99f;position:absolute; left:50%; top:transform: translate（-50%,-50%）; 方法2：.div2 width: absolute; 0; bottom: right: margin: auto;div2方法3：.div3 width:#9f9; 50%;margin-left:-200px;margin-top: -200px;div37.css2.0 和css3.0css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，

5、在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果（圆角，动画之类的），还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。8.弹性盒子模型?flex|box区别?（1） 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的

6、条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。（2） flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，董机老机

7、子不支持的；父元素设置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:允许用户的最大缩放值，为一个数字，可以带小数

8、。（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）和属性（att

9、ribute）的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。11.伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类选择器：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；c3中引入的伪类选择器：root（）选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。root选择器等同于CSS：.phcolor color:#999;JS$（function（） /判断浏览器是否支持placeholder属性 supportPlaceholder=placeholderin document.createElement（input）, placeholder=function（i