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 条评论
登录 后参与评论

相关文章

  • Flex布局

    pitaojin
  • position有几种,absolute和relative的区别

    pitaojin
  • CSS盒子模型

    pitaojin
  • 2018区块链技术应用下的数字资产交易平台开发要结合实际运用发展

    一个系统的核心体系决定这个系统的安全性、流通性和交易量,很多人搞不清楚这两块,以至于买来的系统很容易出现各种问题。系统很重要,没有安全稳定的系统,再多的项目也是...

    小威互联说
  • 帝国备份王出错

    Parse error: syntaxerror, unexpected $end in解决方法 我在本地wamp环境下面使用帝国备份王时,报错信息如下: Pa...

    庞小明
  • 金融数字资产区块链技术开发的数字资产系统开发的的核心特征

    近年来,数字资产区块链技术的运用和发展在全球范围内掀起热潮,而以数字资产区块链作为底层技术的数字货币更是如雨后春笋。

    小威互联说
  • Blockchain和Tangle哪一个是未来?

    2017年是加密货币热潮令人难忘的一年。从那时起到现在世界没有任何改变,但今天我们对加密货币仍然很兴奋。乐观主义者认为,比特币将从根本上改变世界各地的支付,经济...

    笔阁
  • Java单例模式

      首先,什么式单例模式呢? 单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在(摘自维基百科),

    haoming1100
  • Core + Vue 后台管理基础框架1——运行系统

    git clone https://github.com/KINGGUOKUN/SystemManagement.git,项目目录如下:

    guokun
  • Bootstrap响应式前端框架笔记二十——工具条的应用

        工具条用于向用户进行某个操作的提示,在Bootstrap框架中,为按钮添加工具条十分简单,只需如下代码:

    珲少

扫码关注云+社区

领取腾讯云代金券