前端跳槽面试（慕课网笔记）

来源：互联网发布：网络管理编辑：程序博客网时间：2024/05/17 09:00

这里写图片描述

一面二面

页面布局

https://zhuanlan.zhihu.com/p/25070186?refer=learncoding
- 浮动（margin负值）双飞翼
- 变形，圣杯
- 绝对定位
- 流式布局（浮动）
- BFC
- BFC 区域，不会与浮动元素重叠。
- Flex 布局
- Table 布局
- Grid布局
- http://www.w3cplus.com/css/learncssgrid.html

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        *{            padding: 0;            margin:0;        }        .layout article div{            min-height: 100px;            text-align: center;        }    </style></head><body>    <section class="layout float">        <style meida="screen">            .layout.float .left{                float: left;                width:300px;                background-color: #5F5F5F;            }            .layout.float .right{                float: right;                width:300px;                background-color: #5F5F5F;            }            .layout.float .center{                background-color: #E0E0E0;            }        </style>        <article class="left-right-center">            <div class="left"></div>            <div class="right"></div>            <div class="center">                <h1>浮动解决:脱离文档流，兼容比较好，增加高度溢出，无法使用</h1>            </div>        </article>    </section>    <section class="layout absolute">    <style type="text/css">        .layout.absolute .left-center-right>div{            position: absolute;        }        .layout.absolute .left{            left:0;            width: 300px;            background-color: #FFC3C3;        }        .layout.absolute .center{            left:300px;            right: 300px;            background-color: yellow;        }        .layout.absolute .right{            right: 0px;            width: 300px;            background-color: #A8F2E2;        }    </style>        <article class="left-center-right">            <div class="left"></div>            <div class="center">绝对定位，下面的元素都要脱离文档流，超出</div>            <div class="right"></div>        </article>    </section>    <section class="layout flexbox">    <style type="text/css">        .layout.flexbox{            margin-top: 100px;        }        .layout.flexbox .left-center-right{            display: flex;        }        .layout.flexbox .left{            width:300px;            background-color: #A2EFAA;        }        .layout.flexbox .center{            flex: 1;            background-color: #F8E0A1;        }        .layout.flexbox .right{            width:300px;            background-color: #A2EFAA;        }    </style>        <article class="left-center-right">            <div class="left"></div>            <div class="center">flex</div>            <div class="right"></div>        </article>    </section>    <section class="layout table">    <style type="text/css">        .layout.table .left-center-right{            width: 100%;            display: table;            height: 100px;        }        .layout.table .left-center-right>div{            display: table-cell;        }        .layout.table .left{            width: 300px;            background-color: red;        }        .layout.table .center{            background-color: blue;        }        .layout.table .right{            width: 300px;            background-color: yellow;        }    </style>         <article class="left-center-right">            <div class="left"></div>            <div class="center">表格：需要同时增高</div>            <div class="right"></div>        </article>    </section>    <section class="layout grid">    <style type="text/css">        .layout.grid .left-center-right{            display: grid;            width: 100%;            grid-template-rows:100px;            grid-template-columns:300px auto 300px;        }        .layout.grid .left{            background-color: yellow;        }        .layout.grid .right{            background-color:blue ;        }        .layout.grid .center{            background-color: red;        }    </style>        <article class="left-center-right">            <div class="left"></div>            <div class="center">网格布局，超出高度无法使用</div>            <div class="right"></div>        </article>    </section></body></html>

前端跳槽面试（慕课网笔记）

一面二面

页面布局

延伸：方法的缺点，优点，兼容性，比较，考虑纵向（flex,table支持高度），实用性，为什么

CSS盒模型

谈谈你对CSS盒模型的认识

基本概念：标准模型+IE模型

深入理解BFC

DOM事件

事件分为三个阶段：事件捕获 –> 事件目标 –> 事件冒泡

前端跳槽面试（慕课网笔记）

一面二面

页面布局

延伸：方法的缺点，优点，兼容性，比较，考虑纵向（flex,table支持高度），实用性，为什么

CSS盒模型

谈谈你对CSS盒模型的认识

基本概念：标准模型+IE模型

深入理解BFC

DOM事件

事件分为三个阶段： 事件捕获 –> 事件目标 –> 事件冒泡

事件分为三个阶段：事件捕获 –> 事件目标 –> 事件冒泡