每天记十个前端面试题——day1

系列文章目录

第一章 ：每天记十个前端面试题——day1

第二章 ：每天记十个前端面试题——day2

---

目录

系列文章目录

前言

1.盒子模型是什么？

2.作用？

3.定位的几种方式？

4.浮动的影响？清楚浮动的几种方式？

5.页面之间的传参方式？

6.H5/C3的新属性？

7.H5/C3新属性如何做兼容性处理？

8.浏览器兼容问题

9.隐藏元素的四种方法

10.增删改插节点的方法

总结

---

前言

以每天十道题的目标，记录一下最近在看的一些八股文把~，后续也会记录面试的时候遇见的问题的~。

---

1.盒子模型是什么？

盒子模型是css中的一种思维模型，即把网页内容看成一个盒子，这个盒子由外到内包括margin、border、padding、content。根据浏览器计算方式不同分为两种模型：标准模型（w3c模型）和怪异模型（又称IE模型）。

他们的主要区别是：标准模型的宽度不包含padding和border，怪异模型的宽度包含padding和border(个人认为主要表现在内容区域的大小变化)。
传送门：前端面试——盒子模型详解

2.作用？

首先我会发现每个html文件第一行都会有这句话，那么如果不要这句话会怎么呢？

问：如果页面不写doctype还会解析页面吗？

答：会，会根据浏览器各自的模式进行解析（所以可能会出现每个浏览器解析结果不一样的情况）

那么这句话到底有什么作用呢？

浏览器有两种模式：backCompat（怪异模式）和css1Compat（标准模式）。doctype就是用于指定浏览器用什么模式来解析网页html内容。默认情况下为怪异模式，指定Doctype的话能保持网页在每个浏览器中打开内容一致。

3.定位的几种方式？

定位有四种：static、 relative、absolute、fixed

static(静态定位)

没有定位，无论设置top、left、right、bootom都没有效果

relative（相对定位）

相对于自身位置定位

absolute(绝对定位)

相对于最近的一个有定位的父级定位，如果没有就对于浏览器

fixed(固定定位)

相对于浏览器定位

问：哪几个脱标（脱离文档流）？

答：absolute和fixed

问：层级关系是怎样的？

定位>浮动>标准流

绝对、相对、固定层叠关系相同，子级会高于父级，可通过使用z-index来变化层级关系

4.浮动的影响？清楚浮动的几种方式？

浮动会造成当前元素脱标，造成父盒子塌陷（影响宽高、位置）

所以我们需要清除浮动，清楚浮动有五种方式:

1. 设置高度。但如果内容不固定还是会出现问题，不推荐。
2. 额外标签法。在同一级最后加一个元素，并设置clear:both，但会显示一些不必要的盒子，不推荐。
3. 单伪元素清除法。在类后面添加一个伪元素并设置clear:both，并且设置为不能显示。如：

   .box ::after{
       content:'';
       display:block;
       clear:both;
       //为了不让伪类显示出来，所以让他不显示
       height:0;
       line-height:0;
       visibility:hidden;
   
   }

   4.双伪元素清除法。设置before和after两个，并增加兼容。

.box::before,
.box::after{
    content:'';
    display:table;

}
.box::after{
    clear:both;
}
//兼容IE 67 
.box{
 *zoom:1;
}

           5.overflow:hidden。超出不显示

5.页面之间的传参方式？

主要有三种：h5的数据存储、通过url传参、通过cookie传参

h5的数据储存（sessionStorage和localStorage）

sessionStorage不会被长期存储、页签关闭或浏览器关闭就会被清楚

localStorage会被长期存储，不主动清除就会一直在浏览器中，可以存5M

url传参

这种适用于get传参，将参数通过？、&拼接起来，我们可以用window.location.search()获取参数

但是有长度限制，且是明文的所以安全性比较低

cookie传参

通过cookie传参，但是这个也有长度限制，只能存4k，在设置的时长后会失效

6.H5/C3的新属性？

css3新特性

css3新增了选择器，如：last-child、:first-child()、:nth-child(1)；

新增伪类，如:hover 、 :link、:visited 、:active等；

新增了伪元素，如：::after、 ::before 、::selection 、:first-letter 、 :first-line

新增了背景（background-size和background-orgin）和边框(border-radius、border-shadow、border-image)

新增了文本效果，如：text-shadow 、text-overfolw 、text-decoration(overline、 line-through、underline)、over-warp

新增了转换及动画，如：rotate旋转、scale缩放、translate位移、skew倾斜

以及过渡transition、动画annimation(定义@keyFrames轨迹和名称，在使用annimation调用改名称)

H5新特性

新增语义化标签，如：header、footer、nav、aside、article、section

新增增强型表单，如：input多了type类型，text、radio、checkout、password、number、button、submit

新增表单属性，如:palcehoder、require、max、min

新增音频（audio）和视频（video）

新增本地存储，如localStaorage和sessionStorage

新增canvas画布

7.H5/C3新属性如何做兼容性处理？

CSS3兼容性处理

1.增加各个版本的浏览器内核前缀

浏览器	内核	前缀
IE	Trident	-ms-
Chrome	blink	-webkit-
Firefox	Gecko	-moz-
Safari	webkit	-webkit-
Opera	blink	-o-

以transition为例子：

.transition { 
          transition: all .5s;
  -webkit-transition: all .5s; //增加webkit浏览器内核前缀
}

2.优雅降级和渐进增强

优雅降级（大——小）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强（小——大）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

区别:优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

详解可以下面看这一篇博文，写得非常好！！

参考：你知道渐进增强和优雅降级吗？[css3兼容性写法]

3.初始化样式

因为浏览器都有默认margin和padding，为了保持一致效果，我们往往会在公共样式中写以下代码，以保证兼容性

*{
 margin: 0;
 padding: 0;
}

除此之外，我们也会设置li的list-style 、a标签的text-decoretion等等样式~

H5兼容性处理

1.使用Google的html5shiv包（推荐）

2.Coding JavaScript

参考：解决H5标签兼容性问题搜集

8.浏览器兼容问题

1.图片间隙问题，用font-size：0

2.低版本浮动双倍间距，用display:inline

更多查看这篇：浏览器兼容问题及解决方法

9.隐藏元素的四种方法

方法	原理及占位情况
display:none	隐藏，不占位
visibility:hidden	隐藏，占位
opactiy:0	变透明，占位
position：absolute； top：-9999px；left：-9999px	消失在屏幕外，占位

10.增删改插节点的方法

注意：以下内容都是用父元素调用~

方法	作用
appendChild(node)	添加在元素的最后面，如果已经存在，则起到剪切的效果
removeChild(node)	删除指定节点
insertBefore(插入节点，被插入节点)	默认插入元素最后面，如果指定第二个参数，则插入第二个节点前面
replaceChild(新节点，旧节点)	第二个参数替换第一个参数

---

总结

以上就是今天的十道题目啦~希望对你有帮助，嘿嘿~。