《学习CSS布局》学习笔记

近几天做了一个小的企业展示网站。虽然页面是在模板的基础上改的，但改的多了不熟悉CSS也很麻烦。正好我看到了学习CSS布局这个网站，于是补习了一下CSS知识。

CSS的显示

CSS的元素分为两类：块级元素和行内元素。

• 一个块级元素会新开始一行并且尽可能撑满容器。常见的块级元素包括div、p、form，以及HTML5中新加入的header、footer、section等。
• 行内元素可以显示在段落内而不打乱段落的布局。常见的行内元素包括span和a等。

display属性就是控制元素的表现形式，它的值包括inline、block和none等。

none通常用于在不删除元素的情况下隐藏元素，但使用none不会保留元素本该显示的空间。

inline-block用于将块级元素显示在行内。

控制元素显示的属性还有外边距、内边距、边框、上下左右的边等。于是就讲到了元素的盒模型。

盒模型

上面的这些属性使得元素的显示就像一个盒子一样。

但是我们指定了它的长和宽却并不一定是它最终展示出来的样子。因为元素的边框和内边距会撑开元素。

通常的做法是在设置长和宽是提前减去内边距和边框的宽度。另一种做法是使用box-sizing这个属性,此时内边距和边框不再会增加元素的宽度。

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

position

为了实现更复杂的布局，需要对元素进行定位。position这个元素有以下几个属性：

• static：默认值。不会进行特殊的定位。
• relative：相对定位。对其设置top、bottom、left、right等属性可以使其偏离其正常位置。
• fixed：固定定位。相对于浏览器的视窗而言。通常用于摆放不随页面滚动的元素。如固定的页首和页脚、固定的导航栏等。
• absolute：绝对定位。相对于元素的父元素（或者如果没有父元素，就相对于文档的body元素）进行定位。

浮动与清除浮动

使用上面的position属性已经可以设计出复杂的布局了。但是对于并排显示或者环绕的效果，实现起来还是不够简洁。

使用浮动float可以比较简便的实现以上布局。

使用了浮动属性的元素会脱离标准流（标准流就是块级元素独占一行，从上往下依次排布），但其他的元素仍处于标准流中，这时可能浮动的元素覆盖了其他一些元素。

解决方法是使用清除浮动clear。注意clear作用的对象是自身而不是其它浮动的元素。

如，clear: left表示，不允许左边有浮动元素，所以此元素就会下移，避免被浮动元素遮挡。

浮动的元素还可能出现的问题是溢出。我们可以使用overflow:auto使得父元素自动调整大小。

overflow包括以下的值：

• visible：默认值。内容不会被修剪，会呈现在元素框之外。
• hidden：内容会被修剪，并且其余内容是不可见的。
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inline-block

有了float可以更方便的实现并排显示多个块级元素，不过还有更方便的一种方法。

前面提到的display中的inline-block可以将块级元素显示在行内。不过，你需要指定每一列的宽度。如：

.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

媒体查询

为了实现响应式布局，可以使用媒体查询，针对不同的浏览器和设备“响应”不同的显示效果。如：

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}