前端面试题系列-1

前端面试题系列-1

---

---

一、说一说BFC

定义：BFC（Block Formatting Context）块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

BFC布局规则：内部盒子会在垂直方向一个接一个放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。BFC区域不会与float box重叠。计算高度时，浮动元素也参与计算。

BFC形成的条件：float 设置成 left 或 right，position是 absolute 或者 fixed，overflow 不是 visible，为auto，scroll，hidden， display是 flex 或者 inline-block等。

BFC解决的问题：BFC可以清除浮动，但常使用的清除浮动BFC方式只有overflow：hidden，原因是float或者position，虽然父级盒子的内部浮动清除了，但是父级本身脱离了文档流，会对父级后面的兄弟盒子的布局造成影响。

二、样式优先级的规则

第一类：！important，无论引入方式是什么，选择器是什么，优先级都是最高的。

第二类 引入方式：行内样式优先级高于嵌入和外链 ，如果嵌入和外链的选择器一样，则看他们在页面中插入顺序，在后面插入的会覆盖 前面的。

第三类 选择器：id选择器>类选择器>通配符选择器。

第四类 继承样式是比较低的。

第五类 浏览器默认样式优先级最低。

---

三、说一下浮动

关键点：脱离文档流，盒子塌陷，影响其他元素排版，伪元素。

浮动的作用：可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高。

浮动特点：该元素脱标，元素不占位置。如果父级盒子没有设置高度 ，需要被子盒子撑开，那么这时父级盒子的高度就塌陷了。

清除浮动的方法：

1、在不涉及父级元素有超出内容的情况，给浮动元素父级增加overflow：hidden。
2、给浮动元素父级增加.clearfix::after{content:'',display:table;clear:both;},兼容IE低版本，.clearfix{*zoom:1}。

---

四、说一说html语义化

关键点：利于页面内容结构化、可读性高、利于SEO

1、有利于SEO，搜索引擎根据标签来确定上下文和各个关键词的权重。

2、有利于开发和维护，代码可读性高。

---

五、说一说css尺寸设置的单位

关键点：px，rem，em，vw，vh

1、px：绝对长度单位，大小取决于屏幕分辨率

2、em：相对长度单位，在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如width。

3、rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，则使用浏览器默认字体大小。
4、vw：相对于视窗宽度的1%，vh：相对于视窗高度的1%。

---

六、说几个未知宽高元素水平垂直居中方法

1、设置元素相对父级定位position:absolute;left:50%;right:50%，让自身平移自身高度50%，transform: translate(-50%,-50%)

2、 设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center

3、设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block;

---

七、说一说三栏布局的实现方案

圣杯布局的实现方案：

1、三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面。
2、父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度。
3、最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。

优点：不需要添加dom节点 - 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。

双飞翼布局的实现方案：

1、三个盒子对应三个元素，其中中间盒子套了两层。
2、中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽。，3、最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。

---

八、说一说盒模型

CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。
根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。

1、标准模型，给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
2、怪异盒模型，给盒设置 width 和 height，包含了padding和border ，设置的 width 和 height就是盒子实际的大小。
3、设置标准盒模型：box-sizing:content-box 设置怪异盒模型：box-sizing:border-box