面试前端面试题总结一

Posted 2021-03-20 liyaping

1. CSS 盒子模型

大体包含:margin、padding、border、content。

官网的解释：

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色，背景，边框方面 --- 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

 

盒子模型和box-sizing

为了我们定义元素的大小，box-sizing出现了。其属性值有：content-box（盒子宽度只包含content）、border-box（盒子实际宽度包含content、padding、border）。默认为content-box。

 

2.绝对定位和相对定位

position定位问题：分为无特殊定位（static）绝对定位（absolute） 相对定位（relative）和固定定位（fixed）。

static：无特殊定位，按照html标准元素排列
relative：相对定位，占元素位置，偏移根据原有位置进行一个偏移
absolute：绝对定位，不占元素位置，偏移位置根据父元素（父元素要使用相对定位才可以）。 而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
fixed：固定定位，不占元素位置，偏移位置根据body进行一个偏移。  而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

 

 

3.浮动