Learn CSS Layout学习笔记(二)

Tue 25 December 2018 / In categories Web

CSS

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;
}

(本小结完)

Load Disqus Comments