CSS 0 to 1:踏出第一步

字数 601阅读 57

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

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

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

  1. 设置 doctype
  2. 设置页面编码
  3. 引入初始化 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>

设置固定背景

固定背景有以下特征:

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

背景固定有两种方式,一种是元素设置为 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 属性

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

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
  • 【目录】【上一章】【下一章】 当一个人开始自己欺骗自己的时候——那是一个多么滑稽的场面啊! 一切的罪恶,都是从欺骗...