前端面试--HTML5&CSS3

前端面试–HTML5&CSS3

Q：盒模型
CSS盒模型本质盒子，包含margin,border,padding,content
CSS盒模型（box-sizing）分为两种: IE盒模型和W3C盒模型
W3C盒模型（标准模型content-box）:宽度=content content/padding/border/margin都是单独分开的
IE盒模型（怪异模型border-box）:宽度 = content+padding+border

Q：清除浮动
1.在子元素并级后面添加一个新元素，添加clear：both属性
优点：通俗易懂，容易掌握
缺点：添加无意义空标签，不方便后期维护
2. 给父元素添加overflow:hidden
优点：代码较少，简单方便
缺点：不能配合定位使用
3. :after方法（作用于浮动元素的父元素）
.clearfix:after{
content:"";
display: block;
height:0;
clear:both;
visibility:hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
优点：结构和语义化完全正确
缺点：复用方式不当，会造成代码量增加

Q：CSS选择器有哪些，选择器的权重优先级
选择器类型
1）
1.ID (#ID)
2.Class (.class)
3.标签§
4.通配符 (*)
5.属性（[type=”text”]）
6.伪类 (a:hover)
7.伪元素（::first-line）
2）层级选择器
1.子选择器 (div>p)
2.相邻（兄弟）选择器 (div+p)
3.通用（div ~p）div后的p、同级
4.后代选择器/div内的p (div p)
5.多个选择器 (div,p,a,ul)
选择器权重优先级
！Important>内联样式>ID选择器>类选择器>标签选择器>通配符选择器

Q：两栏布局
方法一：float+margin-left
左侧栏向左浮动，右侧设置margin-left为左侧栏宽度
方法二：absolute+margin-left
左侧栏position：absolute 右侧margin-left：100px（左侧栏宽度）
方法三：float+BFC
为左侧元素设置浮动后，左侧元素会因为浮动盖在右侧元素上，因此要将右侧元素变成BFC，BFC是一个独立的区域，不会让BFC外的元素对其内部造成干扰。当右侧元素变成一个BFC时它的元素边界会发生变化，会紧紧贴合左侧的元素。
常见的右侧元素设置—overflow：hidden；
方法四：flex布局
父元素设置flex布局，justify-content：space-between

Q：三栏布局
左右两边固定中间自适应
1.圣杯布局
·HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
·style样式设置
1）父元素设置高度
2）三个元素均设置浮动
3）中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4）左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
5）父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
6）左右盒子相对定位
该布局受内部元素影响而破坏布局的概率低，但是当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给body加一个最小宽度（起码大于左右两侧宽度之和）
2.双飞翼布局
与圣杯布局的思路是一致的，只是有一些细微的差别。
·HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
·style样式设置
1）父元素设置高度
2）三个元素均设置浮动
3）中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4）中间main部分再加一个盒子inner，放置内容（与圣杯布局的不同点）
5）左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
6）新添加盒子，inner，设置左右padding或margin
3.自身浮动
·HTML结构设置
新建三个元素：left、right、main（注意，main写在后面）
·style样式设置
1）左盒子左浮动，右盒子右浮动
2）中间部分设置margin或padding值
4.CSS3 flex特性
·HTML结构设置
新建一个父元素，包含三个子元素：main、left、right（注意，main写在前面）
·style样式设置
1）父元素设置宽度为100%，display: flex；
2）main中间部分设置flex: 1；
3）左右两则按产品需求设置宽高；
4）left设置order: -1；
https://segmentfault.com/a/1190000017785077?utm_source=tag-newest

Q：position定位
position 属性的五个值：
static HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响
relative 生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absolute定位时，给父元素设置relative
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位（默认是body）
sticky 粘性定位的元素是依赖于用户的滚动，在 position:relative与position:fixed定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

Q：float用在块元素和行内元素的区别
在块级元素中使用了浮动元素，如3个div，第一个div浮动，后面两个div会往上挤，就当上面的div不存在一样，这时候，浮动元素后方的div会钻到浮动元素下面，显示就是被浮动元素遮挡了。虽然和浮动元素相邻的非浮动元素还是会钻到浮动元素下面，但是文字等行内元素不会！他们会被留在浮动元素外面，表现上是环绕着浮动元素的效果。

Q：行内元素与块状元素的区别
1、常见行内元素和块级元素
1）、行内元素

<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

2）、块级元素

<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

2、display的block、inline和inline-block的区别
1）、block
会独占一行，多个元素会另起一行，可以width、height、margin和padding属性
2）、inline
元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin
3）、inline-block
将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内
3、行内元素和块级元素的区别
①：行内元素设置宽高无效，块级元素可以设置宽高
②：行内元素对margin设置左右方向有效，而上下无效，padding设置都无效；块级元素设置margin和padding都有效
③：行内元素不会自动换行，块级元素可以自动换行
④：块级元素多个块状，默认排列从上到下

Q：垂直居中的方式
①display:flex;align-items:center;justify-content:center;
②绝对定位+transform反向偏移。
父position:relative;
子position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
transform的计算基准是元素本身
③绝对定位+margin：auto（position:absolute; left:0; top:0; right:0; bottom:0; margin:auto）
④绝对定位+margin反向偏移
position:absolute; left:50%; top:50%;margin-left:-100px;margin-top:-50px;

Q：H5新特性
新增加了图像、位置、存储、多任务等功能。
新增元素：
①canvas
②用于媒介回放的video和audio元素
③本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
④语意化更好的内容元素，比如 article footer header nav section
⑤位置API，Geolocation
⑥表单控件，calendar date time email url search
⑦新的技术，web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行)web socket
⑧拖放API：drag、drop

移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes

Q：flex布局
Flex:
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。容器分为两种,块flex和行内flex。
.box{
display:flex;/webkit需要加前缀/
/display:inline-flex;/
}
Flex布局有两层,采用flex布局的元素称为flex容器,其子元素则自动成flex item,即项目。
注:flex不同于block,flex容器的子元素的float,clear,vertical-align属性将失效。
Flex布局:
flex容器有两根轴:水平主轴就是x轴(main axis)和竖直轴也是y轴(cross axis),两轴相关位置标识如下:
flex容器属性:
flex-direction:决定项目的排列方向。
flex-wrap:即一条轴线排不下时如何换行。
flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content:定义了项目在主轴上的对齐方式。(justify)
align-items:定义项目在交叉轴上如何对齐。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(换行会产生多轴)

Q：BFC
简介：
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
触发：
满足下列条件之一就可触发BFC
1.根元素，即HTML元素
2.float的值不为none
3.overflow的值不为visible
4.display的值为inline-block、table-cell、table-caption
5.position的值为absolute或fixed
BFC作用：
1.bfc内部元素的布局不受外部元素影响。
2.bfc区域不会出现margin重叠
3.bfc区域计算高度时候会自动计算浮动元素。
4.bfc区域不会和浮动元素重合。
BFC的场景应用：
1.防止margin出现重叠：
在这里我们在div2外部套上一个div，并添加overflow：hidden属性，使其成为一个bfc区域，这样div2的margin也就生效了。
2.两栏布局，防止出现文字环绕效果：
为div2添加一个包裹div并设置overflow属性，使其成为一个BFC区域，这样就可以避免出现文字环绕效果，并且可以实现自动实现两栏布局效果。
3.清除浮动，防止元素塌陷：
这个很好理解就是我们在页面布局的时候，如果不给父元素设置一个高度的话，子元素设置浮动后，子元素并不能将父元素的高度自动撑起来，这个时候给父元素设置一个overflow：hidden属性后，就可以起到清除浮动的作用。

Q：css动画如何实现
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。
transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画

Q：关于js动画和css3动画的差异性
渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别：
1.功能涵盖面，js比css大
2.实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
3.对帧速表现不好的低版本浏览器，css3可以做到自然降级
4.css动画有天然事件支持
5.css3有兼容性问题