zhenlong_qu的博客

browser-sync作用：1.启动一个静态的http服务器，方便我们预览和实现；2.监听文件变更，刷新页面。Browsersync - 省时的浏览器同步测试工具 | Browsersync 中文文档。

行高决定上下多余的高度，会把外面的盒子撑起来，line-height会撑起来inline-box的高度(占据空间的高度)，这些span的inline-box在一行，line-box的高度由最高的那个inline-box的line-height决定(也就是line-box的高度，也可以说行高是由line-box决定的，line-box是由inline-box组成的，inline-box的行高决定了line-box的行高)如果父级是200，那么可能是300/400,如果是500，那么就可能是600/700。

浮动属性是CSS中的一个定位属性，它允许元素脱离文档流，并向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边缘。简单来说，它就像是让元素“漂浮”在页面上，不受常规排列规则的限制。在网站开发中需要一行排列多个元素，使用浮动可以方便实现。下面是使用浮动排列多个元素。下面我们来了解一下浮动属性的基本使用语法和常用的应用场景都有哪些。

这种方式是在style上加了个scoped,限制了样式的使用范围。在Helloworld子组件中再次引入我们编写Demo子组件。在App.vue中引入Helloworld子组件。

项目安装 - npm install postcss-cli全局安装 - npm install postcss-cli -g注意：postcss - 本身不具备处理CSS能力，只是可以解析CSS，我们可以在解析的过程中，可以对CSS解析结构进行修改。我们现在对原CSS加CSS前缀处理：*/.box{这里需要使用到autoprefixer插件。

解释：1、通过工具编译成CSS - 通过工具将CSS新的语法编译成老浏览器能识别的CSS；解释：1.less - 基于nodejs实现的，编译速度比较快，并且它有一个浏览器中可以直接使用的版本，不需要预先编译，入门相对简单，但是在一些复杂的实现上，显得相对繁琐；2.sass - 后续的scss版本，都是基于ruby实现的，编译过程比较慢，但是这个问题可以通过移植版本解决，比如nodssass。

解释：1.transition补间动画-从一个状态到另一个状态，这状态之间切换的过渡动画；2.keyframe关键帧动画-关键帧动画其实也属于补间动画，区别在于动画可以有很多个关键帧，从一个状态到一个状态，再到另外一个状态；3.逐帧动画-中间是没有补间的，一帧一帧逐个播放。逐帧动画，相当于每一帧多少关键帧，没有补帧的过程，属于keyframe动画的一个特殊场景，主要适用于动画面积比较小，动画时长不是太长，无法补帧的动画，不然也不会采用逐帧动画。

而width:10px、height:10px，导致看起来就是个圆形，设置为border-radius:5px，阴影也会变成圆形。加上模糊，看起来颜色变深了，区别不是那么明显(PC上效果不明显，移动端上效果明显)，这就是所说的印刷品质感，就是当油墨印刷到纸上，有部分油墨渗透进纸张内，造成字体模糊的感觉。2.充当没有宽度的边框-当你的排版不能有边框，而又想要边框效果，就可以使用box-shadow扩散边框效果；发现边框终于变圆了，要注意这点差异，所以，我们一般使用的时候，直接写50%就好了。

采用类表格的方式布局：我们设置宽度、高度只是设置内容宽度和高度，设置的宽度和高度并不一定等于真正的宽度和高度。盒子真正的宽度、高度 = content(宽、高) + padding + border = margin注： 1）比较常用的有block、inline、inline-block，通俗解释：block - 默认会占据一行，有独立的宽度和高度；inline - 默认不会占据一行，跟文本一样；inline-block - 对内，表现像block,有宽度和高度， 对外，像行内元素，可以与其他元素排在

注：这里div外包了一个a,这里的a会被认为是透明的，而a外面又有个块级元素p,所以就会直接相当于块级元素p包含了一个块级元素div，这是错误的嵌套关系，浏览器会解析错误，解析成下面场景，注：a > div,在实际编码中，这种场景很常见，一个超链接里面嵌套一个div,里面是图片和文字，点击任一一个都可以跳转，在xhtml中是不合法的，而在html5中解释为合法的。大白话：你看到的HTML其实是一堆字符串(文本)，真正动态的是DOM(存在于浏览器内存中，是一棵树),DOM是由HTML解析而来的。