本文整理了HTML5和CSS3面试中常见的问题，包括sessionStorage与cookie的区别、css sprite的优缺点、canvas绘制图形的方法、弹性盒子模型的概念与优劣，以及在IE低版本下的盒模型差异等。同时，详细介绍了CSS3的新特性，如伪类、动画、布局方法等，并探讨了移动端适配、多屏适配方案和前端开发中的兼容性问题，以及解决策略。
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
**1.28 css sprite是什么,**有什么优缺点
概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式
1.29 canvas 如何绘制一个三角形|正方形
moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
<!DOCTYPE HTML5><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画布</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");//三角形 var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(50,50); cxt.lineTo(10,50); cxt.lineTo(10,10); cxt.stroke();//正方形 var cxt2=c.getContext("2d"); cxt2.moveTo(60,10); cxt2.lineTo(100,10); cxt2.lineTo(100,50); cxt2.lineTo(60,50); cxt2.lineTo(60,10); cxt2.stroke(); </script></body></html>
|
1.30弹性盒子模型? flex|box区别?
- 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。
即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。
当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；
而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
(2) flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，董机老机子不支持的；
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。
1.31 解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?
IE当padding+border的值小于width或者height:
盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）
当padding+border的值大于width或者height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。
以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。
2.CSS3面试题
2.1 解释box-sizing
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
应用场景：统一风格的表单元素 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素
2.2 水平垂直居中的方法
行内元素布局
line-height + text-align
行内块元素布局
vertical-align + line-height + text-align
块布局
position absolute + margin auto +top,bottom,left,right=0
position absolute + top:50%,left50% + translate(-50%, -50%)
position absolute + top:50%,left50% +
margin:-元素宽度一半 0 0 -元素高度一半
父
最低0.47元/天 解锁文章
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
