2021-09-30 15:30 牛客运营

关注

进阶-页面布局

3 进阶-页面布局

3.1 请问定位布局position属性有哪些取值？

【考点映射】

定位布局
position属性

【频率】★★★★★

【难度】☆

【参考答案】

定位布局：页面元素CSS样式采用position属性，可在top/bottom/right/left四个方向进行位置移动，从而达到定位效果，position属性可取以下7个值：

1. 相对定位 relative

不会使元素脱离文档流（原本位置会被保留，即改变位置也不会占用新位置）
相对于自身原本位置移动（没有定位偏移量则对元素无影响）
不影响元素本身特性（无论块级元素或行内元素，保留其原本特性）
常用于提升层级，从而改变元素覆盖关系，若两个都为定位元素，后面的会覆盖前面

2. 绝对定位 absolute

使元素完全脱离文档流（在文档流中不再占原来位置）
行内元素设置定位效果后，支持设置宽高
区块元素设置定位效果后，未设置宽度时由内容撑开宽度
相对于最近一个有定位的父元素进行偏移，如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口（必须有参照物）
子绝父相，一般配合相对定位使用，（将父元素设置相对定位，子元素相对于父元素偏移）
可提升层级

3. 固定定位 fixed

直接相对于浏览器窗口进行“绝对定位”
浮动在页面中，元素位置不会随浏览器窗口滚动条滚动而变化
不会受文档流动影响

4. 粘性定位 sticky

基于用户的滚动来定位，在相对定位与绝对定位两者间切换。滚动前相当于position:relative，当页面滚动超出目标区域时，相当于position:fixed，会将元素固定在目标位置
相对于离它最近的具有滚动框的父级元素，如果父级元素都不可以滚动，那相对于浏览器窗口计算偏移量
如top: 50px，在sticky元素到达距离相对定位的元素顶部50px的位置时固定，无论怎么滚动，都不再向上移动
兼容性不好，如Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位，通常需要结合CSS3兼容方案

5. 静态定位 static

默认定位，遵循正常的文档流
元素不会受到影响

6. 继承值 inherit

从父元素继承 position 属性值

7. 初始值 initial

initial 关键字可用于任何 HTML 元素上任何 CSS 属性
可将所有CSS属性恢复到初始状态

【延伸考点】

1. fixed定位会出现失效情况吗？有什么解决办法吗？

存在常见3种fixed定位失效情况：

1. 父元素的transform属性值不为none时，子元素的fixed失效（比较常见，仅在部分浏览器中失效）

失效原因：当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先（摘自MDN）

解决办法：

经过实验发现，absolute定位在该情况下不会失效，可利用absolute定位模拟fixed效果，主要实现思路：将html的滚动条禁用，开启body滚动条，对该元素absolute定位，并不设置父级元素定位，会相对document定位，但其滚动条未开启，不会受body滚动影响

2. perspective属性值不为none时（不常见）

浏览器都不支持 perspective 属性，Chrome 和 Safari 支持替代的 -webkit-perspective 属性，目前可行办法就是删掉perspective属性

3. 元素的will-change中指定了任意 CSS 属性

目前可行办法就是尽量避免给fixed定位元素设置will-change

3.2 请问你了解浮动布局float属性吗？

【考点映射】

浮动布局
float属性

【频率】★★★★★

【难度】☆

【参考答案】

浮动布局：为方便页面设计，给元素设置float属性，将元素脱离文档流，浮动框进行左右移动，直至外边缘遇到包含框或者另一个浮动框边缘，再通过margin属性调整位置，float属性可取3个值：left：左浮动、right：右浮动、none：不浮动（默认）

浮动的影响：

改变块级元素的排列方式，内容从上下排列显示变成水平排列显示
浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠
浮动的块级元素的宽度由内容撑开，行内元素可设宽高、margin和padding均有效，可理解为隐式转换为inline-block元素

【延伸考点】

浮动布局最常产生什么问题？

通常父级盒子不设置高度时，高度将由内容或子元素撑开，当子元素浮动脱离文档流后，父盒子就会出现高度塌陷，边框变成一条线，通常需要清除浮动来解决该问题

如下图，给父盒子设置红色边框，内部放big、small两个子盒子，当两者不浮动时，会默认撑开父盒子，两者高度和为父盒子高度；当两个子盒子加上float属性后，底部蓝色盒子就会顶上来，父盒子无内容撑开，变成一条线

3.3 请问BFC布局有哪些特点、触发条件以及实际应用？

【考点映射】

BFC布局

【频率】★★★★★

【难度】☆

【参考答案】

BFC（Block Formatting Context）：格式化上下文，也称BFC布局，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域，与其他元素隔离，不受外部布局影响

BFC布局特点：

在BFC区域内，内部盒子会在垂直方向上一个接一个地放置
在BFC区域内，内部盒子垂直方向上的距离由margin决定。（可理解为：属于同一个BFC的两个相邻盒子的上下margin会发生重叠）
同一个BFC区域内，设置了float属性的盒子不会重叠
BFC就是页面上的一个隔离的独立容器，容器内外元素互不影响
计算BFC的高度时，区域内的浮动元素也参与计算

BFC布局触发条件（满足任意一个即可形成BFC）：

根元素<html>
浮动元素：float不为none
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、table-caption、flex、inline-flex
overflow不为visible（hidden、auto、scroll）

BFC布局实际应用：

清除浮动，通过设置overflow:hidden解决父元素坍塌问题
垂直margin合并，BFC区域内两个相邻元素的垂直外边距会发生叠加，叠加后的外边距为两者外边距的最大值。这样可保持各区域间上下间距一致，比如多个段落之间与顶部底部的边距保持一致
防止垂直 margin 合并，反之可以在元素外层包裹一层容器，并触发该容器生成一个新的BFC布局，与相邻元素隔离开来
实现自适应双栏、三栏布局，利用浮动、定位、Flex布局原理可实现多种自适应布局

3.4 请问如何将一个<div>盒子在页面垂直水平居中？

【考点映射】

垂直水平居中布局（代码面试可能需手撕）

【频率】★★★★★

【难度】☆

【参考答案】

元素宽高固定时（设元素宽高为100px）：

absolute + 负margin

.box {     
    position:absolute;;     
    top:50%;
    left:50%;     
    margin-left:-50px;     
    margin-top:-50px;
}

absolute + margin auto

.box {     
    position:absolute;;     
    top:0;
    left:0;
    right:0;     
    bottom:0;    
    margin:auto;     
}

absolute + calc()

.box{     
    position:absolute;;     
    top:calc(50% - 50px);     
    left:calc(50% - 50px);
}

元素宽高未知时：

absolute + transform

.box{
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
}

table，需要先打造一个表格结构，再将盒子放入单元格中，表格单元格中的内容本身就是垂直居中的，此法弊端：增加了很多冗余代码

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123</div>
            </td>
        </tr>
    </tbody>
</table>
<style type="text/css">
.wp{
    text-align: center;

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端岗面试求职真题解析文章被收录于专栏

前端岗位面试求职攻略及真题解析~~