web前端布局方式总结
本文主要介绍了前端布局方案的实现以及存在的问题,涉及到的布局方案包括:
- 流体布局
- float布局
- table布局
- 定位布局
- flex布局
- 响应式布局
- grid布局
前端布局从最开始的:Table布局 => DIV+CSS布局 => Flex布局 => Grid布局 经历了以上一系列变化,这些变化伴随着前端技术的发展和程序猿对布局方案便利性的追求,最终的结果就是让我们的网页设计变得越来越方便、快捷、高效,我们看到的网页也越来越多样化和人性化。互联网从诞生到至今也就二十年的时光,因此,让我们从互联网的发展来看看前端布局是如何一步步成长的。
首先,让我们看看web的发展:
1991年web
1996雅虎
1999年Google
2020年
1990年,伯纳斯·李(Tim Berners-Lee)等人发明了互联网(web)技术,最初的互联网技术其实更像是一个大型文件访问系统,当时网页也只是展示纯文本,但是随着时间的发展,人们认为纯文本太丑了,于是准备用其它语言装扮诞生没几年的web。最终被大家采纳的语言是由Hakon Wium 在 1994年 10月提出的样式语法。它被称为样式层叠表,简称CSS。当时的CSS更多只是用来修饰web页面,基本没用来布局。
此时的布局方案主要是:流体布局
流体布局
流体布局其实就是正常的布局流,那么什么又是正常的布局流呢?可以把我们的布局页面看成是一个倒着放的方形鱼缸(HTML),当你往里面加水时(DIV),水会铺满整个水平面,当你再次加水时,加入的水会在之前的基础上铺满整个水平面,如果这个鱼缸变宽、变窄(假设鱼缸是柔性的),里面的水也会随着变宽、变窄并且铺满整个鱼缸的宽度。这就是流体布局。
上面提到的DIV就是HTML里面的块标签,它其实是一个盒子模型,组成方式如下:
在这种布局下我们其实能操作的布局样式很少,我这里主要提一下margin属性,我们可以通过 margin: auto;对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理:auto会让盒子模型填充父元素剩下的宽度。让我们看图说话
图中,父元素剩余宽度为200px,左右margin为 auto,这样左右就平分父元素剩余宽度为100px,这样元素就实现了水平居中。
我们也可以利用margin实现垂直水平居中,方法如下:
该布局存在的问题:margin合并(外边距塌陷)
margin合并:块级元素的上、下边距(margin)有时候会合并(只发生在垂直方向上)成单个外边距,合并后的外边距等于合并前两个外边距中的较大值,这种现象也被称为外边距塌陷(margin合并)。
margin合并类型:
- 相邻元素
- 父子元素
- 空元素
相邻元素示意图:
理想是两个div高度为 200px
父子元素示意图:
黑线是上一个元素,灰色是父元素,橘红色是子元素。理想的是子元素与父元素之间margin-top为50px,结果是父元素和上一元素高度为 50px。
空元素示意图:
本来是上下margin分别10px,元素高度应该是20px。
解决办法:父元素触发BFC(块级格式化上下文)
不用太去纠结BFC的词语解释,只需要知道BFC个作用是用来隔离元素的影响就行,触发BFC后,容器内的元素随便怎么翻江倒海都不会影响到外面元素,外面元素随便怎么变化都不会影响到容器内元素。相当于加了层隔板。
触发BFC方式:
- body元素
- float不为none
- display:flex/inline-flex
- position:absolute、fixed、table-cells
- overflow除了visible以外的值
------------流体布局完----------------
float布局
浮动布局设计的初衷只是为了实现文字环绕图片的样式,没想到float布局会用在结构布局上,并且会这么火。。。
实现代码:
float:right/left
浮动的元素会脱离文档流(浮在正常文档流上面),浮动元素后面的文字会环绕在图片周围,但是不会被覆盖。这种布局方式虽然很简单,但是缺点也很明显,就是会影响后面的元素,所以我们就需要清除浮动。
清除浮动:
clear:left/right/both(建议直接写both)
但是你真的了解clear的原理吗?看看下面的清除浮动和你想想中的清除浮动后效果一样吗?
官方对clear属性的解释:“元素盒子的边不能和前面的浮动元素相邻。”所以,清除浮动并不是真的把浮动元素给清除了,只是让自身元素不受前面元素的影响(己所不欲,勿施于人的精神)。
------------float布局完----------------
table布局
时间来到了1997年,有个叫David Siegel的人创造性的改变了web布局方式,但是同时又“毁了”web布局方式,这种布局技术就是:table布局。
table布局(HTML实现)
从图中我们可以看到,展示出来的布局很好看,因此这种布局方式从提出后变风靡一时,97之后到零几年基本上都是这种布局方式,甚至现在我们也可以在某些网页找到它是身影。
但是如果看右边的源码可以发现,结构非常混乱,维护起来代价非常大,连David自己也说:有人说我毁掉了Web,我回答他们,的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把它们分开。我犯下了把结构跟表现混合在一起的错误。
因此,不到万不得已,不建议使用此方式进行布局。
后来的后来,CSS出来说,用HTML实现的table方法糟糕透了,用我的属性同样可以实现table布局,且效果极佳。
table布局(CSS实现)
CSS样式与HTML table属性一一对应,它俩一结合简直无敌,这就是大名鼎鼎的DIV+CSS布局方案。
------------table布局完----------------
定位布局
实现代码:
position: static/relative/absolute/fixed/sticky
static:元素默认值,正常布局
relative: 相对于自身在文档流的位置进行定位,left/right/top/bottom属性有效,不脱离文档流
absolute: 相对于第一个非 static 的祖先进行定位(如果没有祖先,相对于html),left/right/top/bottom属性有效,脱离文档流
fixed: 相对于窗口进行定位,left/right/top/bottom属性有效,脱离文档流
sticky: 是 relative 和 fixed 的结合体 [demo](https://www.runoob.com/try/try.php?filename=trycss_position_sticky)
有了定位布局,我们只要运用得当,就可以实现各种布局,但是这里我想提一个问题,当绝对定位时,left、right或者top、bottom同时存在,应该听谁的?如果你不知道答案,请看图:
从图中我们可以得出以下结论:当不指定高度时,top和bottom同时存在,听top的。(同理,当不指定宽度时,left和right同时存在,听left的)
------------定位布局完----------------
flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",我个人觉得弹性布局有点像算盘:
容器对应算盘框架,item对应里面的算珠。当你应用flex布局时,其实就是在拨动算珠。不过想了解细节的同学请点击
flex整体学习难度相对于前面布局较大,特别是flex-grow和flex-shrink的计算原理,我想简单的说一下。flex-grow和flex-shrink都是基于flex-basis进行计算,而flex-basis表示分配多余空间之前,项目占据的主轴空间(理解成width属性就好,但是,当flex-basis和width同时存在时,听flex-basis的)。
.father {height: 100px;width: 800px;display: flex;background: gainsboro;
}
.child1,
.child2,
.child3,
.child4 {height: 100px;
}
.child1 {width: 50px;background: tan;
}
.child2 {flex-basis: 100px;flex-grow: 1;background: teal;
}
.child3 {flex-basis: 150px;flex-grow: 3;background: thistle;
}
.child4 {flex-basis: 200px;flex-grow: 6;background: tomato;
}
请问每个child的宽度应该是多呢?(希望你自己算算再往下看…)
以上就是flex-grow的计算原理,同理,我知道聪明的你一定可以推导出flex-shrink的计算过程。
------------flex布局完----------------
响应式布局
响应式布局其实就是同一个web网页能够在不同设备(手机、平板、PC)上完美显示。为什么会出现响应式布局呢?原因是以前的web都是按电脑(那时还没有智能手机,Ethan Marcotte在2010年才提出的响应式布局)宽度定制的,每种类型电脑使用一个网页就能实现完美适配,但是智能手机发展起来后,每个手机的尺寸不一,如果为每个尺寸的手机制作一个web页,那代价简直了。如果一个页面能够适配所有的显示设备,那岂不是美滋滋。这就是响应式布局
实现:
html head 中加入以下 meta标签,目的是让网页宽度等于设备宽度,原始缩放比例为 1
<meta name="viewport" content="width=device-width, initial-scale=1" />
在布局中,我们还需要注意以下问题:
- 使用相对单位(%,vh,vw,rem,em )
- 图片响应式(max-width: 100%,srcset)
- 流动布局(float,flex)
- 媒体查询(@media)
只要按照以上方式写HTML和CSS代码,那写出来的网页就是响应式的,我写了个简单的响应式 demo,可以参考一下。
------------响应式布局完----------------
Grid布局
网格(Grid)布局是一种新的 CSS 布局模型,是目前唯一一种 CSS 二维布局,我个人认为这是CSS布局的未来(如果兼容性没问题的话)。如果细讲grid又可以写篇新的文章了,因为其内容实在太多,并且大神已经讲的很清楚了。我这里只想根据一个实例来看看grid布局的强大。
如果我们想实现图中的布局,你可能会想到使用定位布局亦或者浮动布局?今天,我们使用强大的grid布局。在使用之前我们需要了解一些基本的概念(不会太难)
display: grid;
grid-template-columns: 100px 100px 100px // 建立了三列,每列宽度为100px
grid-template-rows: 100px 100px; // 建立了两行,每行宽度为 100px
以上代码建立了 两行三列 的二维布局,显示效果如下:
中间的代码实现了下面的布局结果,其实理解起来很简单,地主有六块二维矩阵的地准备分给几个名字不同的儿子(gird-area:名字),每块地上标记了儿子的名字(grid-template-areas),如果是 点(.) 表示自己留着。
有了以上知识后,我们就开始实现上面的布局:
短短几行,就实现了图片中的布局方式,grid是不是很强大?
------------grid布局完----------------
总结
这里从互联网的发展来介绍了web布局的几种常见方式,每种方式都有它的优缺点,每种方式也都有它存在的历史意义,可能有些布局我们已经不使用或者不推荐了,这是因为有了更好的布局方式(如语义化布局),也许我今天介绍的几种布局方式将来也会成为历史的产物,但是这些布局方式在存在的时间里实现了自己的价值,这就够了。我希望屏幕前的你看到这篇文章之后,能够对web布局方式有较清晰的理解,能够在布局的时候选出最合适的、并且知道坑在哪里,那我便会非常欣慰。
由于本人的水平有限,在写作的过程中难免有误,请细心的同学帮我指出,文章使用的部分图片是互联网上找的,如有侵权,请联系我。
完
web前端布局方式总结相关推荐
- Web前端布局实战:三国杀页面布局(上)
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
- web前端布局篇(切图)
web前端布局篇(切图) 这里的切图不是指ps里面的切图,而是指web前端工程师将设计图转化为静态页面的过程. 在布局的时候,我们通常会以设计图为蓝本,然后将设计图拆分,变成一个一个的HTML标签,搭 ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
- 3种常见的Web前端数组排序方式!
前端面试中几种常见的数组排序方式:冒泡排序.插入排序.选择排序,你知道他们的基本思想是哪些,应该如何实现吗?今天小千就来给大家详解一下,赶紧戳过来~~ 冒泡排序 冒泡排序的基本思路是什么? 两两比较顺 ...
- Web前端攻击方式及防御措施
一.XSS [Cross Site Script]跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户 ...
- 常见的四种前端布局方式
常见的网页布局主要有四种: 1.自适应 2.响应式 3.静态 4.流式 刚刚接触网页设计的时候,常常分不清响应式布局和自适应布局,其实他们就是"傻傻分不清楚"- 静态布局(Stat ...
- web前端布局练手项目
仿北大首页布局(只关心布局) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- web前端开发最佳实践--(笔记之JavaScript最佳实践)
如何避免全局变量污染? 避免定义全局变量或全局函数 用一个变量进行封装,并返回外部需要访问的接口 如何写出高维护的js代码 配置数据和代码逻辑分离 如: 改成: --- 用js模板 mustache ...
- web前端需要学什么知识?自学要多久?
想学web前端需要学什么知识?htmlcss,css3,javascript,jQuery,easyUI,html5--首先学这些基本的吧!学习顺序就是HTML DIV_CSS javascript ...
最新文章
- 使用Spring框架的好处
- VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化
- QN8027输出调频分裂的频谱
- DBUtils的使用之增删改的操作
- [codevs 1227] 方格取数2
- 在线考试系统需求分析
- Kooteam 0.2.0 发布,新增周报、日报功能
- esri-leaflet入门教程(4)-加载各类图层
- C# 5.0将带来的五大新特性
- 计算机软件行业各职位英文缩写
- 四十四 老李来了 我在软件园的那些日子里
- java Base64编解码
- NOIP模拟19/07/22
- 水瓶座 水瓶座的男人
- 盛水容器问题php代码,盛水容器的形状如图2-13所示,已知各水面高程为▽1=1.15m,▽2=0.68m,▽3=0.44m...
- [NewStarCTF] Word-For-You
- 数据格式:大端模式(Big-endian)和小端模式(Little-endian)
- MySQL之——函数
- 京东智联云:2019年云综合收入9.0亿元,波澜不惊
- 《人物》:计算机世界第一人——艾兰·图灵(转贴)