那些前端必知的知识：CSS的高端使用方法
对于 学过CSS，与正在学习CSS的朋友们来说，弄懂以下知识说明你正在初级成长中。
基础CSS 盒子模型(Box Model)
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
但是一个好的前端工程师还要会以下技术
响应式 Web 设计
1.Viewport
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport"
content="width=device-width, initial-scale=1.0">- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
2.媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
例如：如果浏览器窗口小于 500px, 宽度变为50%
@media only screen and (max-width: 500px) {
.container {
width:50%
}
}移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。
横屏/竖屏 orientation：portrait | landscape
如果是横屏 宽度变为50%
@media only screen and (orientation: landscape) {
.container {
width:50%
}
}3. 弹性盒子模型（Flexible Box）
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）
4. Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言
有人说99%的前端开发者都没有系统的学习过 CSS。可能这句话有点夸张，但绝不是信口开河。
想必每一个学前端的同学都有过这样痛苦的经历，那就是调整页面的样式，写各种各样的 CSS 样式来满足需求，到最后却发现目标没实现，反而导致页面的样式更加混乱。因为 CSS 是会导致污染的，不同的样式之间会互相影响，这对大多数没有系统学习过 CSS 的同学来说简直是灾难。所以写可读性高、性能好的 CSS 样式尤为重要。
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。