前端知识整理1

前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:）1.HTML2.CSS2.1 css三栏布局实现方案题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应1.浮动布局实现方法：左栏、右栏分别左右浮动，定宽300px，中间不设置宽度自适应缺点：浮动元素脱离文档流，需要清除浮动，如果处理不好，会导致很多问题（影响前后标签、父级标签的位置及 width height 属性）。优点：比较简单，兼容性比较好。只要清除浮动做的好，是没有什么问题的。2.绝对定位布局实现方法：三栏设置绝对定位，左栏 left:0; width:300px，右栏 right:0; width:300px，中间 left:300px; right:300px;缺点：脱离文档流，之后的元素也要脱离文档流。有效性、可使用性比较差。优点：方便快捷，配合js使用方便。3.flex布局实现方法：三栏的父元素 display:flex; 中间 flex:1; 左栏、右栏定宽300px;优点：移动端已经大量使用，是css3为了解决上面两种方案的缺点而出现，是相对比较完美的方案。缺点：不能兼容IE8及以下浏览器。4.表格布局实现方法：三栏的父元素 display:table; 三栏分别设置 display: table-cell; 左栏、右栏定宽300px;优点：用表格布局实现三栏布局很简单就能搞定，兼容性好（兼容IE8），在flex布局不兼容的时候，可以尝试表格布局。缺点：有些历史诟病，只适用部分场景；某个内容撑开了，其他内容也会跟着撑开，有时候这种效果不是我们想要的。5.网格布局实现方式：三栏的父元素 display:grid; grid-template-rows:100px; grid-template-columns:300px auto 300px;网格布局是新出的一种布局方式，技术比较新，还未普及，但是也需要我们掌握。三个延伸问题1.几种布局方式的优缺点？如上2.假设把高度去掉，三栏的高度根据内容自适应，那个方案不再适用，哪个还能适用？flex和table还能适用，其余不再适用。3.兼容性如何，在真实业务中，哪个方案最实用？如上，根据使用场景和业务需求，选择合适的方案。2.2 清除浮动的实现方案题目：有哪些清除浮动的方案？每种方案的优缺点？2.3 css盒模型题目：谈谈你对css盒模型的认识？1.基本概念（标准模型+IE模型）css 盒模型：margin + border + padding + content2.标准模型和IE模型的区别区别就是高度和宽度的计算方式不同标准模型：width(height) = contentIE模型：width(height) = border + padding + content3.css如何设置这两种模型标准模型：box-sizing: content-box; （浏览器默认值）IE模型：box-sizing: border-box;4.JS如何设置、获取盒模型对应的宽和高（1）dom.style.width/height ，这种方式只能获取内联样式设置的宽和高（2）dom.currentStyle.width/height ，不管是内联样式、<style>标签写的样式、<link>外联样式，即获取渲染后的宽高（仅IE支持）（3）window.getComputedStyle(dom).width/height ，获取渲染后的宽高（兼容性更好、通用性更好，chrome/firefox）（4）dom.getBoundingClientRect().width/height ，获取渲染后的宽高（计算元素的绝对位置，返回top/left/width/height）5.根据盒模型解释边距重叠（1）父子元素边距重叠，取最大值合并（2）兄弟元素边距重叠，取最大值合并（3）空元素上下边距重叠，取最大值合并6.BFC（边距重叠解决方案）BFC的基本概念：块级格式化上下文BFC的原理（BFC的渲染规则）：（1）在BFC元素的垂直方向的边距会发生重叠；（2）BFC的区域不会与浮动元素发生重叠；（3）BFC在页面上是一个独立的容器，外面的元素不影响里面，里面的元素不影响外面；（4）计算BFC的高度时，浮动元素也会参与计算；（BFC子元素即使是float也会参与高度计算）如何创建BFC？（1）float的值不为none；（2）position的值不为static或者relative（可以设置为absolute或者fixed）；（3）display:inline-block; 或者table/table-cell等与table相关的属性（4）overflow:hidden; overflow:auto;