CSS常见布局

前言

在前端开发中,无论是过去,现在,甚至将来,页面布局一直是极为重要的一环,良好的布局方案往往能给用户带来舒适的体验。

这篇文章便介绍一些常见的布局方式及其实现。

一:两栏布局

两栏布局常见于那些一边是主体内容,一边是目录的网站,比如一些博客,或者教程网站。(如我们熟知的w3cschool)

实现方式

两栏试布局往往采取一侧定宽,一侧自适应的方式。使用float与margin(如下)

结果:

二:三栏布局

三栏式布局也是一种极为常见的布局方案。它的特点也是两边定宽,中间自适应。

这个布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变。

实现起来其实很简单,只需要将左边的元素左浮动,右边的元素右浮动,中间的元素通过左右margin定位就行,不过要注意浮动元素放前面。

效果如下:

除了这种方案之外,三栏布局的实现还有广为流传的圣杯布局和双飞翼布局。 双飞翼布局&圣杯布局

三:flex布局

flex布局是什么?

2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

flex 是一种新型的布局方式,使用该布局方式可以实现几乎所有你想要的效果。但是要注意其浏览器的兼容性,flex 只支持 ie 10+,所有还是要根据你的项目情况使用

为什么要使用flex布局?

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

而flex布局便能很轻易的解决这些不便。

使用flex布局

采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item)。而使一个容器称为flex容器,只需将其display'属性指定为flex:

.box{
	display:flex
}

行内元素也可以使用 Flex 布局。

.box{
	display: inline-flex;
}

Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为flex布局以后,子元素的float,clear,vertical-align属性将失效。

容器的属性

以下6个属性设置在容器上。

* flex-direction:决定主轴的方向(即项目的排列方向)。
* flex-wrap:默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
* flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
* justify-content:justify-content属性定义了项目在主轴上的对齐方式。
* align-items:align-items属性定义项目在交叉轴上如何对齐。
* align-content:align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex具体属性请参考阮一峰的flex布局教程

四:响应式布局

什么是响应式布局?

随着互联网的发展,网页不再局限于pc端,越来越多的智能移动设备加入到互联网中来。因此,使网页在pc端,pad端,移动端等不同尺寸的设备上都能有良好的布局呈现便成了前端工程师的挑战。

响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

响应式布局如何实现?

响应式实现基于媒体查询,根据不同的屏幕分辨率,选择不同的css规则,例如:

@media screen and (max-width: 540px) {
	/* 移动端 */
	.box{
		background:#ccc;
	}
}

也可以把要套用的描述独立成外部档案: <link rel="stylesheet" media="screen and (max-width: 540px)" href="mini.css" />

借助于媒体查询,我们便可以使得页面在不同的设备上,能使用最适合页面大小的css方案,从而实现响应式布局。

注意:响应式布局往往与百分比布局结合使用。

相关链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

821130
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

28160
来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

12320
来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

14730
来自专栏九彩拼盘的叨叨叨

前端文章收藏

14920
来自专栏前端知识分享

第9天:CSS精灵图

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

35330
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

20420
来自专栏袁佳平的专栏

周杰伦读心术背后的技术实现

前言   在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <m...

75780
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23750

扫码关注云+社区

领取腾讯云代金券