前端面试1：CSS布局

课程思维导图

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

<!-- 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：三栏布局，高度未知，以上布局哪些仍可用，哪些不可用？

float：不可用
absolute：不可用
flex：可用
table：可用
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

做法：把要居中的元素的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%就可以得到了，因而不用知道自身的实际宽度是多少。

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

语义化掌握到位
页面布局理解深刻
CSS基础知识扎实
代码书写规范

前端面试1：CSS布局相关推荐

【2022前端面试】CSS手写面试题汇总（加紧收藏）
[2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...
【2022前端面试】CSS面试题汇总（加紧收藏）
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
前端面试笔记-CSS篇
目录选择器的权重和优先级盒模型标准盒模型和替代模型(IE) 块级盒子与内联盒子隐藏一个元素 Position 文档流定位 z-index 浮动如何清除浮动包含块与控制框 BFC 外边距折 ...
前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
[前端笔记006]CSS布局之字体 -- font
资源推荐zeal:离线文档查看器 https://zealdocs.org/ 推荐w3c:线上文档 https://www.w3school.com.cn/ 本笔记参考视频,尚硅谷:BV1XJ411 ...
前端面试之 CSS 篇
一.CSS基础 1. CSS选择器及其优先级 | 选择器 | 格式 | 优先级权重 | | - | - | - |-| | id选择器 | #id | 100 | | 类选择器 | .classnam ...
置顶带滚动效果_前端面试：如何实现轮播图效果？
本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...
【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家
虽然不是狂爱足球爱好者,但多少会有关注下,像梅西和C罗是经常听到的可能是没有我们队的原因,关注会比较少,只看个结果,所以趁着这次机会,通过js前端技术div+css布局方式绘制本次世界杯足球比赛对 ...

前端面试1：CSS布局

课程思维导图

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

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

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

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

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

一、CSS居中：margin设为auto

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

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

四、CSS居中：使用表格

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

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

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

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

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

前端面试1：CSS布局相关推荐

最新文章

热门文章