@[TOC]关于前端布局
前端的布局按其编写过程复杂程度可以分为传统布局与新式布局;
- 传统布局
所谓的传统布局就是不依赖与框架,主要是程序员根据CSS与HTML样式属性的运用来写的原生布局,比如dispaly、position、float等。
这种布局方式对程序员的基础知识要求较高,要会使用特定的样式属性,以及了解其使用的注意事项或者后期对布局的影响进行调试。但是,传统布局方式最大的好处就是其兼容性很好,对于IE6、IE7浏览器也能很好的兼容。
- 现代布局
新式布局,是对传统布局中存在的一些遗留疑难的解决方案,可以说是一种优化方案吧,其代表就是flex布局,自适应布局(adaptation),Grid布局,后面还有现在流行的响应式布局(BootStrap)。它们最大的特点就是其“智能化”,对于页面组件的位置,以及尺寸大小会根据浏览器展示局域大小来动态调整。这些都是一些计算机大厂为提高布局的简便性而开发出来的。
如果说面试官问到你会使用那种布局的时候,当然不能哪个流行说哪个,要说会结合项目开发的实际需要来选择,再提一下自己对时下流行布局方式也有一定的了解,那样你的回答基本就是满分的了。
布局方式有很多,但是我觉得学东西要理解其来龙去脉,虽然现在市面上对传统布局方式没有那么热衷了,但只有在理解其底层原理的时候,才能更好的运用新的东西,所以在写关于布局的时候,我将基于基础知识点的“流布局”排在首位,后期依旧会对其他新式布局详解。
关于“流”的基础概念
所谓“流”,相信在不少前端书都会提到的一个概念——“文档流”。结合实际来说,“文档流”就像水流,水,是液体可以自动的填满容器底部,无论这个容器大小,都可以将其底部覆盖。而“文档流”就是对一些具有“流特性”的块状元素的统称,这些块状元素默认情况下会自动沾满整个浏览器的一行,不够自动换行。
在了解“流”特性前要对“块元素”,“盒子模型”,BFC,“包含块”,“层叠上下文”有一定的理解基础。下面简要的回顾一下这些基础概念:
-
块元素:
浏览器中默认能够独占一行的元素,对于块元素,只有当其width:auto的时候才具有流动性,一旦width设置了具体数值其流动性就会消失。
-
盒子模型
对于每一个前端人来说,对盒子模型的认识应该不陌生,每一个元素都可以看成是一个盒子模型。每一个盒子模型由都是由:content-box/padding-box/border-box/margin-box组成。
对于一个盒子模型,熟悉其content-box与border-box特性对于在布局定位过程中元素的尺寸设定有很大的帮助。
值得注意的是对于IE浏览器,对一个盒子的box-sizing属性是CSS3才有的,IE8以上的的才会起效,而且IE8还要添加前缀-ms-,等到IE9的时候就不再需要前缀了。
对于content-box与border-box的区别:
对于box-sizing:content-box;width:100px;其宽度就是里面的那个盒子的宽度,而border-box就是包括了外面的灰色盒子宽度。
- BFC
BFC(Block Fromatting Context):块级上下文;实际上它还有一个兄弟,叫IFC(Inline Fromatting Context):行内上下文,只不过IFC对页面布局的影响微妙,而且对元素的影响也很小,因此对其的关注也不高。
W3C的官方解释是:BFC决定了元素如何进行内容定位,以及其他元素的关系和相互作用,当涉及到可视化布局时,BFC提供一个可以不受外界元素影响的环境,使得HTML在这个环境中按规定进行布局;换句话就是将页面元素模块化。
触发BFC的CSS元素有:
overflow:hidden;
display:inline-block;
position:flexd
position:absolute
display:table-cell
dispaly:flex
一个非块元素设置成为一个BFC就成为了块级元素,就会具有块元素的特性。 - 包含块
什么是包含块,元素的尺寸以及位置,常常会受其包含块的影响。而包含块的确定完全依赖与元素的position属性:
1、如果元素的position属性是static、relative、sticky,则包含块是由它最近的祖先块元素的content-box边缘组成。
2、如果元素的position属性是absolute,则包含块由它最近的position属性值不为static的祖先元素的padding-box边缘组成。
3、如果元素的position属性是fixed,在连续媒体的情况下包含块是viewport,在分页媒体下的情况下包含块是分页区域。
4、如果position属性是absolute或fixed,包含块也可能是有满足以下条件的最近父元素的padding-box边缘组成:
(1)transform或perspective的值不为none;
(2)will-change的值是transform或perspective
(3)filter的值不是none或will-change的值是filter(只有在firefox下生效)
(4)contain的值是paint;
值得注意的是:根元素所在包含块是一个被称为初始包含块的矩形。它的尺寸视口viewport或分页媒体page media. - 层叠上下文
对于层叠上下文,主要是z-index属性的设定,默认情况下z-index的值会是auto/0,有数值的情况下就看数值的大小而定。
“流”布局的运用
在了解了上述元素的一些基本特性之后,对于“流布局”的运用就可以拉开帷幕了。
要想元素随着浏览器可视界面展现流的特性,可以对其父元素的宽或者高不进行准确数值设定,让其动态添加子元素,比如在一些购物网站中最常见到的“瀑布流”商品信息就是不对其父元素设定高度,其子元素无限的增加,父元素也可以将其包含住。
在“流布局”中最常用的手法就是定位属性与margin的结合使用,在一个模块中,设置目标元素的定位属性为absolute,则根据绝对定位的特性,对其设定margin值就会相对父元素左上角进行偏移margin:auto会自动平分剩余空间。
对高度不确定的布局,其父元素一般不会设定高度,连height:auto/0都不必写,父元素内的子元素浮动布局定位,最后再对父元素清除浮动即可;
最后也是最重要的一点是,流布局,个人理解就是要将网页的元素组件模块化,将一个个元素变成一个个模块,如果是行内元素就在其外套一层
文章写得可能由于笔者经历原因而稍显浅薄,欢迎大家批评指正。