CSS布局总览(1)

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

---

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,以下两种方法:

/*使用float属性进行浮动元素*/
.box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 1em;
}

.after-box {
    clear: left;
}

/*使用inline-block值将盒子定义inline-block，相比于上面的float法进行浮动元素减小了对后面元素的清除浮动*/
.box {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 1em;
}

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

• vertical-align会影响到inline-block属性。你能够把它的值设为top。

• 你须要设置每一列的宽度

• 若是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://penouc.com

---

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