前端面试题之css

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

携手共筑前端面试宝典

目录

题目一

考点

答案

扩展

题目二

考点

答案

题目一

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同？

考点

盒子模型就是元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型。

答案

• 标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
  宽高指的是 content 的宽高
• 低版本IE盒子模型：内容（content+padding+border）+ 边界margin，
  宽高指的是 content+padding+border 部分的宽高

扩展

CSS 如何设置这两种模型？

box-sizing : content-box  box-sizing : border-box

JS 如何设置获取盒模型对应的宽和高？

dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置

题目二

清除浮动的几种方式，及原理？

考点

清除浮动简单，但这题要引出的是BFC，BFC也是必考的基础知识点。

答案

• ::after / <br> / clear: both
• 创建父级 BFC(overflow:hidden)
• 父级设置高度

BFC （块级格式化上下文 ），是一个独立的渲染区域，让处于  BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件

• 根元素
• position: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !== visible

规则

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN