考点介绍:
在移动端,Flex已经变成最流行的布局模型,虽然不能完全替代普通盒子模型,但是第一的位置已经坐稳。在校招中,弹性布局也是重要的考查点,包括对弹性的理解,以及各种样式的实现。
答案详情和文章内容点击文末链接查看!
一、考点题目
1.使用CSS的flexbox布局,不能实现以下哪一个效果:
A.三列布局,随容器宽度等宽弹性伸缩
B.多列布局,每列的高度按内容最高的一列等高
C.三列布局,左列宽度像素数确定,中、右列随容器宽度等宽弹性伸缩
D.多个宽高不等的元素,实现无缝瀑布流布局
解答: 正确答案是 D,Flexbox可以简单快速的创建一个具有弹性功能的布局……
2.介绍一下标准的CSS的盒子模型?
解答:有两种, IE 盒子模型、W3C 盒子模型 .……
3.box-sizing属性有哪些,他们的作用是什么?
解答:用来控制元素的盒子模型的解析模式,默认为content-box……
4. 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
解答:标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin……
5.解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。
解答:说到IE的bug,在IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将border与padding都包含在width之内……
二、考点文章
1. Flex布局总结(详细)
以前在网页开发过程中,布局一直是不可或缺的,从最早的表格布局,到后来的DIV+CSS布局,现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多,其适应性也非常强,其强大的伸缩性,发挥了极大的作用,因此就在这里整理一下flex布局的知识。……
2. 盒子模型和弹性布局实现自适应布局
在常规的项目开发中,很多时候不使用响应式框架的前提下,都需要开发人员手动实现自适应,这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套,以及CSS样式的使用,就能实现简单的自适应布局 ……
三、考点视频
盒子模型和box-sizing属性
本题是前端项目开发的基础,也是面试的必考题之一。要区分传统box模型和CSS3加了box-sizing属性后的区别,和对应的使用场景。主要是对元素width和块总宽度的考察,包括padding和border的值的影响。属于前端笔试面试5星必备考点
pc端专题链接: https://xiaozhao.vip/dTopic/detail/241
移动端专题链接:https://m.xiaozhao.vip/dTopic/detail/241