‘壹’ js出现页面颤抖用box-sizing还能用啥
由于题目描述的不是非常清楚，我猜测你可能是用js给页面元素添加了某些事件函数，触发的时候导致页面出现抖动的“意外”。一般来说，出现这样的情况是事件触发改变了正常文档流中元素的尺寸，包括width、padding和border。你说的box-sizing是解决办法之一，但是低版本的ie不支持（想必每一个写前端页面的，遇到要兼容ie6-8都想骂人），这时候可能让元素脱离文档流是办法之一，比如添加position:absolute属性。当然，由于元素脱离文档流对整个布局影响较大，这还得根据整个文档的布局来选择解决方法。
‘贰’ 如何让box-sizing 在div内失效
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法：box-sizing: content-box|border-box|inherit;
你要在那一层级上写box-sizing，是<div id="a"></div>的上一层不，你在上一层写，下一层不继承的
你想要写的是内边框的
‘叁’ 为什么css里面没有box-sizing这个属性
有的。
语法
box-sizing: content-box|border-box|inherit;
属性值1、content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
属性值2、border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
属性值3、inherit 规定应从父元素继承 box-sizing 属性的值。
‘肆’ box-sizing是css3的新属性吗
是的，针对于div盒子中的border,padding属性，使这些属性定义的宽度自动向内减去，免去了需要重新数字计算div尺寸的麻烦。使用后，不论如何改变div盒子内border和padding属性的尺寸，div盒子的占位大小都不会改变。
‘伍’ 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!
‘陆’ 网站box-sizing怎么定义
语法 box-sizing：content-box | border-box 默认值：content-box 1. content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + borde
‘柒’ web前端问题：安卓自带浏览器显示问题
严重怀疑楼主是布局问题，象这样的布局甚至都不用@media媒体查询都能搞定，代码如下：
<divclass='cont'>
<ul>
<li><divclass='inner'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div></li>
<li><divclass='inner'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div></li>
<li><divclass='inner'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div></li>
</ul>
</div>
<style>
.cont{margin:20px10px;}
ul{margin:0px;padding:0px;list-sytle:none;}
li{width:33.333333%;}
.inner{margin:012px;}
.cimg{width:100%;margin-bottom:12px;}
</style>
上面是在不使用flex，box-sizing属性的时候最标准的三列实现模型，可以兼容任何屏幕宽度的浏览器，包括手机和电脑。
如果楼主只需要手机端的先是那么可以用box-sizing:border-box这个属性使得div等的宽度包括边框和padding值，flex可以实现等分为几列，代码如下：
.cont
{
display:-moz-box;/*Firefox*/
display:-webkit-box;/*SafariandChrome*/
display:box;
width:300px;
border:1pxsolidblack;
}
.fx
{
-moz-box-flex:1.0;/*Firefox*/
-webkit-box-flex:1.0;/*SafariandChrome*/
box-flex:1.0;
border:1pxsolidred;
box-sizing:border-box;
padding:012px;
}
</style>
<divclass='cont'>
<divclass='fx'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div>
<divclass='fx'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div>
<divclass='fx'><div><imgsrc='1.png'class='cimg'/></div><div>图片下的文字</div></div>
</div>
这样的话父元素定义display：box，然后子元素定义box-flex：1，就可以实现三个div各占1份的宽度比例。当然这个属性IE是不支持的，IE11都不支持，所以只能适合手机端使用。这段代码可以在chrome下测试
‘捌’ web前端，设置的盒子高度和显示的不一样，我设置的确定高度，但是盒模型上显示的差了0.几
height: 100px;
zoom: 1;
box-sizing: unset;
border: 0 none;
outline: 0;
overflow: hidden;
加上这几个属性试试；
‘玖’ web前端求助 题目如下
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
ul li{list-style-type: none;}
ul{width: 500px;float: left;}
li{width: 20%;height: 30px;border: 1px solid #f3f3f3;float: left;box-sizing: border-box;}
li:nth-child(2n-1):hover{background: orange;}
li:nth-child(2n):hover{background: #cf0de3;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
‘拾’ 题目如图所示，Web前端设计的作业，求助
这个用HTML语言就好。设计一个表单，内容按照题目里面的来。最简单不过了。HTML是一门简单的语言，学好它不能光看需要动手才行。
就上面的主要是input type=text 和type=checked 下面的下拉框用的是select元素，option一项项添加。自我评价用textarea元素。 按钮也type=button，只能告诉你这么多了。