CSS布局总览(1)

CSS的好处之一是,它能够控制页面布局而不需要使用表现性标记。但是CSS布局被误认为是难以理解的,在初学者当中,这种想法相当普遍。造成这种情况的主要原因是浏览器对CSS的解析不一致导致的。
所有的CSS布局技术的根本都是3个基本概念:定位,浮动和外边距操纵。这些布局技术其实没有本质的差异。要掌握它们也不用花很长的时间。

display属性

在html中每一个元素都有默认的’display’属性。这与元素的类型有关,对于大多数元素,它们的默认值是inline和block。一个‘block’通常被称作‘块级元素’,而一个‘inline’通常被称作‘行内元素’。

block

div是最常见的标准块级元素。一个块级元素会新开始一行并尽可能的铺满整行的屏幕。其他的常见块级元素有p,form。html5的新元素有header,footer,section等等。

inline

span是一个标准的行内元素,行内元素可以在段落中包裹文字而不打乱段落的布局。a元素是最常用的行内元素,它通常被用作链接。
eg:把li元素改成inline,制作水平菜单。

none

另一些常用的标记比如script,它的属性就是none。display:none通常被Javascript用来在不删除元素的情况下隐藏或者显示元素。
它和visibility属性不一样。display:none不会保留显示本该元素的空间。而visibility:hidden;则会保留该元素的空间。

inline-block

很多情况你可能会使用到很多的box填满整个网格,过去我们使用的方法是float属性,但现在使用inline-block,如下两种方法:

.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
.box { display: inline-block; width: 200px; height: 100px; margin: 1em; }

在使用inline-block进行布局的时候要注意以下三点:

  1. vertical-align会影响到inline-block属性。你可以把它的值设为top。
  2. 你需要设置每一列的宽度
  3. 如果html源代码中标签之间有空格,那么列于列之间会产生间隙。

如下代码

nav { display: inline-block; vertical-align: top width: 25%; } .column { display: inline-block; vertical-align: top; width: 75%; }

flex

新的flex通常被用来使用flex布局,非常的遗憾最近关于flex的变动太多,很多浏览器的实现也不尽相同。所以我简单的介绍一下他们的使用,下面的例子只能在firefox和chrome中实现。

.container { display: flex; display: -webkit-flex; height: 100px; margin-top: 50px; }
.one { -webkit-flex: initial; flex: initial; width: 200px; min-width: 100px; }
.two { -webkit-flex: none; flex: none; width: 200px; }
.three { -webkit-flex: 1; flex: 1; } .four { -webkit-flex: 2; flex: 2; }

小屏幕下效果如图

大屏幕下效果如下

flex还可以解决原来css中一个比较让人头痛的问题,就是两盒子的垂直居中。

body { margin: 0; padding: 0; }
.big { height: 500px; margin-top: 50px; display: -webkit-flex; display: flex; background-color: #0f0; }
.small { margin: auto; background-color: #0ff; }

效果如下图所示:

css布局(1)就介绍到这里。

原文同步于 http://penxx.pw

资料来自: http://http://zh.learnlayout.com/toc.html和《精通css:高级Web标准解决方案》一书的`布局`章节。

css 布局 定位 浮动 外边距操纵 display flex


Originally published at penxx.pw on May 24, 2014.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.