emm...不知道大家知不知道，反正不管怎么样，我就拿来水一下

1. 打开chrome 哦~
2. 右键审查元素 or F12 or ctrl+shit+i or 你自己设置的快捷键...
3. 然后再ctrl+shit+p
   
4. 输入screen
   

即可选择你是部分截图，还是全网页截图了。
（自己看英文哈）

**块级元素（block elements）,来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。
行内元素（inline elements）排列方式是水平排列。
行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的width height,即可以设定自己的高宽值，亦可以设定自己的padding,border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列。**

　　Replaced element 置换元素

　　说到这，有必要提的就是置换元素。何为置换元素，在html中，有类特殊的元素如:

　　|<input>|<button>|<select>|<textarea>|<label>

　　他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。上述六个标签在现代浏览器中即为天生的inline-block元素。

　　包裹性

　　包裹性的另一种说法就是让元素inline-block化。意思是默认情况下一个div的宽度是以100%显示的，而一旦给这个div添加了postion:absolute属性，则100%的默认宽度会变成自适应的内部元素宽度。而诸如：

　　overflow | position:absolute | float:left/right 等都可以让元素inline-block化产生包裹性。

　　而包裹性的作用很多，其中一个是可以使用其来清除元素的浮动。

　　inline-block的作用

　　 css布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子。只是浮动经常会产生一些问题，那么问题来了？浮动是唯一的解决方案吗?

　　浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。So，inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。

　　这里极力推荐一篇张鑫旭的文章：拜拜了浮动布局-基于display:inline-block的列表布局。文章讲解的非常透彻，也将使用inline-block需要解决的兼容问题给出了十分详尽可靠的解决方案。

　　inline-block和float的区别

　　虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:

文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴

IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。可参照去除inline-block元素间间距的N种方法。

1.em

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5

但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。

2.rem

这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

参照后面给的demo

3.vh

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

【腾讯QQ头像获取直链】用别人提供的不如用官方的

1.API接口（qq号式）：https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640

不想用ssl，请把s去掉。

640是大小，可以是640,100

2.API接口（邮箱式）： https://q2.qlogo.cn/headimg_dl?dst_uin=QQ邮箱&spec=640 亲测100也有效

3.API接口（来自QQ空间）：https://qlogo.store.qq.com/qzone/QQ号/QQ号/大小 同时它的地址前缀可以换成qlogo1、qlogo2、qlogo3、qlogo4哦，其实都一样的。 640,100都行

还可以利用api接口地址获取你的QQ空间头像地址：http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=1176996982 , 1176996982替换为你的QQ号，然后会返回一串json数据，里面的网址就是你的头像了。

再附一个https的QQ头像API接口：http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=1176996982 ，同样会返回json数据，然后自行提取你的专属头像网址。

https://www.jianshu.com/p/9a463d50e441

这篇文章写得不错