CSS 0 to 1：踏出第一步

2016-10-11 本文已影响38人 yhy

CSS 有很多坑，不同的属性和不同的元素搭配会出现不一样的效果，通过经验来学习会花费很多时间，但有一个方法可以解决这个问题，那就是学习 CSS 设计模式（CSS Design Pattern）。

MDN 和 Can I Use 这两个网站在前端开发中非常重要。

设置一个代码样板可以帮助我们更快的开始设计一个页面，避免重复的工作，代码样板包含以下元素：

设置 doctype
设置页面编码
引入初始化 CSS

<!--
HTML5. Use tags like <article>, <section>, etc.
See: http://www.sitepoint.com/web-foundations/doctypes/
-->
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">

    <!--
    Ask IE to behave like a modern browser
    See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
    -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>My Site</title>

    <!--
    Disables zooming on mobile devices.
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--
    Stylesheet that minimizes browser differences.
    See: http://necolas.github.io/normalize.css/
    -->
    <link rel="stylesheet" href="css/normalize.css">

    <!--
    Our own stylesheet.
    -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    put content here
  </body>
</html>

设置固定背景

固定背景有以下特征：

页面的背景是固定的，不随页面的滚动而滚动
同时放大和缩小窗口可以发现页面背景也会随之放大和缩小

背景固定有两种方式，一种是元素设置为 fixed，背景不做任何处理；

另一种是背景固定，元素不做特殊处理；

在这里使用第二种方式，在 body 元素中使背景固定

<body>
</body>

<style>
  body {
    background-image: url();
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
</style>

background-attachment 定义页面滚动时背景的行为。

background-size 定义缩放时背景图的效果。

background-position 指定背景图片的初始位置。

居中外包围框

外包围框内元素的宽度默认为外包围框的宽度，不需要再为子元素设置宽度。

支持响应式布局时只需调整外包围框宽度即可。

<body>
  <div class="container">
  </div>
</body>

<style>
  .container {
    width: 960px;
    margin: 0 auto;
  }
</style>

margin: 0 auto; 可以使元素自动居中。

居中元素

// 把行元素为块元素后居中
.inline-element {
  display: block;
  margin: 0 auto;
}

// 通过行元素的父元素居中
.inline-element-father {
  text-align: center;
}

使用 text-align 时必须通过一个元素的父元素来居中，这会影响父元素中的所有元素，为了不影响其他元素可以把元素变为块元素后居中。

调整元素间距

父元素和子元素共用一条边或两个元素的 margin 直接接触的话会出现 margin 折叠的情况，如果不想它们折叠的话可以给其中一个元素加上 padding 或者 border。

排序 CSS 属性

一个元素内具体的属性排序可以按照以下的规则：

定位属性: position, float, z-index, clear
盒模型相关属性: padding, margin, display, width, height, border
字体相关
CSS2 视觉相关属性 (background)
CSS3 属性 (border-radius, box-shadow)