前端知识：CSS（层叠样式表）简要介绍

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

html只负责文档的结构和内容，表现形式完全交给CSS。

一、CSS

1、css页面引入方法

(1) 外联样式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

(2) 内部样式：通过style标签（在head标签内部），在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

(3) 内联样式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">
This is a paragraph
</div>

自己用模板可以直接找：
[1] 模板之家
[2] 源码之家

二、CSS3

CSS3 是最新的 CSS 标准

1、使用calc() 计算高度和宽度

Viewport viewport：可视窗口，也就是浏览器。

• 1vw 等于viewport宽度的1%
• 1vh 等于viewport高度的1%

设置div元素的高度为当前窗口高度-100px

div{
    height: calc(100vh - 100px);     
  }