精华内容
下载资源
问答
  • 前端常见的几种布局方式

    千次阅读 2021-01-04 14:30:31
    静态布局(static layout)       即传统的Web布局,网页上的所有元素尺寸一律使用px作为单位。 1. 布局特点       不管浏览器尺寸具体是多少,网页...

    一. 静态布局(static layout)

          即传统的Web布局,网页上的所有元素尺寸一律使用px作为单位

    1. 布局特点

          不管浏览器尺寸具体是多少,网页布局始终按照最初代码的布局来显示。常规的pc网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果页面小于这个宽度就会出现滚动条;如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。

    2.设计方法

          pc:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查询被遮掩部分;

          移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。

          在移动端开发中采用静态布局的两种方式
          (1)在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位,通过用js动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。
          (2)在viewport meta标签上设置content="width=640,user-scalable=no",页面的各个元素也采用px作为单位,由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。

    优点:这种布局方式对设计师和CSS编写来说都是最简单的。
    缺点:不能根据用户的屏幕尺寸做出不同的表现。

    当前,大部分门户网站、大部分企业的pc宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    二、流式布局(Liquid Layout)

          流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整,但是整体布局不变,代表栅格系统(网格系统)。网页中主要的划分区域尺寸使用百分数(搭配min-、max-属性使用)。例如,设置网页主体的宽度为80%,min-width为960px,图片也做类似处理(width:100%,max-width一般设为图片本身的尺寸,防止被拉伸而失真)。

    1. 布局特点

          屏幕分辨率变化时,页面里元素的大小会变化但布局不变。(这就导致如果屏幕太大或者太小都会导致元素无法正常显示)。

    2. 设计方法

          使用%百分比定义宽度,高度大都是用px来固定,可以根据可视区域(viewport)和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
    这种布局方式在web前端开发的早期历史上,用来应对不同尺寸的pc屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常有的布局方式。但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是宽度和文字大小都是用px固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

    三、自适应布局(Adaptive Layout)

    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变),但在每个静态布局中,页面也暗示不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

    1. 布局特点
          屏幕分辨率发生变化时,页面里面的元素位置会变化而大小不会变化。
    2. 设计方法
          使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定布局。

    四、响应式布局(Responsive Layout)

          随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的pc、手机、手表、冰箱的web浏览器等等)都能显示出令人满意的效果,对css编写者而言,在现实上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着页面窗口而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看做是流式布局和自适应理念的融合。

    1. 布局特点

          每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会改变。

    2. 设计方法

          媒体查询+流式布局。通常使用@media媒体查询和网格系统(grid system)配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称

    优点:适用pc端和移动端。
    缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。

    响应式与自适应的对比

          响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比,而不是固定宽度。不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时展示,而且展示的方式像水流一样,一部分一部分的加载,静态的就是采用固定宽度。

    流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC、平板、手机等设备之间较大的分辨率差异)。

    五、弹性布局(rem/em布局)

          这类布局的特点是:包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位。早期浏览器不支持整页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下,使用rem/em做单位,可以使包裹文字的元素随着文字的缩放而缩放。

    1. 布局特点

    浏览器的默认字体高度一般为16px,即1rem:16px,但是1:16的比例计算不方便,为了使单位em/rem更直观,css编写者尝尝将页面根节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小是16px * 62.5% = 10px,这样1rem就是10px。
    但是因为有些浏览器的默认不是16px,或者用户修改了浏览器默认的字体大小。如果我们将其设置为10px,一定会影响在这些浏览器上的效果,所以最好用绝大多数用户默认的16作为基数*62.5%得到我们需要的10px。

    html{font-size:62.5%://  10 / 16 * 100% = 62.5%}
    body{font-size:1.45rem;//  1.4 * 10px = 14px}
    

    实际项目设置成font-size:62.5%可能会出现问题,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px计算,导致chrome的em/rem计算不准确。
    针对这个现象,可以尝试设置html字体为100px,body修正为16px,这样0.1rem就是10px,而body的字体仍然是默认大小,不影响未设置大小的元素的默认字体大小。

    html{font-size:100px;}
    body{font-size:16px}
    

    响应式和弹性布局之间的对比:

          响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单。
          rem布局:改变浏览器宽度,页面所有元素的高度都等比例缩放,也就是大屏幕下导航栏是横的,小屏幕下还是横的,只不过变小了。

    总结

    1. 如果只做pc端,那么静态布局是最好的选择;
    2. 如果做移动端,且涉及对高度和元素间距要求不高,那么弹性布局是最好的选择,一份css+一份js调节font-size搞定;
    3. 如果pc,移动要兼容,而且要求很高,那么响应式布局是最好的选择,前提是设计根据不同的宽度做不同的设计,响应式根据媒体查询做不同的布局。
    展开全文
  • 前端常用的几种布局方式(推)

    千次阅读 2019-10-22 16:12:34
    最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。 3级标题 布局特点: 不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了...

    静态布局:

    最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。

    布局特点:

    不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了min-width,当小于这个宽度的时候出现滚动条,当大于的时候让内容居中,外加背景。

    设计方法:

    PC :

    居中布局,所有的元素样式都使用绝对的宽高(px),设计一个布局,当屏幕大小进行变化时,使用滚动条进行查阅被遮挡的部分。

    移动端:

    另建立一个移动网站,单独设计一个布局,使用不同的域名(wap.或 m.)这种移动端布局常见于2G和3G时期,现在很少使用了。

    优点:

    这种布局方式对设计师和CSS编写者来说最为简单,也不存在兼容性的问题。

    缺点:

    很明显,这种布局方式不能对不同的屏幕做出不同的表现。
    当前,许多的门户网站、大部分企业的PC宣传都会选择这种布局方式,会有更好的展示效果。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单方法。到这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    流式布局:

    布局特点:

    当屏幕分辨率大小发生变化时,页面里的元素大小会变化但布局不会发生变化。

    设计方法:

    使用%百分比来定义宽度,高度大都是用px来固定,可以根据可视区域(viewpoint)和父元素的实时尺寸进行调整,尽可能的去适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
    这种布局在web前端开发的早期历史上,用来应对不同尺寸的PC屏幕那时是的屏幕尺寸的差异没有现在那么大),在当今的移动端开发也是常用的布局方式。

    缺点:

    如果屏幕的尺度跨度太大,那么在相对原始设计而言过大或过小的屏幕上就不能正常的进行显示。因为宽度是使用的%来定义的,但是高度和文字的大小等都是用px来固定的,所以在大屏幕上有些元素的宽度被拉的很长,但是高度、文字的大小还是原来的样式,就会显得非常不协调。

    自适应布局:

    自适应布局就是为不同的屏幕定义不同的布局,就是创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变),但在每个静态布局中 ,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

    布局特点:

    当屏幕的大小发生变化时,页面里面的元素的位置会变化而大小不会变化。

    设计方法:

    使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
    在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际上还是固定的布局。

    响应式布局:

    响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者来说,有多种手法可以去实现,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。
    分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,就是页面元素宽度随着窗口调整而自动适配。即:创建多个流式布局,分别对应一个屏幕分辨率范围。
    可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
    响应式布局几乎已经成为优秀页面布局的标准。

    布局特点:

    每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
    设计方法:媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局,实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。

    优点:

    对PC和移动端有着非常好的适应,只要有足够的耐心,效果会非常棒。

    缺点:

    媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。
    要想 适配更多的屏幕大小,工作量大,设计也需要多个版本。

    响应式页面在头部会加上这一段代码:

    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    

    总结:

    响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的CSS,而且CSS都是采用%百分比的,而不是固定宽度,不同点就是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套模板,只不过是长度或是图片变小了,不会根据不同的设备展示不同的样式,流式及时采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式像流水一样,一部分一部分的加载,静态的就是采用固定的宽度。
    流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。

    弹性布局:

    rem、em区别:

    两者都是顺应不同网页字体大小展示而产生的。
    em是相对其父元素,在实际应用中相对而言会带来很多不便;
    rem则是始终相对于html大小,即页面根元素。

    布局特点:

    使用em或rem单位进行布局,相对%更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。
    包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用%或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。
    更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }

    浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。
    html{font-size:62.5%;}

    优点:

    理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

    缺点:

    这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

    响应式和弹性布局之间的对比:

    响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。
    rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

    结论:

    1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
    2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
    3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

    flex布局

    在这里插入图片描述

    所写博客皆为自己的心得,如有错误欢迎指出,侵删,谢谢

    展开全文
  • Web前端中的几种流行布局

    千次阅读 2019-01-26 15:56:58
    Web前端中的几种流行布局 欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间宽度自适应 圣杯布局可以将整个div.container看做一个奖杯,...

    欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

    1 圣杯布局

    圣杯布局是一种三列布局,两边定宽,中间宽度自适应

    圣杯布局可以将整个div.container看做一个奖杯,div.leftdiv.right看做奖杯的两个耳朵

    圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

    方法一:利用 BFC 元素与浮动元素不会相互覆盖的特性,实现圣杯布局

    1. 三个盒子都加上背景色,方便观察,两边固定宽度,左边左浮动,右边右浮动,中间创建 BFC
    	<div class="left">left</div>
    	<div class="middle">middle</div>
    	<div class="right">right</div>	
    
    		html, body { margin: 0; padding: 0; }
    		.left {
    		background: yellow;
    			float: left;
    			width: 180px;
    		}
    		.middle {
    			background: blue;
    			overflow: hidden;    
    		}
    		.right {
    			background: red;
    			width: 180px;
    			float: right;
    		}
    

    BFC实现圣杯布局1

    1. 此时发现div.right这个盒子掉下来了,为什么呢?是因为由于div.middle这个盒子是自适应宽度并且在结构中先渲染,此时会提前挤占剩余宽度,所以会将div.right盒子挤下来,而解决办法就是让div.right盒子先渲染,原理是浮动元素脱离文档流,并提前浮动到右边,且 BFC 元素与浮动元素不会相互覆盖,此时div.middle再去占有剩余宽度就可以了

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		html, body { margin: 0; padding: 0; }
    		.left {
    		background: yellow;
    			float: left;
    			width: 180px;
    		}
    		.middle {
    			background: blue;
    			overflow: hidden;    
    		}
    		.right {
    			background: red;
    			width: 180px;
    			float: right;
    		}
    	</style>
    </head>
    <body>
    	<div class="left">left</div>
    	
    	<div class="right">right</div>
    	<div class="middle">middle</div>	
    </body>
    </html>
    
    1. 此时再去浏览器,拉伸一下浏览器或者缩小浏览器,看看效果就两边宽度固定中间自适应了

    BFC实现圣杯布局2

    方法二:margin的应用

    1. 先把三个盒子呈现出来
    	<div class="container">
    		<div class="left"></div>
    		<div class="middle"></div>
    		<div class="right"></div>
    	</div>
    
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		html, body {
    			width: 100%;
    		}
    		.left, .middle, .right {
    			min-height: 150px;
    		}
    		.left, .right {
    			width: 220px;
    		}
    		.left {
    			background-color: yellow;
    		}
    		.middle {
    			background-color: blue;
    		}
    		.right {
    			background-color: red;
    		}
    

    圣杯布局之呈现盒子

    1. 此时三者是垂直排列,需要将他们横向排列,所以给三者都添加浮动
    .left, 
    .middle, 
    .right {
    		float: left;
    }
    

    圣杯布局之浮动

    1. 这时候只是达到了三个盒子在一行的效果,并不能达到前面自适应的需求,而且整个页面不正常了,不着急,继续下一步,设置div.container的盒模型,使得父元素两边留白,留够div.leftdiv.right的空间
    		.container {
    			padding: 0 220px;
    		}
    
    1. div.middle设置100%宽度,使其自适应
    		.middle {
    			width: 100%;
    		}
    
    1. 设置div.leftdiv.right的负外边距,让其到div.container留白位置
    		.left {
    			margin-left: -220px;
    		}
    		.right {
    			margin-right: -220px;
    		}
    

    此时惊奇的发现,这三列已经排列正常,且能自适应了

    margin实现圣杯布局

    1. 但是发现,div.footer上去了,很简单,这是因为三个浮动元素会脱离标准文档流,所以div.footer会上去占有他们的文档流,解决办法是将div.footer设置一个BFC区域就行,BFC区域详细文档可以看BFC
    .footer {
        overflow: hidden;
    }
    

    圣杯布局

    完整代码看这里:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		html, body { width: 100%; margin: 0; padding: 0; }
    		.header,
    		.footer {
    			overflow: hidden;
    			width: 100%;
    			background-color: #ccc;
    			text-align: center;
    		}
    		.container {
    			padding: 0 220px;
    		}
    		.left,
    		.middle,
    		.right {
                position: relative;
    			float: left;
    			min-height: 150px;
    		}
    		.left,
    		.right {
    			width: 220px;
    		}
    		.left {
    			margin-left: -220px;
    			background-color: yellow;
    		}
    		.middle {
    			width: 100%;
    			background-color: blue;
    		}
    		.right {
    			margin-right: -220px;
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="header">header</div>
    	<div class="container">
    		<div class="left">left</div>
    		<div class="middle">middle</div>
    		<div class="right">right</div>
    	</div>	
    	<div class="footer">footer</div>
    </body>
    </html>
    

    2 双飞翼布局

    看完了圣杯布局,来看双飞翼布局,其实和圣杯布局差不多,可以将div.container看做一只大鸟,将div.middle看做鸟的身体,将div.leftdiv.right看做鸟的两个翅膀

    实现方式与圣杯布局差不多,但在解决中间栏div.middle部分的思路不一致

    直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		html, body { width: 100%; margin: 0; padding: 0; }
    		.header,
    		.footer {
    			clear: both;
    			width: 100%;
    			background-color: #ccc;
    			text-align: center;
    		}
    		.left,
    		.main,
    		.right {
    			float: left;
    			height: 150px;
    			text-align: center;
    		}
    		.left,
    		.right {			
    			width: 220px;
    		}
    		.left {
    			margin-left: -100%;
    			background-color: yellow;
    		}
    		.main {
    			width: 100%;
    		}
    		.middle {
    			min-height: 150px;
    			margin: 0 220px;
    			background-color: blue;
    		}
    		.right {
    			margin-left: -220px;
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="header">header</div>
    	<div class="container">
    		<div class="main">
    			<div class="middle">middle</div>
    		</div>
    		<div class="left">left</div>
    		
    		<div class="right">right</div>
    	</div>	
    	<div class="footer">footer</div>
    </body>
    </html>
    

    2.1 圣杯布局 VS 双飞翼布局

    主要是针对于中间div.middle的处理思路不一样
    圣杯布局是先留白,在用margin让两边过去,利用了相对布局
    双飞翼布局多创建一个div,包裹middle,利用margin为负值来布局

    相比较而言,双飞翼布局比圣杯布局多用了个divcontainerpadding不需要加了,相对布局position: relative,双飞翼布局的子divmargin布局

    注意:两种布局一般都需要将div.middle这一栏提到结构div.left的上面先渲染

    前面分析了圣杯布局和双飞翼布局,了解到他们的原理实际上都是是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

    那么将中间是三个盒子的代码再复制一份,嵌套在div.middle中,看看效果

    圣杯嵌套

    此时会发现,中间div.middle部分多一部分盒子,且依然满足两边固定,中间宽度自适应,这个很像Bootstrap里的栅格嵌套

    3 栅格布局

    Bootstrap的栅格布局提供了一套响应式的解决方案,其实把这套布局拆分来看,分为这几部分:

    1. container的设计
    2. 响应式布局实现

    其中行和列的布局原理和圣杯布局原理一样

    3.1 container设计

    container设计

    3.2 响应式布局实现

    @media媒体查询

    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width: 768px) {/*当宽度大于768px时触发*/
      .container {
        width: 750px;
      }
    }
    @media (min-width: 992px) {/*当宽度大于992px时触发*/
      .container {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {/*当宽度大于1200px时触发*/
      .container {
        width: 1170px;
      }
    }
    .container-fluid { /*这个是宽度默认*/
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    

    3.3 行(row)

    row实现

    .row {
      margin-right: -15px;
      margin-left: -15px;
    }
    

    3.4 列(col)

    Bootstrap分别将他们分割成12份,意思是你可以随意使用者12份,加起来要正好12,并能自己调整分配数字

    column

    Bootstrap实现了更好的响应式布局,列的种类是有很多种的
    .col-xs-* 针对超小屏幕 手机(<768px)
    .col-sm-* 小屏幕 平板 (≥768px)
    .col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)
    .col-lg-* 针对特大的(≥1200px)

    例子:

    表示小屏幕手机采用col-sm-6布局,中屏幕手机采用col-md-4布局

    <div class="col-sm-6 col-md-4"></div> 
    

    Bootsrap中关于栅格布局的代码实现,很多,这里不粘贴了,原理就是前面所说的,可以去官网看

    当然,Bootstrap远不止实现了上面那点东西,例如 .col-md-offset-* .col-md-push-* 能够实现很好的细节的排版等等很多,这个神奇的东西还是需要慢慢领悟的~~,下面不能废话了,继续回归正题,说布局

    4 Flex布局

    请移步:Flex布局

    5 绝对定位布局

    绝对定位布局很多地方都有应用,依靠绝对定位,想定到哪,定到那,这里不细说

    展开全文
  • 前端页面5种布局方式

    千次阅读 2019-12-24 16:13:07
    前端基本布局分大致5,table布局,float 布局,absolute布局,flexbox布局,grid布局。假设高度已知,写出三栏布局,其中左右宽度各为300px,中间自适应。 table 布局 在实际的项目开发过程中,不建议用table进行...

    前端基本布局分大致5种,table布局,float 布局,absolute布局,flexbox布局,grid布局。假设高度已知,写出三栏布局,其中左右宽度各为300px,中间自适应。

    table 布局
    在实际的项目开发过程中,不建议用table进行布局

    缺点:

    1. table 比其他html标签占更多的字节。造成下载时间延迟,占用服务器更多的流量资源(代码冗余)
      2.table 会阻挡浏览其渲染引擎的渲染顺序,会延迟页面的生成速度,让用户等待时间更久。
      3.灵活性差,一旦设计确定,后期很难通过CSS让它展现新的面貌。
      4.不利于搜索引擎抓取信息,直接影响到网站的排名

    优点:
    1.兼容性好.
    2.容易上手

    float 布局
    float 属性定义元素在哪个方向浮动。
    初始应用:让匿名inline boxes性质的文字环绕图片显示
    现在应用:任何元素都可浮动。如一个元素设置为浮动元素,浮动元素无论最初什么都会变成一个行级块级元素,拥有display:inline-block属性。
    float:left 。沿着父容器顶部向左推入容器,如果卡住推不动了,判断当前位置能否全部显示该子容器,如果能则完成,如果不能继续找空档往里推。
    缺点:脱离文档流,需要清楚浮动,**高度塌陷(float的破坏性主要是指它会使父容器的高度塌陷,也就是父元素在高度计算的时候会忽略浮动的元素)。
    优点:兼容性好,比较简单

    absolute布局
    relative属性:脱离文档流,但保留占位符,其偏移位置是相对于本身在正常文档流中时的位置

    脱离文档流是说设置了relative属性之后,元素不在z-index:0;的正常文档流中,其z-index的值>0,但保留占位符,就是在正常文档流中位置保留着,后继元素不能占位,然后相对于本身正常位置进行偏移。

    absolute:完全脱离文档流,不保留占位符,其元素定位是相对于其父级及以上,一直追溯至设置了position:relative或absolute或fixed属性的外层元素(包含块),如果其外层元素均未设置position属性,则定位是相对于HTML文档进行的绝对定位,并不是相对于body的定位。
    缺点:脱离文档流,会导致后续元素全部脱离文档流,可用行差。
    flex布局
    注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
    grid布局
    CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,意味着它可以同时处理列和行。

    展开全文
  • 前端7大常用布局方式

    千次阅读 多人点赞 2019-10-21 16:35:51
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性 ,根据不同行业情况进行不同...
  • web前端开发之几种布局方式之响应式布局一、理解几种布局的概念1、静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 意思就是不管...
  • 常见的四种前端布局方式

    千次阅读 2019-09-20 15:28:37
    常见的网页布局主要有四: 1.自适应 2.响应式 3.静态 4.流式 刚刚接触网页设计的时候,常常分不清响应式布局和自适应布局,其实他们就是“傻傻分不清楚”… 静态布局(Static Layout) 即传统Web设计,对于PC设计...
  • web常见的五种前端布局方式

    千次阅读 2019-10-23 21:18:20
    web大前端布局 web大前端布局 常用的布局 常用的布局一般分为一下大类: 文档布局(text) 文档流本质是 nomal flow (普通流、常规流) 元素在文档中的特点 块级元素,和内联元素。 块级元素:是自带有这行效果,...
  • 前端界面布局几种方法

    千次阅读 2019-09-08 09:56:03
    几种布局区别 https://blog.csdn.net/sunday97/article/details/84591190 先明白视口和像素是什么 https://www.cnblogs.com/webxu20180730/p/9562543.html 1. 流式布局 什么是流式布局?开发思路如何? 一个典型的...
  • web前端布局方式总结

    2020-08-16 23:31:25
    本文主要介绍了前端布局方案的实现以及存在的问题,涉及到的布局方案包括: 流体布局 float布局 table布局 定位布局 flex布局 响应式布局 grid布局 前端布局从最开始的:Table布局 => DIV+CSS布局 => Flex...
  • CSS常见的几种布局方式

    千次阅读 2019-12-09 02:34:05
    在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家。 #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一、单列布局 常见的单列布局有两: header、content、footer等宽的...
  • Web前端中的几种布局

    千次阅读 2019-01-24 02:52:51
    圣杯布局是一三列布局,两边定宽,中间宽度自适应 圣杯布局可以将整个div.container看做一个奖杯,div.left和div.right看做奖杯的两个耳朵 圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖...
  • 前端页面布局

    千次阅读 2019-05-15 15:58:12
    从纯html结构加上css代码堆出来的页面,到类似bootstrap框架的栅格化布局,...对于工作中常用的布局,做个小结。 一、传统布局 浮动 定位 基本css 浮动(float) <!DOCTYPE html> <html lang="en">...
  • 种前端布局之float布局

    千次阅读 2020-11-18 15:35:34
    float布局 float 属性定义元素往哪个方向浮动。 float布局特性 图文环绕效果 float元素脱离了文档流,但是不脱离文本流 文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离的正常的文档流,但是还会...
  • 目前比较流行的布局有三 1.流式布局: 含义:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示 设计原理:使用百分比定义宽度,高度大都是用px...
  • CSS常见布局几种实现方式(面试常考):两栏布局、三栏布局、流体布局(浮动)、BFC三栏布局、双飞翼布局、圣杯布局、flex、table布局、绝对定位布局、网格布局(Grid布局)
  • 浅析Web开发中前端路由实现的几种方式主题 Web开发故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了...
  • 前端】水平垂直居中的几种方式

    千次阅读 2019-10-03 00:03:31
    flex布局也叫弹性布局,我认为flex box布局是一十分优雅的布局方式,兼容性一般,使用起来非常简单。 display: flex;// flex-direction默认是row justify-content: center; //水平居中 align-items: center; //...
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    前端面试汇总(2020年) 一 大纲 1、前言 2、前端工程化 3、前端设计模式 4、前端安全性问题 5、前端跨域问题 6、前端数据加密 7、前端http相关问题 8、*前端基础知识点面试题 9...
  • 真正想学什么,也不知道自己究竟适合学习什么样的技术,有部分同学就会盲目的寻找资料去学,不要着急,小鸿这里带大家了解什么是前端前端入门需要学习哪些技术。学习前端需要具备什么样的学习条件。 什么是...
  • 前端开发中几种居中方式

    千次阅读 2018-09-14 10:43:55
    感谢原作者的分享,让我对居中有了充分的认识,填补了空缺部分 ... 下文中widthF widthS 这俩个样式是父元素的宽高以及背景色的设置...father_x son_x 设置布局方式 .widthF {  width:300px;  height: 300px;  bac...
  • 前提: html模板: &lt;div class="parent"&gt; &lt;div class="content"...1、可设置该行内元素的父元素的height与line-heigth的值相等,让行内元素垂直居中 ...2、针...
  • 页面布局方式——前端

    千次阅读 2019-05-31 08:24:20
    文章目录页面布局方式——前端页面布局方式双飞翼布局多栏布局弹性布局(Flexbox)瀑布流布局流式布局(Fluid)响应式布局注 页面布局方式 页面布局方式主要有:双飞翼、多栏、弹性、流式、瀑布流、响应式...
  •  阐述清楚浮动的几种方式(常见问题) 1.父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 优点:简单、代码少、容易掌握 缺点:只适合高度固定的布局,要给出精确的...
  • 几种css自适应布局方式

    千次阅读 2019-11-09 17:10:56
    1.float+margin(自适应的那个元素),适应横向布局 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>左中右三列 左右固定200px 中间自适应占满</title> ...
  • 几种相册图片布局方式

    万次阅读 2016-06-02 13:30:08
    先上github地址:插件源码百度前端个月前发布了一个针对前端技术培训的任务:IFE(百度前端技术学院)。和个小伙伴一起完成了部分任务,第四阶段是三个综合性的任务,博主先完成了其中的相册布局任务。写的并...
  • 几种常见的 CSS 布局

    万次阅读 多人点赞 2018-11-14 20:30:00
    (给前端大全加星标,提升前端技能)作者:浪里行舟 (本文来自作者投稿,简介见末尾)本文概要本文将介绍如下几种常见的布局:单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布...
  • 常见的几种页面内容布局方式

    万次阅读 多人点赞 2017-07-27 11:45:44
    常见的页面布局,左右自适应布局

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,574
精华内容 20,629
关键字:

前端布局的几种方式