css面试题

1.页面布局

• 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应

答案：

• 浮动布局

<section class="layout float">
    <article class="left-rignt-center">
        <div class="left"></div>
        <div class="right"></div>
        <div calss="center"></div>
    </article>
</section>
<style>
    html *{margin:0;padding:0;}
    .layout article div{height:100px;}
    .layout.float .left{float:left;width:300px;background:red;}
    .layout.float .riight{float:right;width:300px;background:red;}
    .layout.float .center{background:yellow;}
</style>

• 绝对定位

<section class="layout absolute">
    <article class="left-rignt-center">
        <div class="left"></div>
        <div class="center"></div>
        <div calss="right"></div>
    </article>
</section>
<style>
    .layout article div {position:absolute;}
    .layout.absolute .left{left:0;width:300px;background:red;}
    .layout.absolute .center{left:300px;right:300px;background:yellow;}
    .layout.absolute .right{right:0px;width:300px;background:blue;}
<style>

• flexbox

<section class="layout flexbox">
    <article class="left-rignt-center">
        <div class="left"></div>
        <div class="center"></div>
        <div calss="right"></div>
    </article>
</section>
<style>
.layout.flexbox .left-center-right{display:flex;}
.layout.flexbox .left{width:300px;background:red;}
.layout.flexbox .center{flex:1;background:yellow;}
.layout.flexbox .right{width:300px;background:blue;}
</style>

• table布局

<section class="layout table">
    <article class="left-rignt-center">
        <div class="left"></div>
        <div class="center"></div>
        <div calss="right"></div>
    </article>
</section>
<style>
.layout.table .left-center-right{width:100%;display:table;height:100px;}
.layout.table .article div{display:table-cell;}
.layout.table .left{width:300px;background:red;}
.layout.table .center{background:yellow;}
.layout.table .right{width:300px;background:blue;}
</style>

• 网格布局(grid)

<section class="layout grid">
    <article class="left-rignt-center">
        <div class="left"></div>
        <div class="center"></div>
        <div calss="right"></div>
    </article>
</section>
<style>
.layout.grid .article{
  display:grid;width:100px;
  grid-template-rows:100px;
  grid-template-columns:300px auto 300px;
}
.layout.grid .left{background:red;}
.layout.grid .center{background:yellow;}
.layout.grid .right{background:blue;}
</style>

优缺点

1.flaot：缺点：脱离文档流处理起浮动周边的DOM元素比较复杂；优点：兼容性比较好；

2.绝对定位：缺点：布局脱离文档流导致其子元素也要脱离文档流，可使用性比较差优点：快捷；

3.flex:优点：解决float和绝对定位的问题，比较流行

4.table布局：缺点：高度宽度问题；优点：兼容性好（flex不兼容IE8）

5.grid布局：缺点：；优点：代码量少

扩展：

去掉高度已知：flex、table不受影响；

页面布局的变通：

三栏布局

• 左右宽度固定，中间自适应
• 上下高度固定中间自适应

两栏布局

• 左宽度固定，右自适应
• 右宽度固定，左自适应
• 上高度固定，下自适应
• 下高度固定，上自适应

2.css盒模型

• 基本概念：标准模型 + IE模型
• 标准模型和IE模型和区别(计算宽度和高度)IE模型计算

1. content+padding和border

• css如何设置这两种模型：

1. box-sizing:content-box;box-sizing:border-box;

• js如何获取盒模型的宽和高：

1. dom.style.width/height(内连样式宽和高)；
2. dom.currentStyle.width/height(只有IE支持)；
3. window.getComputedStyle(dom).width/height(最常用)；
4. dom.getBoundindClieentRect().width/height;(top,left,width,height)

• 实例题（根据盒模型解释边距重叠）

1. 父子边距重叠 (父元素不设置高度，子元素设置高度和外边距，父元素高度等于子元素高度)
2. 兄弟元素边距重叠（下外边距和上边距重叠取最大值）
3. 边距重叠解决方案：创建BFC

• BFC（边距重叠解决方案）

1. 概念：块级格式化上下文
2. 原理：元素垂直方向的边距重叠；BFC的区域不会与浮动元素的box重叠；BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反过来，里面的元素也不会影响外面的元素；计算BFC高度的时候浮动元素也会参与计算；
3. 创建BFC方式：overfloat不为visible;float值不为none；position值不为static和relative；display：table,table-cell,table-caption