前端面试基础（想到会更新的、）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45952434/article/details/108253981
                    
                        
                    
                    Html5 新增那些标签?
 布局标签：header,section,footer,article,aside
 表单标签：datalist，
 input:type=“ week| datae |time | datetime | number | search | url | tel | color | email | range ”
 多媒体标签：audio，video
 其他标签：progress(进度条)，meter
行内元素的 padding 和 margin 可设置吗？
 行内元素设置水平方向的padding和margin是 可以生效的，但是设置垂直方向的padding和margin虽然看起来是对标签起作用，但实际并没有对周围缘故产生任何影响，所以行内元素 设置垂直方向的padding和margin是无效的。
Html5 的网页为什么只需要写<!DOCTYOE HTML>?
 HTML4.01中的doctype需要DTD进行引用，因为HTML4.01基于SGML。而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。其中，SGML是标准通用标记语言，简单来说就是比HTML，XML更老的标准，这两者都是有SGML发展而来的，而HTML5不是得。
px，em，rem这三者的区别
 px是一个绝对单位，em和rem是一个相对单位，em参考的是当前元素的字体（font-size）大小，rem参考的是页面根元素HTML的字体（font-size）大小。
css3新增伪类有哪些？
 p:first-of-type选择属于其父元素的首个p元素。
 p:last-of-type选择属于其父元素的最后一个p元素。
 p:nth-child(2)选择属于其父元素的第二个子元素。
 p:nth-type-of（2）选择属于其父元素的第二个子元素p。
 ：enabled、：disabled控制表单控件的禁用状态。
 ：checked：单选或者复选框的选中状态。
position几个属性的作用？
 position的常见属性值：relative、absolute、fixed、static，一般都要配合left、top、right、bottom属性使用。
 1）static：默认位置，（static元素会忽略任何top、bottom、left、right声明），一般不常用
 2）relative：位置被设置为relative的元素，偏移的top、right、bottom、left的值都以它原来的位置为基准偏移。注意relative移动后的元素在原来的位置仍占据空间。
 3）absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位 置。
 4）fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的注意设置 fixed 属性的元素在标准流中不占置。
怎么让一个不定宽高的div，垂直水平居中？
 方案一：transform
 方案二：flex弹性布局
 方案三：绝对定位（子绝父相）
清除浮动有哪些常用的方式？
 额外标签法：在浮动元素的最后添加一个块级标签，给其设置一个clear：both的属性（缺点：会在页面上产生很多空白标签）；
 给浮动元素的父元素设置高度（缺点：不太灵活）；
 给浮动元素的父元素设置overflow：hidden；
 使用伪元素法（推荐使用）：
 .clear：after{
 content：‘ ’；
 display：block；
 overflow：hidden；
 visibility：hidden；
 clear：both；
 }
让两个块级元素在一行显示有哪些做法？
 设置显示模式：display：inline|inline-block；
 flex布局：给父元素设置display：flex；
 使用浮动：folat：left|right；
css3新增了哪些新特性？
 媒体查询（@media）；
 transfrom系列：translate平移、rotate旋转、 scale缩放
 动画（animate）；
 过渡效果（transition）；
 flex弹性布局；
 盒子模型计算方式box-sizing：border-box；
 线性渐变（linear-gradient），径向渐变；
 伪元素，文字阴影（text-shadow），边框阴影（bo-shadow），圆角（border-radius）
display:none 和 visibility:hidden 的区别?
 display:none 隐藏元素后,不占位;
 visibility:hidden 隐藏元素后占位.
H5 都新增了那些新特性?
 语义化的标(header,nav,footer,aside,article,section)
 本地存储 sessionStorage,localStorage;
 拖拽释放(Drag and drop) API 音频、视频 API(audio,video)
 画布(Canvas) API
 地理(Geolocation) API
 表单控件，calendar、date、time、email、url、search
 新的技术 websocket
Es6 中新增了那些数据类型?
 Symbol 类型（基本）
 Set 类型（复杂）
 Map 类型（复杂）
 WeakSet 类型（复杂）
 WeakMap 类型（复杂）
 TypedArray 类型（复杂）
ES6 新增了那些特性?
 const(声明常量), let(声明变量)关键字;
 map 和 set 数据类型;
 模板字符串;
 对象数组解构赋值;
 函数剩余参数;(…arg)
 延展运算符;(…)
 函数默认参数;fn(name=’zs’)
 对象字面量的增强(属性名和属性值相同, 可缺省);
 Promise 异步对象;
 class 类的支持
常用浏览器及内核
 浏览器：IE，Chrome，FireFox，Safari，Opera。
 内核：Trident，Gecko，Presto，Webkit。
盒模型理解
 CSS盒模型本质上是一个盒子，封装周围的HTML元素，所有HTML元素可以看作盒子，它包括：边距，边框，填充，和实际内容。
 分类：标准盒模型和IE盒模型（怪异盒模型）
 相同点：都是由margin ,border,padding,content组成
 不同点：：计算宽/高度方法的不同，标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；怪异模式下：总宽度是由content减去padding、border得来的。
 CSS3指定盒子模型种类：box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

                