css grid 自动高度_前端面试题：关于CSS布局

金三银四求职季

各位同学面试是否顺利呢？

在这关键时刻

小狮送上前端面试题一份

有用就赶紧收藏起来吧！！！

1

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

        .float .left {

            float: left;

            width: 300px;

            background: green;

        }

        .float .center {

            background: yellow;

        }

        .float .right {

            width: 300px;

            float: right;

            background: red;

        }

        .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;

        }

        .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;

        }

        .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;

        }

        .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;

        }

        .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;

        }

2

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

float：不可用

absolute：不可用

flex：可用

table：可用

grid：不可用

3

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

        * {

            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;

        }

4

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

一、CSS居中：margin设为auto

做法：把要居中的元素的margin-left和margin-right都设为auto

场景：只能进行水平的居中，且对浮动元素或绝对定位元素无效。

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

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

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

做法：把文字的line-height设为文字父容器的高度

场景：适用于只有一行文字的情况。

四、CSS居中：使用表格

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

场景：必须是table

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

做法：通过display:table-cell 模拟表格单元格，这样就可以利用表格那很方便的居中特性了。

场景：IE6、IE7都无效。

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

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

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

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

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

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

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

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

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

5

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

语义化掌握到位

页面布局理解深刻

CSS基础知识扎实

代码书写规范

6