制作 html 样板：
- 设置 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>
样板作用：
- 指定使用 HTML5 语法
- 要求 IE 遵守现代浏览器的渲染标准
- 锁死页面在移动设备显示宽度
- 引入了 normalize.css, 在默认的HTML元素样式上提供了跨浏览器的高度一致性
Live 页面编辑
BrowserSync
BrowserSync 可以实现监听你的修改，然后自动刷新页面。
安装 BrowserSync (依赖 NodeJS):
npm install browser-sync@2.7.1
然后在项目目录运行这个命令：
browser-sync start --server --port 4000 --files index.html --files css/main.css
这样页面就会自动刷新了。
设置固定背景
滚动页面时可以发现：
- 页面的背景是固定的，不随页面的滚动而滚动
- 同时放大和缩小窗口可以发现页面背景也会随之放大和缩小
背景固定有两种实现方式，一种是元素 fixed，其背景不做特殊处理；另一种是背景固定，元素不做特殊处理。
这里我们用第二种实现方式，在 body 元素中使背景固定。
- HTML
<body>
</body>
- 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
<body>
<div class="container">
<!-- element1 -->
<!-- element2 -->
<!-- element... -->
</div>
</body>
- 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 元素可以简单地分为两大类。
- p, div, h1, h2, table, ol 等等
- span, img, a, button, input 等等
浏览器渲染效果：
- 灰色背景是块级元素。浏览器会在块级元素前后增加断行。这些元素的默认宽度会填满父容器。
- 红色背景是行元素，他们的宽度刚好适应内容，而且不会造成断行。
居中元素:
- HTML
<!-- This is an image, with display set to 'block' in CSS.
Centered by setting left/right margin.to auto.
-->
<img src="whales.png" class="centered-image"/>
<div class="centered-container">
<!-- All inline elements are centered in this container. -->
<h1>Moby Dick</h1>
<img src="whales.png"/>
</div>
- 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
<div class='container'>
<p>block 1</p>
<p>block 1</p>
<p>block 2</p>
</div>
- 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 属性
具体的属性排序可以按照以下的规则：
- 定位属性: position, float, z-index, clear
- 盒模型相关属性: padding, margin, display, width, height, border
- 字体相关
- CSS2 视觉相关属性 (background)
- CSS3 属性 (border-radius, box-shadow)
以上为思客学习的笔记
网友评论