一入前端深似海，从此节操是路人。
本文主要是重新系统学习css布局之后的笔记，学习时主要参考的网站是学习CSS布局。其实相当于转载了 :-D
display
block
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p、form和HTML5中的新元素：header、footer、section等等。1
<div style="border: 1px solid #55f">我是一个div</div>
inline
span是一个标准的行内元素。一个行内元素可以在段落中<span>像这样</span>包裹一些文字而不会打乱段落的布局。a元素是最常用的行内元素，它可以被用作链接。
我是一个span我也是一个span我还是一个span
none
另一个常用的display值是none。一些特殊元素的默认display值是它，例如script。 display:none通常被JavaScript用来在不删除元素的情况下隐藏或显示元素。
它和visibility属性不一样。把display设置成none元素不会占据它本来应该显示的空间，但是设置成visibility: hidden;还会占据空间。
inline-block
你可以使用inline-block来布局。有一些事情需要你牢记：
vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top。- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
其他display值
还有很多的更有意思的display值，例如list-item和table。这里有一份详细的列表。
margin:auto
1 | div { |
设置块级元素的width可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为auto来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
max-width
使用max-width替代width可以使浏览器更好地处理小窗口的情况。
盒模型 box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
position
static
static是默认值。任意position: static;的元素不会被特殊的定位。一个static元素表示它不会被“positioned”，一个position属性被设置为其他值的元素表示它会被“positioned”。
relative
relative表现的和static一样，除非你添加了一些额外的属性。
在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom和left属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。1
2
3
4
5
6
7
8
9
10.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 200px;
}
fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。
一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
并且，移动浏览器对 fixed 的支持很差。
absolute
absolute是最棘手的position值。absolute与fixed的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的body元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position值不是static的元素。1
2
3
4
5
6
7
8
9
10
11
12.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 200px;
height: 200px;
}
position例子
float
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：1
2
3
4img {
float: right;
margin: 0 0 1em 1em;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.clear
clear属性被用于控制浮动。比较下面两个例子：1
2<div class="box">...</div>
<section>...</section>
1 | .box { |
1 | .box { |
使用
clear我们就可以将这个段落移动到浮动元素div下面。你需要用left值才能清除元素的向左浮动。你还可以用right或both来清除向右浮动或同时清除向左向右浮动。### 清除浮动（clearfix hack）
在使用浮动的时候经常会遇到一个古怪的事情：
1 | img { |
我的内容比较少，然后图片就溢了出去。。。有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.1
2
3.clearfix {
overflow: auto;
}
这下好了清除浮动这潭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。
浮动布局例子
完全使用float来实现页面的布局是很常见的。这里有一个我之前用position实现的布局例子，这次我使用float实现了它。1
2
3
4
5
6
7nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
百分比宽度
1 | article img { |
媒体查询
1 | @media screen and (min-width:600px) { |
column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：1
2
3
4
5
6
7
8
9.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
flexbox
我觉得讲的比较好的是阮一峰老师的教程。这边只举几个例子：1
2
3
4
5
6
7
8
9
10
11.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
使用 Flexbox 的牛逼布局:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
使用 Flexbox 的居中布局:1
2
3
4
5
6
7
8
9.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}