前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）

推荐大家的使用本篇文章的方式：
先看问题自己会不会，如果会的话，要自己说一遍，组织好语言。

CSS的面试内容主要可以分四个部分：
CSS基础、页面布局、定位与浮动和场景应用

CSS部分会涉及到代码的编写，需要自己动手敲一下，面试的时候可能会涉及让你手写或者口述代码。

二. 页面布局

1. 两栏布局（⭐⭐⭐⭐）

一般是左边固定，右边自适应
方法一：

利用浮动布局，利用margin-left把左边栏的位置空出来

<div id = "left">
</div>
<div id = "right">
</div>

#left{width: 300px;background-color: yellow;float:left;
}
#right{background-color: blue;margin-left:300px;
}

方法二：
浮动布局+负外边距

<div id = "left">
</div>
<div id = "right"><div id="content"></div>
</div>

#left{width:300px;background-color: yellow;float:left;margin-right:-100%;
}
#right{width:100%;float:left;
}
#content{margin-left:300px;background-color:blue;
}

左侧固定栏指定一个右侧的100%的负外边距，为整个屏幕的宽度，这就使得right的最左侧可以与屏幕最左侧对齐。
此时right的宽度是100%，因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置，即左侧栏的宽度300px

方法三：
绝对定位
这个方法简单粗暴

<div id="left">
</div>
<div id="right">
</div>

#left{position:absolute;left:0;width:200px;
}
#right{margin-left:200px;
}

方法四：
flex：

<div id = "content"><div id="left"></div><div id="right"></div>
</div>

#content{display:flex;
}
#left{flex: 0 0 200px;
}
#right{flex: 1 1;
}

2. 三栏布局（⭐⭐⭐⭐）

方法一：
绝对定位

<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>

#left{ width:200px;background-color:yellow;position:absolute;top:0;left:0;
}
#middle{background-color:blue;margin-left:200px;margin-right:300px;
}
#right{width:300px;background-color:orange;position:absolute;
}

方法二：
浮动+负外边距（双飞翼布局）

<div id="middle"><div id="content"> </div>
</div><div id = "left">
</div><div id="right">
</div>

#middle{background-color:blue;width:100%;float:left;
}
#left{width:200px;background-color:yellow;float:left;margin-left:-100%;
}
#right{width:300px;background-color:orange;margin-left'-300px;
}
#content{margin-left:200px;margin-right:300px;
}

左侧栏也是左浮动，默认情况下由于前面的中间栏div占据了100%，因此这个左侧栏是在中间栏下方一行的。为左侧栏设置margin-left:-100%，即整个屏幕的宽度100%，这就令左侧栏跑到了中间栏的最左侧。
右侧栏也是左浮动，此时默认情况下也是在中间栏下方一行的，同样利用margin-left:-300px，即其自身的宽度，使其到上一行最右侧的位置。
中间栏的内容部分则需要利用分别等于左右侧栏宽度的外边距来空出它们的位置。
这种方法的好处就是主体main在前面，可以先加载主题内容。

方法三：
浮动定位

<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>

#left{width:300px;background-color:orange;float:left;
}
#right{width:200px;background-color:yellow;float:right;
}
#middle{background-color:blue;margin-left:300px;margin-right:200px;
}

方法四：
flex

<div><article></article><nav></nav><aside></aside>
</div>

div{display:-webkit-flex;display:flex;margin:0;padding:0;height:800px;
}
article{flex:1 1;order:2;  background-color:yellow;
}nav{flex:0 0 200px;order:1;  background-color:blue;
}
aside{flex:0 0 200px;order:3;background-color:aqua;
}

3. 水平垂直居中（⭐⭐⭐⭐）

水平垂直居中的几种方式
元素定宽高
方法一：
绝对定位+calc

<div class="outer"><div class="inner"></div>
</div>

 .outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);width: 100px;height: 100px;background-color: yellow;}

方法二：
绝对定位+margin

<div class="outer"><div class="inner"></div>
</div>

.outer {position: relative;width: 200px;height: 200px;background-color: red;`在这里插入代码片`}.inner {position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;width: 100px;height: 100px;background-color: yellow;}

元素不定宽高
方法一：
绝对定位+margin:auto

<div class="outer"><div class="inner"></div>
</div>

.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 100px;background-color: yellow;}

方法二：
绝对定位+transform

<div class="outer"><div class="inner"></div>
</div>

<style>.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background-color: yellow;}
</style>

方法三：
flex布局

    .outer {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;}.inner {width: 100px;height: 100px;background-color: yellow;}

方法四：
grid布局

    .outer {display: grid;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;}.inner {width: 100px;height: 100px;background-color: yellow;}

方法五：
table布局

 .outer {display: table-cell;text-align: center;vertical-align: middle;width: 200px;height: 200px;background-color: red;}.inner {display: inline-block;width: 100px;height: 100px;background-color: yellow;}

4. flex（⭐⭐⭐⭐）

Flex布局教程
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

flex 有两根轴线，分别是主轴和交叉轴，主轴的方向由 flex-diretion 属性控制，交叉轴始终垂直于主轴。

容器为项目的分布提供的空间，轴线则控制项目的排列跟对齐的方向， flex 是一种一维的布局，一个容器只能是一行（左右）或者一列（上下），通过主轴控制项目排列的方向（上下/左右），交叉轴配合实现不同的对齐方式。有时候一行放不下，可以实现多行的布局，但是对于 flex 来说，新的一行就是一个新的独立的 flex 容器。作为对比的是另外一个二维布局 CSS Grid 布局，可以同时处理行和列上的布局。

以下6个属性设置在容器上：
● flex-direction属性决定主轴的方向（即项目的排列方向）。
● flex-wrap属性定义，如果一条轴线排不下，如何换行。
● flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
● justify-content属性定义了项目在主轴上的对齐方式。
● align-items属性定义项目在交叉轴上如何对齐。
● align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：
● order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
● flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
● flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
● flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
● flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
● align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex:1 表示
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。flex:1 表示 flex: 1 1 auto，它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)：
● 第一个参数表示: flex-grow 定义项目的。放大比例，默认为0，即如果存在剩余空间，也不放大；
● 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
● 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

5. CSS布局单位（⭐⭐⭐）

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
● CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
● 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
● em：文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
● rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
● vw：相对于视窗的宽度，视窗宽度是100vw；
● vh：相对于视窗的高度，视窗高度是100vh；
● vmin：vw和vh中的较小值；
● vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：
● 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
● vw/vm：相对于视窗的尺寸

px、em、rem的区别及使用场景
三者的区别：
● px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
● em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
● em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：
● 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。
● 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

6. 响应式布局（⭐⭐⭐）

所谓响应式页面，是指一套页面，能够适配多种终端，比如宽屏pc电脑，平板，手机，听起来极为的棒，但是，响应式布局极容易出现各式各样的兼容问题，目前社会主流布局方案，依然是单独制作移动端页面，所以对响应式，只要抱着能看懂，能做出简单的网页布局即可。
响应式布局

7. 品（⭐⭐⭐）

方法一：
浮动需要知道元素的大小

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>

div{ width:100px; height:100px; font-size:40px; line-height:100px; color:#fff; text-align:center;
}.div1{ background:red; margin:0 auto;
}.div2{ background: green; float:left; margin-left: 50%;
}.div3{ background: blue; float:left; margin-left: -200px;
}

方法二：

inline-block

div{ width:100px; height:100px; font-size:40px; line-height:100px; color:#fff; text-align:center;
}.div1{ background:red; margin:0 auto;
}.div2{ background: green; display: inline-block;margin-left: 50%;
}.div3{ background: blue; display: inline-block;margin-left: -200px;
}

8. 九宫格（⭐⭐）

使用CSS实现九宫格布局的几种方式
基础代码：

<div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
</div>

ul {padding: 0;
}li { list-style: none;text-align: center;border-radius: 5px;background: skyblue;
}

方法一：
flex
flex布局实现九宫格很简单，需要设置一个flex-wrap: wrap;使得盒子在该换行的时候进行换行。

由于我们给每个元素设置了下边距和右边距，所以最后同一列（3、6、9）的右边距和最后一行（7、8、9）的下边距撑大了ul，所以这里使用类型选择器来消除他们的影响。最终的实现代码如下：

ul {display: flex;flex-wrap: wrap;width: 100%;height: 100%;
}li {width: 30%;height: 30%;margin-right: 5%;margin-bottom: 5%;
}li:nth-of-type(3n){ margin-right: 0;
}li:nth-of-type(n+7){ margin-bottom: 0;
}

方法二：
grid

ul {width: 100%;height: 100%;display: grid;grid-template-columns: 30% 30% 30%; grid-template-rows: 30% 30% 30%; grid-gap: 5%;
}

方法三：
float
这里首先需要给父元素的div设置一个宽度，宽度值为：盒子宽 * 3 + 间距 * 2；然后给每个盒子设置固定的宽高，为了让他换行，可以使用float来实现，由于子元素的浮动，形成了BFC，所以父元素ul使用overflow:hidden；来消除浮动带来的影响。最终的实现代码如下：

ul {width: 100%;height: 100%;overflow: hidden;
}li {float: left;width: 30%;height: 30%;margin-right: 5%;margin-bottom: 5%;
}li:nth-of-type(3n){ margin-right: 0;
}li:nth-of-type(n+7){ margin-bottom: 0;
}

三. 定位与浮动

1. 清除浮动（⭐⭐⭐⭐）

浮动的清除

什么是浮动：

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）

浮动的工作原理：

● 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
● 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？
● 父元素的高度无法被撑开，影响与父元素同级的元素
● 与浮动元素同级的非浮动元素会跟随其后
● 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：
● 给父级div定义height属性
● 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
● 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
● 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

2. BFC（⭐⭐⭐⭐）

什么是BFC

BFC（Block Formatting Context）称为块级格式化环境，其实BFC是一个CSS中一个隐含的属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局的区域。

BFC的布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
计算BFC的高度时，浮动元素也参与计算。

如何开启BFC：

body根元素
设置浮动，不包括none
设置定位，absoulte或者fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

BFC的作用：

解决外边距的塌陷问题（垂直塌陷）

开发中，前端的布局手段，离不开外边距margin，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。

看上面的例子，两个盒子都有100的外边距，但是实际上两个盒子的距离却只有100px，按理来说应该是200才对，这就是margin垂直塌陷。那要解决这个问题只需要给这两个盒子都加一个父元素，并且将这个父元素设置成BFC区域，就可以解决这个margin塌陷的问题。

利用BFC解决包含塌陷

有时候我们给子元素加margin可能会带着父元素一起跑

很显然，我们只是想要子元素距离父元素50px，而不是整个父元素都一起跑。这个时候用padding可以解决问题，但是用BFC同样可以解决

只需要将父元素变为BFC区域，就能得到解决

清除浮动

overflow：hidden清除浮动的原理是BFC。BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。

BFC可以阻止标准流元素被浮动元素覆盖

大家都知道，浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

那么这个时候我们只需要让蓝色区域触发BFC，就可以做到不受浮动元素影响

3. position（⭐⭐⭐⭐）

position有5个值，分别为static，relative，absolute，fixed，sticky。

static
默认属性，会按照正常的文档流进行排序，不会受到top、bottome、left、right的影响
relative
relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。
absolute
absolute绝对定位会脱离正常的文档流，相对于最近的进行过定位的（非static）父级元素定位，若没有父级元素进行过定位，则相对于即浏览器窗口定位。
fixed
fixed固定定位同样是脱离正常的文档流，一直相对于浏览器窗口定位，无论页面如何滚动，此元素总在屏幕的同一个位置。
注：当fixed定位的父元素使用了transform的样式时，fixed定位会失效，变成和absolute一样的效果。
sticky
粘性定位，这是一个带过渡效果的定位方式，只有在滚动时才能看出其变化效果
当偏移量大于指定值时，以static方式显示
当偏移量小于指定值时，以fixed方式显示，但却像relative方式一样占据父容器空间
当元素到达父容器边缘时，位置相当于父容器不再变化

4. margin重叠问题（⭐⭐⭐）

什么是margin重叠：

两个或多个盒子可能（相邻）也可能（嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

可能发生的情况：

有可能发生在父子元素，也有可能发生在兄弟元素之间

兄弟之间之间：兄弟元素之间是真正的margin重叠。
父子之间：父子之间实质为，当子元素的margin大于父元素时，会超过父元素的范围，显示出来就是那个大显哪个

意义：外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。

设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

解决方法：

对于父子元素：

1、子层元素取消margin，用父元素的padding代替

2、内层元素透明边框 border:1px solid transparent; //这是基于最上面说的(其间没有任何非空内容、补白、边框)原理实现。

3、内层元素设置为BFC。

对于兄弟元素：

1、设置两个兄弟为两个BFC区域

2、给其中一个兄弟套上一个div，设置border:1px solid white;也是用了(其间没有任何非空内容、补白、边框)原理实现。

5. 元素的层叠顺序（⭐）

对于上图，由上到下分别是：
（1）背景和边框：建立当前层叠上下文元素的背景和边框。
（2）负的z-index：当前层叠上下文中，z-index属性值为负的元素。
（3）块级盒：文档流内非行内级非定位后代元素。
（4）浮动盒：非定位浮动元素。
（5）行内盒：文档流内行内级非定位后代元素。
（6）z-index:0：层叠级数为0的定位元素。
（7）正z-index：z-index属性值为正的定位元素。

注意: 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。

四. 场景应用

1. 实现一个三角形（⭐⭐⭐⭐）

CSS绘制三角形主要用到的是border属性，也就是边框

div {width: 0;height: 0;border: 100px solid;border-color: orange blue red green;
}

div {width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;
}

div {width: 0;height: 0;border-bottom: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;
}

实现一个直角梯形

.trapezoid {height: 0;width: 100px;border-bottom: 100px solid red;border-right: 40px solid transparent;
}

实现一个等腰梯形

.trapezoid {height:0;width:100px;border-width:0 40px 100px 40px;border-style:none solid solid;border-color:transparent transparent red;
}

2. 如何解决1px问题（⭐⭐⭐⭐）

1px 问题指的是：在一些 Retina屏幕的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述：

window.devicePixelRatio = 设备的物理像素 / CSS像素。

3. 实现一个扇形（⭐⭐⭐）

实现一个扇形

div{border: 100px solid transparent;width: 0;height: 0;border-radius: 100px;border-top-color: red;
}

实现一个圆

div {background-color: red;height: 100px;width: 100px;border-radius: 50%;
}

实现半圆
div {
background-color: red;
width: 100px;
height: 50px;
border-radius: 0px 0px 100px 100px;
}

4. 画一条0.5px的线（⭐⭐⭐）

方法一：

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

transform: scale(0.5,0.5);

方法二：

采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果

5. 设置小于12px的字体（⭐⭐⭐）

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

解决办法：
● 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
● 使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；
● 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

6. 实现一个宽高自适应的正方形（⭐⭐）

方法一：vw

.square {width: 10%;height: 10vw;background: tomato;
}

方法二：
利用元素的margin/padding百分比是相对父元素width的性质来实现：

.square {width: 20%;height: 0;padding-top: 20%;background: orange;
}