面试1：CSS布局

课程思维导图

CSS布局.png

Q：三栏布局，高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么？

```html
<!-- 
    float实现
    优点：兼容性好
    缺点：脱离文档流，DOM节点顺序错误
 -->
<section class="float">
    <style>
        .float .left {
            float: left;
            width: 300px;
            background: green;
        }
        .float .center {
            background: yellow;
        }
        .float .right {
            width: 300px;
            float: right;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>
<!-- 
    absolute实现
    优点：快捷
    缺点：脱离文档流
 -->
<section class="absolute">
    <style>
        .absolute article > div {
            position: absolute;
        }
        .absolute .left {
            left: 0;
            width: 300px;
            background: green;
        }
        .absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .absolute .right {  
            width: 300px;
            right: 0;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>
<!-- 
    margin负值实现
    优点：兼容性好
    缺点：节点顺序错误，需要多一层额外的div，出问题难以排查
 -->
<section class="margin">
    <style>
        .absolute .center {
            width:100%;
            float:left;
        }
        .absolute .main {
            margin: 0 100px;
            background:yellow;
        }
        .absolute .left {
            float:left;
            width: 300px;
            margin-left: -100%;
            background: green;
        }
        
        .absolute .right {  
            width: 300px;
            float:right;
            margin: -300px;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="center">
            <div class="main"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</section>
<!-- 
    flex实现
    优点：新布局方式，解决以上两种布局方式的缺陷
    缺点：兼容性较差
 -->
<section class="flex">
    <style>
        .flex {
            margin-top: 110px;
        }
        .flex .left-center-right {
            display: flex;
        }
        .flex .left {
            width: 300px;
            background: green;
        }
        .flex .center {
            flex:1;
            background: yellow;
        }
        .flex .right {
            width: 300px;
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>
<!-- 
    table实现
    优点：兼容性好、快捷
    缺点：单元格限制，当某个单元格高度调整时，其他单元格也会被调整
 -->
<section class="table">
    <style>
        .table .left-center-right {
            width: 100%;
            height: 100px;
            display: table;
        }
        .table .left-center-right div {
            display: table-cell;
        }
        .table .left {
            width: 300px;
            background: green;
        }
        .table .center {
            background: yellow;
        }
        .table .right {
            width: 300px;
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>
<!-- 
    grid实现
    优点：将网格布局标准化，将复杂问题简单化
    缺点：兼容性差
 -->
<section class="grid">
    <style>
        .grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows : 100px;
            grid-template-columns : 300px auto 300px;
        }
        .grid .left {
            background: green;
        }
        .grid .center {
            background: yellow;
        }
        .grid .right {
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>
```

Q：三栏布局，高度未知，以上布局哪些仍可用，哪些不可用？

  1. float：不可用
  2. absolute：不可用
  3. flex：可用
  4. table：可用
  5. grid：不可用

Q：三栏布局，高度已知，左中固定，右自适应

与左右固定，中自适应的三栏布局

Q：三栏布局，上下固定，中自适应

    <body>
        <style>
            * {
                margin:0;
                padding: :0;
            }
            article {
                width: 100%;
            }
            .top{
                height: 200px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
            }
            .bottom {
                height: 200px;
                background: blue;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            .center {
                background: yellow;
                position: absolute;
                height: auto;
                top: 200px;
                bottom: 200px;
            }
        </style>
        <article class="top"></article>
        <article class="center"></article>
        <article class="bottom"></article>
    </body>

Q：CSS居中布局有哪些，适用于什么场景，举例说明？

一、CSS居中：margin设为auto

  1. 做法：把要居中的元素的margin-left和margin-right都设为auto
  2. 场景：只能进行水平的居中，且对浮动元素或绝对定位元素无效。

二、CSS居中：使用 text-align:center

  1. 场景：只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

三、CSS居中：使用line-height让单行的文字垂直居中

  1. 做法：把文字的line-height设为文字父容器的高度
  2. 场景：适用于只有一行文字的情况。

四、CSS居中：使用表格

  1. 做法：td/th元素设置align="center"、valign="middle"即可处理单元格里面内容的水平和垂直居中问题
  2. 场景：必须是table

五、CSS居中：使用display:table-cell来居中

  1. 做法：通过display:table-cell 模拟表格单元格，这样就可以利用表格那很方便的居中特性了。
  2. 场景：IE6、IE7都无效。

六、CSS居中：使用绝对定位进行居中

  1. 场景：只适用于宽度或高度已知的元素。

  2. 原理：通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

    <div class="parent">
        <div class="child"></div>
</div>
<style>
    .parent {
        position:relative;
    }
    .child {
        width:100px;
        height:100px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-right:-50px;
    }
</style>

七、CSS居中：使用绝对定位进行居中

  1. 场景：只适用于宽度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

  2. 原理：这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移。

    <div class="parent">
    <div class="child"></div>
</div>
<style>
    .parent {
        position:relative;
    }
    .child {
        position:absolute;
        width:100px;
        height:100px;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
    }
</style>

八、CSS居中：使用浮动配合相对定位来进行水平居中

  1. 场景：不用知道要居中的元素的宽度，缺点是需要一个多余的元素来包裹要居中的元素。

  2. 原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

    <div class="parent">
    <div class="wrap">
        <div class="child"></div>
    </div>
</div>
<style>
    .parent{
        width:300px;
        height:200px;
        border:1px solid #ccc;
    }
    .wrap {
        position:relative;
        float:left;
        left:50%;
    }
    .child {
        postion:relative;
        left:-50%;
    }
</style>

Q：CSS布局时需要注意哪些方面？

  1. 语义化掌握到位
  2. 页面布局理解深刻
  3. CSS基础知识扎实
  4. 代码书写规范
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1赞 92
  • Css 布局 -
    1. 前言 前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在...
    YjWorld阅读 4,538评论 5赞 15
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,696评论 1赞 45
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,338评论 2赞 66
  • 母亲
    母亲勤俭，从不舍得买什么好衣服穿。 我们不孝，当母亲说：买什么衣服！我整天土里泥里的，穿不着！衣服穿着不露皮就是，...
    铭玥咏全阅读 178评论 0赞 4