学习CSS布局

"display"属性

在控制布局方面,display是最重要的css属性，每一个元素都有其默认的display属性值，大部分的默认值不是block就是inline，用block标记的元素一般称为块级元素，而用inline的元素一般称为内联元素。

block

Div标签是块级元素的代表，块级元素占据着整整独立的一行，其他常见的块级元素有p和form，还有html5中加入的header，section和footer等等。

inline

Span标签是内联元素的代表，内联元素能够避免破坏段落结构的情况下，往其中添加文本段落。而元素a就是最常见的内联元素，经常用他来作链接使用。

none

另一个比较常见的display属性值就是none，像script这些比较特别的元素的默认属性值就是none，他经常被用来隐藏javascript语句，适当隐藏暂时不用着显示的元素.但这区别于visibility。设置display：none的元素，经过页面的渲染过后，就好像这个元素不存在了。而设置visibility：hidden；的时候，同样会对该元素进行隐藏，但是，如果他被完全隐藏的时候，其依然还是占据原来的空间。换句话说 display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。

其他display属性

除了上面讲到的display属性值之外，其实还有很多display属性值，比如list-item以及table这些。（链接）这里有一个详尽的列表。我们接下来还会讨论到inline-block和flex，敬请期待。

正如我所提到的，每一个元素都具备一个默认的的display属性值。其实你完全可以忽略这句话！虽然说div在默认情况下不可能是内联的，但是你定制出你想要的display属性值元素。举个常见的例子来说吧，li内联元素常常被用作水平的菜单。

 

margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}	
 {
  width: 600px;
  margin: 0 auto; 
}	

 

在块级元素中设计width属性能够防止在水平上撑满容器。然后，你还能够设置左右margin来进行水平居中。在中间占据指定的水平宽度，然后剩下来的宽度空间就会一分为二成为左右外边距。

现在唯一需要解决的问题就是，一旦浏览器的显示窗口的宽度小于你设定的元素宽度。浏览器就会自动加上一个水平滚动条来进行内容显示，有时这种情况不是我们想要的，需要改进改进。

 

Max-width

#main {
  max-width: 600px;
  margin: 0 auto; 
}	
 {
  max-width: 600px;
  margin: 0 auto; 
}	

 

使用max-width来代替width能够提升浏览器对小窗口情况的处理效果。这个处理方法在移动端上显得更加尤为重要。现在你就可以调整下窗口的大小，来对照下吧！

Box模型

当我们谈及width的时候，我们应该谈论到关于width一个重要的注意点，box模型。当你在元素中设定width，该元素的实际大小一般大于你的所设定的数值：元素的border以及padding会在原设定宽度的大小上进一步撑大容器的宽度。看看下面的例子，两个设定相同width大小的容器，却是以不同大小的形式显示出来。

一般来说，我们需要通过计算来解决这个问题，css开发者总是需要预先把容器设定得小一点（减去border以及padding占据的宽度）来最终达到理想的大小，让人庆幸的是，现在你再也不用这么苦逼了。

Box-sizing

随着日子一天一天过，人们越来越发现为容器的大小计算得非常苦逼，于是，一个名字叫box-sizing的css属性新鲜出炉了。当你在容器当中设定box-sizing：border-box的时候，容器中的border和padding已经不能影响该容器的宽度了。下面的例子和上面的例子大部分都一样，只是下面的例子多了个box-sizing：border-box；

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}	 {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}	

这是目前为止保持宽度大小一致最好的解决办法了，css开发者把下面css代码放在他们的页面上，这样，页面上所有容器都具备这种属性了。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}	
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}	

这样，页面上的所有元素就可以得到更加直观的排版。

由于box-sizing是相当新的属性，你应该像我之前的例子那样添加-webkit-和-moz-前缀，这样在其对应的浏览器中得到更好的显示。IE8+支持这个属性的。

Position

为了应对更加复杂的布局需求，我们就不能忽略position这个属性。它有一揽子有用的属性，而且他们的名称又抽象难记，好吧，我们一个一个地攻破它吧，不过你要做好打持久战的心理准备哦。

static

.static {
  position: static;
}	
 {
  position: static;
}	

Static是元素与生俱来的默认属性。它表示着不进行特殊的定位。一般来说static属性表示该元素没有被定位，而一旦把position属性设定其他值的时候，那么就表示该元素被定位了。

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}	
 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}	

relative表现跟staitc一样，除非你另外添加了其他的属性。

在相对（position：relative）定位的元素中设定top，left，right，bottom属性都会使得改元素的位置发生改变。而且其他内容的位置不会因为该元素位置的改变而改变。

fixed

Fixed属性值的元素相对于视窗进行相对定位，也就是不管你的滚动条滚到哪里去，该元素总会出现在屏幕的相同位置。和position一样，属性top，right，bottom和left都会用上。

我想你一定注意到了在屏幕的右下方的fixed属性。好吧，现在你可以仔细地研究研究它了，下面是相关的css代码。

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}	
 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}	

一个fixed元素不会影响其在页面中的已经定位了的布局。然而移动端的浏览器对fixed属性的支持却表现得很差劲，这里有相应的解决方案。

absolute

Absolute是最复杂的position属性值了，absolute跟fixed相似，只是fixed相对于视窗进行定位，而absolute则是相对于最近的一个父系定位元素进行定位而已，如果absolute没有父系定位元素的话，那么他就相对文档中的body元素，也就是说会跟随页面的滚动而移动。记住，被定位元素就是那些具备position属性且属性值不为static的元素。

下面是一个简单的例子

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}	
 {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}	

class=“relative”，改元素属于相对定位。如果该元素设定为position：static；那么其子系绝对定位就不会脱离该元素，而跑去跟body对齐了。

class=“absolute”：该元素属于绝对定位，相对于其父系进行定位。

这个东西非常棘手，但要想弄出一个优秀的css布局你就必须学习它。下面，将给大家带来关于position更多优秀的例子。

float

另一个要介绍的css布局属性就是float。Float可以实现文字在图片周围浮动的效果，如下图所示。

img {
  float: right;
  margin: 0 0 1em 1em;
}	 {
  float: right;
  margin: 0 0 1em 1em;
}	

clear
Clear就是一个控制float的一个有用属性，
在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？


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