CSS常见布局

pitaojin

发布于 2018-05-25 16:47:36

1.3K0

发布于 2018-05-25 16:47:36

文章被收录于专栏：前端萌媛的成长之路

前言

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

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

一：两栏布局

两栏布局常见于那些一边是主体内容，一边是目录的网站，比如一些博客，或者教程网站。(如我们熟知的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方案，从而实现响应式布局。

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