Learn CSS Layout是一个在线的CSS排版教程,简明扼要。
排版的一般矛盾在于需要显示的内容大于浏览器的可视区域,这时候我们的选择一般是让内容在垂直方向上溢出,这样用户可以通过上下滚动来观看溢出的内容。如果在水平方向上溢出的话,就需要使用左右滚动,这不是一个非常符合直觉的操作。
关于排版,还有一点需要记住的是,排版本来就是浏览器自身的行为,我们只不过对这个过程进行干扰,然后达到预想的结果。
使用width排版
比如我们希望把内容剧中,可以使用这样的CSS:
#main {
width: 600px;
margin: 0 auto;
}
我们不是通过设置某个属性为居中
来达到目的,而是把内容左右两边的margin设为auto
,让浏览器自动平均分配两边的剩余空间。
排版过程中需要考虑的一个点是可是区域(viewport)的大小会发生变化,所以设计排版的时候最好有一定的弹性。比如指定内容的最大宽度max-width
,而不是固定宽度width
。
使用position排版
position属性可以改变HTML元素的铺设,我们可以使用它来达到一些排版的效果,比如说一个在position example中实现的左右两栏、下面带底栏的排版。
实现上述板式的关键是进行留白。
底栏
要实现底栏,首先要对document进行留白:
body {
margin-bottom: 120px; /* document下面预留120px空间 */
}
然后把底栏固定在底部:
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
注意,底栏的高度这里设置为70px,小于document的留白。另外底栏的position设置为fixed,这样底栏的定位就是相对于可视区域的;再把bottom设置为0,就把底栏固定到了可视区域的底部。
这样我们就得到了一个可以和可视区域一起滚动的底栏。
内容栏
这个板式采取的是左右两栏的格局,内容栏在右边,导航栏在左边。实现的时候需要内容栏给导航栏留白:
section { /* section标签用于内容呢 */
margin-left: 200px; /* 左边留白200px */
}
然后导航栏必须固定在左边:
nav {
position: absolute;
left: 0px;
width: 200px; /* 不要超过留白 */
}
通过把position设置为absolute,以及把left设置为0px,导航栏就会贴到左边界。
但是position:absolute能生效的前提是,导航栏的必须有一个position不是static的祖先元素做锚点(默认是body元素)。所以我们需要把导航栏和内容栏都包含在一个容器里面,并且这个容器必须做以下设置:
.container {
position: relative;
}
(本小结完)