CSS 初体验

制作 html 样板：

1. 设置 doctype
2. 设置页面编码
3. 引入初始化 css

  
    

    
    

    

    
    

    
    

    
    
  
  
    put content here
  

样板作用：

• 指定使用 HTML5 语法
• 要求 IE 遵守现代浏览器的渲染标准
• 锁死页面在移动设备显示宽度
• 引入了 normalize.css, 在默认的HTML元素样式上提供了跨浏览器的高度一致性

来，让我们谈一谈 Normalize.css

Live 页面编辑

BrowserSync
BrowserSync 可以实现监听你的修改，然后自动刷新页面。
安装 BrowserSync (依赖 NodeJS):

npm install [email protected]

然后在项目目录运行这个命令：

browser-sync start --server --port 4000 --files index.html --files css/main.css

这样页面就会自动刷新了。

设置固定背景

滚动页面时可以发现：

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

背景固定有两种实现方式，一种是元素 fixed，其背景不做特殊处理；另一种是背景固定，元素不做特殊处理。

这里我们用第二种实现方式，在 body 元素中使背景固定。

• HTML

• CSS

body {
  background-image: url(../img/bg5.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

实现原理：

• background-attachment: fixed; 使背景图不随页面的滚动而滚动
• background-size: cover; 使背景图始终填满整个屏幕
• background-position: center; 使背景图居中

居中外包围框

外包围框作用:

• 居中内容

• 围框里所有 block 元素的默认宽度是充满父容器的宽度，不需要个别为每个元素设置宽度。

• HTML

• CSS

.container {
  width: 960px;
  margin: 0 auto;
}

实现原理：

• width: 960px; 设置外包围框的宽度。
• margin: 0 auto; 让浏览器自动计算左右 margin，使外包围框居中。
  • 这个居中技巧只限于有设置宽度的容器。

你常常会看到网页选择 960px 这个宽度，这是因为一般浏览器是 1024 宽，加上滚动条就是 1000-1004。960 给滚动条和其他浏览器 UI 预留了足够的空间。 并且 960 这个数字可以 2，3，4，5，6，8，10，12 等数字除尽，方便做网格。

头部容器

HTML 元素可以简单地分为两大类。

1. 块级元素

• p, div, h1, h2, table, ol 等等

2. 行元素

• span, img, a, button, input 等等

浏览器渲染效果：

• 灰色背景是块级元素。浏览器会在块级元素前后增加断行。这些元素的默认宽度会填满父容器。
• 红色背景是行元素，他们的宽度刚好适应内容，而且不会造成断行。

居中元素:

• HTML

  
  
Moby Dick
  

• CSS

.centered-image {
  display: block;
  width: 25%;
  margin: 0 auto;
}

.centered-container {
  text-align: center;
}

实现原理：

• display: block; 把行元素变成块元素
• margin: 0 auto; 居中块元素
  • 元素一定要有 width 属性
• text-align: center; 通过容器来居中行元素

使用 text-align 居中必须经过一个元素的父元素来居中，这会影响在这个容器里所有的元素。 在前面这个例子你可以看到不只是图片居中了, h1 和 p 里面的文字也被居中了。

如果你想要居中一个行元素（比如图片），但不影响同个容器里面的其他元素，那你可以选择把它设定为块元素来居中。

调整元素间距

我们要用 margin 来指定元素之间的间距。在这个例子我们让一个容器里的每个元素之间有 50px 的间距。元素和容器也有 50px 的间距。

• HTML

  
block 1
  
block 1
  
block 2

• CSS

.container {
  background-color: #D8D8D8;
  padding: 1px;
}

.container p {
  margin-top: 50px;
  margin-bottom: 50px;
}

• margin-top: 50px; 和 margin-bottom: 50px; 设定间距
• padding: 1px; 禁止 .container 折叠间距

在 .container 上面加上的 padding: 1px; 有点神奇。假如我们没有加上这个 padding: 1px;，你会发现效果变成了这样：

这是因为容器本身的 margin-top 会和第一个子元素的 margin-top 折叠在一起。在容器和 top 这个字符之间的空白其实是 子元素的 margin-top。同样的，父元素的 margin-bottom 会和最后一个子元素的 margin-bottom 也折叠一起了。

有关 margin 折叠的细节和用法可以看 Collapsing Margins

怎样排序 CSS 属性

具体的属性排序可以按照以下的规则：

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

参考 CSS property order - @mdo

以上为思客学习的笔记