Learn CSS Layout是一个在线的CSS排版教程,简明扼要。

浏览器在加载完一个网页后,需要把HTML元素在浏览器的可视区域(viewport)中渲染出来,这就设计到了排版(layout)的工作。这个过程有点像在地板上铺瓷砖,但是和铺瓷砖不同,网页显示的时候需要很多留白。所以在铺设HTML元素的时候需要有更多的技巧。

display属性

在排版的时候,必须将HTML元素进行分类,而分类依据的则是HTML元素的display的属性:

  • display属性值为none,这用于那些不需要渲染的元素,比如<script>标签
  • display属性值为inline,也就是直列排版。通常用于字体和图片这些自身带有大小信息的元素。比如说字体,它的大小是由字号决定的;再比如说图片,大小是由自身的像素和缩放程度决定的。直列排版的元素从上到下,从左到右铺开;元素和元素之间紧挨,在同一行显示,只有在遇到边界时,才换行继续铺设。
  • display属性值为block,也就是块状排版。具有块状属性元素在排版的时候和前后元素之间必须用断行隔开。一个典型的例子就是<div>元素。一般来说,块状元素的大小由其包含的元素大小决定,如果一个块状元素没有子元素,那么它就显示为空,在显示区域上占据一个空行。但是可以显示给块状元素设置宽度和高度,让它在排版区域占据一定空间。
  • display属性值为inline-block,可以称为块状直列排版。以直列的方式排版,但是每个元素可以设置自己的宽度和高度。
  • display属性还有其他值可以设置,具体查看MDN: CSS: Dispaly

盒子模型

可以这么想象,HTML元素在排版的时候都是装在一个矩形的盒子(box)里面进行铺设的。那么如何决定这个盒子的大小呢?除了考虑HTML元素自身的内容大小以外,还必须考虑边框(border)、内间距(padding)和外间距(margin):

  • 一个HTML元素所在盒子的宽度 = 内容宽度 + 左右边框大小 + 左右内边距大小 + 左右外边距大小
  • 一个HTML元素所在盒子的高度 = 内容高度 + 上下边框大小 + 上下内边距大小 + 上下外边距大小

这就是所谓的盒子模型。

有一个CSS属性width,可以用来设置HTML元素宽度,但是这里有一个歧义的地方,那就是width到底设置的是HTML元素内容的宽度,还是HTML元素盒子的宽度?不同的浏览器可能有不同的实现,为了化解这个歧义,可以指定元素的box-sizingcss属性:

  • box-sizing值为content-box的时候,width指的是内容的宽度
  • box-sizing值为border-box的时候,width值得是盒子的宽度

其他

(本小结完)