1.派大星：他真是可怕了，一看到他我就恶心！&nbsp;那双大牛眼睛、方身体、两颗大门牙，还有那个愚蠢的领带！真是太可怕了！&nbsp; 海绵宝宝：呃……&nbsp; 派大星：但是这些在你身上就很好看~ 2.谁都会犯错误，所以人们才会在铅笔的另一头装上橡皮 。 3.海绵宝宝，我只想告诉你一件事情，派大星也是需要人疼的。&nbsp; 4.我生下来就是为了与你相遇。 5.我要两个冰激凌一个给我吃，一个给我的好朋友海绵宝宝。 6.知识不能代替友谊，比起失去你，我宁愿做个白痴(68集，聪明珊瑚脑) 7.人生就是不公平的慢慢习惯吧你。 8.你可以是一本打开的书，海绵宝宝，但我比那复杂点儿。 9.派大星:如果你去上学，那我该做什么呢？ 海绵宝宝:我不知道，如果我不在家，你会干什么？ 派大星:我会等你回来的。 10.海绵宝宝:他们都去哪了？ 派大星:“他们都放弃你了，可是我没有，因为我不是那么聪明”。 11.海绵宝宝：不如我们来玩海盗好啦&nbsp;。 &nbsp;&nbsp;派大星：不，朋友我们好像已经渐行渐远了，过去我们在一起很快乐，可现在我们不能兼容了，我们应该分道扬镳了，这就是人生！人生！懂吗？我知道很难 面对现实吧，也许将来我们会再次相逢，请你勿忘我，海绵宝宝先生。 12.章鱼哥:派大星你在这干什么？ 派大星:我觉得这个机会可以改变我的生活！ 13.你不会，不会明白的，大家都说你不行，我现在行了！ 14.没想到我会失去最好的朋友，至少我和派大星做过朋友。 15.虽然我满腹经纶，却无人分享，一个朋友都没有。曾经和我欢笑的人是谁啊？海绵宝宝吗？ 16.我愿意付出一切，只要我的朋友回到身边来！

派大星经典语录

这是你人生中一个重要的时刻，是你会铭记一生的事情，不仅是你明天和朋友聊天的谈资。如果你以后想起，无论何时回想起来，这件事都会让你嘴角带笑的话，那就去做吧！但如果你并不这么认为或者不太确定，那就忘掉它吧！因为你还有大把的时间。

电影《完美陌生人》

在使用React写项目时，样式我一般会选择我最喜欢的css-in-js插件styled-components。但在Next.js中使用styled-components时却会有几个问题，解决起来也不麻烦，下面一起看步骤。 问题一：刷新页面，样式消失且控制台报错 解决方法：首先安装styled-components和babel-plugin-styled-componentsnpm install styled-components babel-plugin-styled-components -s然后添加.babel配置<pre class="ql-syntax" spellcheck="false">{
&nbsp;&nbsp;"presets":&nbsp;["next/babel"],
&nbsp;&nbsp;"plugins":&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"styled-components",&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"ssr":&nbsp;true
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;]
&nbsp;&nbsp;]
}
</pre> 问题二：部署到服务器上后，页面加载完成后样式才出现，会有明显抖动感 解决方法：在_document.js里挂载样式<pre class="ql-syntax" spellcheck="false">import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class AntDocument extends Document {
 static async getInitialProps(ctx) {
 const sheet = new ServerStyleSheet()
 // 1.这里采用react里High Order Component的方式，可以重新包装APP和所有渲染的组件
 const originalRenderPage = ctx.renderPage
 try{
 ctx.renderPage = () =&gt;
 originalRenderPage({
 enhanceApp: App =&gt; (props) =&gt; 
 // App挂载样式
 sheet.collectStyles(&lt;App {...props} /&gt;)
 })
 // 因为覆盖了Document，所以要重新返回页面的props
 const props = await Document.getInitialProps(ctx)
 return {
 ...props,
 styles: &lt;&gt;{props.styles}{sheet.getStyleElement()}&lt;/&gt;
 }
 }finally{
 sheet.seal()
 } 
 }

 render() {
 return (
 &lt;Html&gt;
 &lt;Head&gt;
 &lt;/Head&gt;
 &lt;body&gt;
 &lt;Main /&gt;
 &lt;NextScript /&gt;
 &lt;/body&gt;
 &lt;/Html&gt;
 )
 }
}

export default AntDocument
</pre> 好了，以上就是我在Next.js中使用styled-components遇到的问题

Next.js中集成styled-components

本文主要对Three.js做了一个简单的入门，搞清Three.js中各名词的概念含义、以及如何一步步实现一个效果出来。 什么是WebGL? WebGL是一项可以在浏览器中流畅显示3D模型和场景的一种技术。它使用javascript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。 什么是Three.js? Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 <h4>WebGL之Three.js</h4> Three.js是一个封装好的webgl库，它使WebGL的学习更为简单。 好了，介绍完概念之后，下面开始Three.js的内容 Three.js程序结构大体可分为场景、相机、渲染器三大块 场景：场景就是舞台，你可以把任何要显示的东西，放在场景中的任何位置 <pre class="ql-syntax" spellcheck="false">const&nbsp;scene&nbsp;=&nbsp;new&nbsp;THREE.Scene() // 创建场景对象
</pre> 相机：可以理解为生活当中的相机，我们调整相机的坐标、距离的远近，拍出来的效果是不一样的。常见的相机又分为两类：正投影相机和透视投影相机，正投影相机投影尺寸不受物体与相机的距离影响，而投影相机投影尺寸会随着距离的变化而变化 <pre class="ql-syntax" spellcheck="false">const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.OrthographicCamera(left, right, top, bottom, near, far) // 创建正交投影相机
const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.PerspectiveCamera(fov, aspect, near, far) // 创建透视投影相机
camera.position.set(200, 300, 200) // 设置相机位置
camera.lookAt(scene.position) // 设置相机看向的方向
</pre>其中left：表示渲染空间的左边界，right：表示有边界，top：表示上边界，bottom：表示下边界，near：表示从距离相机多远的位置开始渲染，far：表示的是距离相机多远的位置截止渲染，for：表示视场，所谓视场就是能够看到的角度范围，aspect：表示渲染窗口的长宽比 渲染器：渲染器决定了怎么将眼前的场景画到屏幕上 <pre class="ql-syntax" spellcheck="false">const&nbsp;renderer&nbsp;=&nbsp;new&nbsp;THREE.WebGLRenderer() // 创建渲染器对象
renderer.setSize(width, height) // 设置渲染区域尺寸
document.body.appendChild(renderer.domElement) // 将渲染的canvas插入body中
renderer.render(scene, camera) // 执行渲染操作，指定场景、相机为参数
</pre> 好，现在我们场景有了，相机有了，渲染器也有了，是不是可以看到效果了呢？别急，虽然我们场景有了，但是我们没有往场景里添加任何东西，所以是什么都看不到的，下面我们创建一个网格模型，并把它放到场景里 <pre class="ql-syntax" spellcheck="false">const&nbsp;geometry&nbsp;=&nbsp;new&nbsp;THREE.BoxGeometry(100,&nbsp;100,&nbsp;100) // 创建一个长宽高均为100的立方体
const&nbsp;material&nbsp;=&nbsp;new&nbsp;THREE.MeshLambertMaterial({ // 为立方体创建一个红色的材质对象
&nbsp;&nbsp;&nbsp;color:&nbsp;0xff0000
&nbsp;})
const&nbsp;mesh&nbsp;=&nbsp;new&nbsp;THREE.Mesh(geometry,&nbsp;material) // 创建网格模型对象
scene.add(mesh) // 网格模型添加到场景中
</pre> 现在，我们的场景中已经有个一个长宽高均为100的红色立方体，此时我们可以看到浏览器中已经有东西，但是你会发现明明我们的添加的是一个红色的立方体，为什么我们看到的却是一个黑色的且没有立体感的东西？那是因为我们还没有给场景添加光照，就像我们平时拍照的时候如果没有任何光照的话，拍出来的东西当然就是黑色的了。下面让我们来添加光照。<pre class="ql-syntax" spellcheck="false">const&nbsp;point&nbsp;=&nbsp;new&nbsp;THREE.PointLight(0xffffff) // 创建一个点光源，参数为光源颜色
point.position.set(400,&nbsp;200,&nbsp;300)&nbsp;// 设置点光源位置
scene.add(point) // 点光源添加到场景中
const&nbsp;ambient&nbsp;=&nbsp;new&nbsp;THREE.AmbientLight(0x444444) // 创建一个环境光
scene.add(ambient) // 环境光添加到场景中
</pre> 现在我们可以看到浏览器中已经有一个红色的立方体了，如此一来我们便用Three.js创建了一个简单的3D效果。当然Three.js还为我们提供了更多好玩的东西，后面我会慢慢写出来 复制如下代码，用浏览器打开即可看到效果&lt;!DOCTYPE&nbsp;html&gt;&lt;html&nbsp;lang="zh-cn"&gt;&lt;head&gt;&nbsp;&nbsp;&lt;meta&nbsp;charset="UTF-8"&gt;&nbsp;&nbsp;&lt;meta&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1.0"&gt;&nbsp;&nbsp;&lt;title&gt;Three.js入门&lt;/title&gt;&nbsp;&nbsp;&lt;style&gt;&nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.js"&gt;&lt;/script&gt;&nbsp;&nbsp;&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;scene&nbsp;=&nbsp;new&nbsp;THREE.Scene() &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;geometry&nbsp;=&nbsp;new&nbsp;THREE.BoxGeometry(100,&nbsp;100,&nbsp;100)&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;material&nbsp;=&nbsp;new&nbsp;THREE.MeshLambertMaterial({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;0xff0000&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;mesh&nbsp;=&nbsp;new&nbsp;THREE.Mesh(geometry,&nbsp;material)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(mesh)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;point&nbsp;=&nbsp;new&nbsp;THREE.PointLight(0xffffff)&nbsp;&nbsp;&nbsp;&nbsp;point.position.set(400,&nbsp;200,&nbsp;300)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(point)&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;ambient&nbsp;=&nbsp;new&nbsp;THREE.AmbientLight(0x444444)&nbsp;&nbsp;&nbsp;&nbsp;scene.add(ambient) &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;width&nbsp;=&nbsp;window.innerWidth&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;height&nbsp;=&nbsp;window.innerHeight&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;k&nbsp;=&nbsp;width&nbsp;/&nbsp;height&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;s&nbsp;=&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;camera&nbsp;=&nbsp;new&nbsp;THREE.OrthographicCamera(-s&nbsp;*&nbsp;k,&nbsp;s&nbsp;*&nbsp;k,&nbsp;s,&nbsp;-s,&nbsp;1,&nbsp;1000)&nbsp;&nbsp;&nbsp;&nbsp;camera.position.set(200,&nbsp;300,&nbsp;200)&nbsp;&nbsp;&nbsp;&nbsp;camera.lookAt(scene.position) &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;renderer&nbsp;=&nbsp;new&nbsp;THREE.WebGLRenderer()&nbsp;&nbsp;&nbsp;&nbsp;renderer.setSize(window.innerWidth,&nbsp;window.innerHeight)&nbsp;&nbsp;&nbsp;&nbsp;renderer.setClearColor(0xb9d3ff,&nbsp;1)&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(renderer.domElement) &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;render&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestAnimationFrame(render)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderer.render(scene,&nbsp;camera)&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;&nbsp;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Three.js的入门

最近把博客部署到服务器上时，突然发现emoji-mart插件不好使了，原本的表情全部显示成“?”，而本地是正常显示的。于是在网上搜索了原因，	原来是mysql在搞鬼，因为数据库中使用的字符编码为UTF-8，这种编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而mysql的utf8编码最多3个字节，所以数据插不进去，而utfmb64是支持四个字节的。所以解决方案就是：将mysql编码从utf8转换成utf8mb4。 设置数据库默认支持字符集utf8mb4, 找到mysql安装目录下的my.cnf或者mysql.ini,修改my.cnf或mysql.ini[client]&nbsp;default-character-set = utf8mb4[mysql]default-character-set = utf8mb4[mysqld]&nbsp;character-set-client-handshake = FALSE&nbsp;character-set-server = utf8mb4&nbsp;collation-server = utf8mb4_unicode_ci&nbsp;init_connect='SET NAMES utf8mb4' 存在的数据库的字符集是utf8的，如果要支持utf8mb64则需要将已经存在的数据库、表、表字段类型修改成支持utf8mb64. 修改数据库字符集：ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;修改表的字符集：ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;修改字段的字符集：ALTER TABLE table_name CHANGE column_name column_name VARCHAR(191) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 然后重启mysql，顺利解决

emoji-mart部署到服务器上失效的问题

弱者当自强，奋斗不停息，当已不是好莱坞最受欢迎的动作明星好多年的史泰龙又要再战银幕，且希冀复写自己 30 年前的传奇最高点， 这个六旬的老男人难免招来一片叹息。 且不说第六次续写这部得到好莱坞电影工业最高奖赏 （奥斯卡是也） 的电影极有画蛇添足之 可能， 就说已老矣的意大利种马为了再现这个让他一举成名的角色所历尽的艰辛， 也确实令 人替之抹汗一把。 面对足以做他孙子的对手，传奇的矫健动作早已僵硬，岁月让动作迟钝笨拙，闪烁 着金色光泽的肌肉也萎缩了不少， 蹒跚的老人重出江湖， 是会最后一次复兴辉煌？还是只是 黄粱一梦？也许影片拍摄时的小细节可以成为暗示：在真正的拳台拍摄片中激烈大战时， 14000 名真正的拳击迷们（并非临时演员）齐声高呼“洛奇”的名字。每当你认定洛奇已失去 了站立的力气，他又会再次坚强地从灰烬中站起，不管如何，不要低估 30 年不倒的毅力！ &nbsp;&nbsp;&nbsp;《洛奇》到现在拍了整整五部，不得不引起我的注意，从1976年一直打到了2006年。我很纳闷到底这片子有什么可一拍再拍的。虽没有看过，不过用“脚后跟儿”想都知道系列的第一部不说是最好的也是非常有看头儿的一部。记得“外貌协会会长”说过这个片子就是男版的灰姑娘。此话不假，确实，不管怎么说《洛奇》基本就是一部“赤裸裸”的励志影片。当我拿来看过一遍后，出乎意料，自己还是对自己说“嗯，有点意思”。作为一部励志电影，他确是有好莱坞制式的情节和结构。影片用了近一半的片长来表现洛奇潦倒的境况。片子开始就是一场让人提不起劲的比赛，虽说洛奇赢了，但台上不见获胜者的兴奋，台下也没有排山的欢呼，反倒都是叫骂比赛的无聊。休息室里，我们了解到这场胜利为洛奇赢得了65块的奖金，抛去各种费用最后他拿到了40块。这让观众明白主人公的拳坛生涯不但不精彩而且几乎到了只能糊口的地步。这还没完，既然拳台养活不了洛奇，兼职是个理所应当的选择，看看主人公的兼职——为黑社会追债。想想也算是发挥自己的长处。可洛奇天生又不是心狠的人，手再辣也要听脑袋管，追债任务没有按“上面”的要求行事，最后落得一顿奚落。接着，洛奇回到拳击馆，发现自己的储物柜不再属于自己，“老麦克”不客气地告诉洛奇柜子现在是明日之星的，而洛奇不管是不是赢了比赛，都是个蹩脚货。够潦倒吗？还不够。接着连街头的混混都懒得听洛奇的说教，最后回敬了他一个帅气的手势。www.lizhidaren.com一个无知孩子的手势，又一次刺痛了洛奇。有够逊，有够背，有够糗之后，幸运女神终于站在了咸鱼身边，手把手教他翻身。重量级冠军阿波罗希望给一个无名小卒挑战战神的机会，彰显狗屁美国精神。我们的主人公因为外号够销魂——“意大利种马”，被选中，就此灰姑娘穿上了水晶鞋。讲到这儿我想应该就是影片的大概全貌。估计任谁都会说“好吧，不用看这片子了，情节滥俗的可以”。可是就像我自己所说，影片还是有点意思的。&nbsp;<h3 class="ql-align-justify">洛奇观后感</h3><h3 class="ql-align-justify">&nbsp;</h3>这是一部写关于一个拳击手的故事，洛奇（史泰龙扮演）为了生存不得不在拳击职业生涯里面出走，可是他天生左撇子，在拳坛里面却是少见的，他有天赋。闲暇时间帮债主要债，这使得他名声不太好，但是没关系的，那时的他并没有那么辉煌，然而一次偶然的机会，拳坛世界冠军来到他的城市，想找一个当地的拳击手跟他打一场表演赛作为慈善捐献社会，很幸运的选到了洛奇，没让我们失望的是洛奇坚持到了最后，虽然输了，但他这场比赛打出了所有人都认为自杀的比赛。在洛奇得知这个消息后，一直说他是蹩脚货的那个俱乐部老板米奇，来到了洛奇居住的地方，说了很多他当年的辉煌历史，最后他提出能否让我做你的经纪人，当时洛奇没有答应，因为他很生气，“对，我一直都是蹩脚货，我在你们俱乐部这么多年，你今天终于舍得来到我家了是吧，是因为我家很臭，你来啊，搬过来跟我一起住，因为这里很臭”，其实他知道米奇一直都是看好他的，说这些只不过是气话罢了，而且他现在需要一个教练，一个经纪人，在发泄完之后，他决定答应米奇做他的经纪人，此时的米奇已经七十六岁了。&nbsp;&nbsp;&nbsp;我们每个人都有自己的优点、缺点、优势和弱势，无论在哪个行业，只要我们坚持走到最后，胜利就属于你。有辉煌、但是也有失落，每次失落的时候总会有很多人嘲笑你，看扁你，骂你只是个蹩脚货，机会来了就要把握，把握住了，坚持住了，即便不成功也不后悔。记得有首歌的歌词我特别喜欢，“她说风一样的男子，从来就是战士”，对啊，对于一个男人而言，从他来到世上的的那一刻，他就是战士，既然是战士就要永远去战斗，为了领土、为了荣耀、为了家和爱我们的人。电影里面也有一句我非常喜欢的台词：每一个伟大的战士都要有一场伟大的战斗要打。一个人可以没钱、没地位，但必须有自己的信仰，不要说你信仰基督教或是佛教等等根本不存在的东西，或者它们只能说是为一种精神寄托或者是遇到挫折时的方向标。真正的信仰不是别人，而是你自己。坚信自己是最强的，坚信自己是自己的救世主。我们不能做到和这电影里一模一样的洛奇，但是我们要学习他不自卑的可贵精神。生活中，我们不必要过于在乎别人怎么看待自己，做好自己才是最重要的。我们不能做到很完美，但是我们可以做到不留遗憾。做好自己，勇敢奋斗。&nbsp;在面对生活我们也要像影片中的洛奇一样，对生活、工作、自己想做的事情等等都要保有一种他这样的态度，不断的前进，阳光之后总会出现彩虹，相信自己，这才是你的生活。我们的明天是美好的，我们的将来将会是一片彩虹！<h3>洛奇1的经典台词</h3><h3>&nbsp;</h3>有借有还 明白吗?&nbsp;You wanna dance, you gotta pay the band, understand?&nbsp;你要借钱 就自然要还&nbsp;You wanna borrow, you gotta pay the man.&nbsp;你说粗话时他们会笑 他们觉得你很可爱&nbsp;They laugh when you talk dirty, they think you're cute,&nbsp;过不多久 你就名声在外了&nbsp;but after a while, you get a reputation, that's it.&nbsp;没人会尊重你 明白吗?&nbsp;You get no respect, you understand?&nbsp;没人尊重你 我要用一个坏字眼&nbsp;You get no respect. And I gotta use a bad word.&nbsp;婊子 婊子 明白吗?&nbsp;Whore. You understand? Whore.&nbsp;明白吗? 说粗话的下场&nbsp;See, you use dirty words&nbsp;就是可能沦为婊子&nbsp;and maybe you end up becoming a whore, you understand?&nbsp;拜托 洛奇 我已十二岁了&nbsp;Come on, Rocky. I'm just 12.&nbsp;这与你十二岁没有关系&nbsp;Hey, that don't matter that you're 12. It don't matter.&nbsp;你不一定真的要当婊子 行为举止像就完了&nbsp;You don't really have to be one. You just act like one...that's it. Boom.&nbsp;你就会臭名远播 懂不懂?&nbsp;Hey, if you get a bad rap, you understand?&nbsp;二十年后人们会说...&nbsp;Twenty years from now, people are gonna say,&nbsp;你还记得玛丽吗?&nbsp;"Hey, you remember Marie?"&nbsp;不 她是谁?&nbsp;"No, who's she?"&nbsp;就是那个在街角鬼混的小婊子&nbsp;"She's the little whore that hung out at the Atomic Hoagie Shop."&nbsp;噢 我现在想起来了&nbsp;"Oh, yeah. Yeah, yeah, now I remember her."&nbsp;看见了吧 人们不会记得你 只会记得你的名声&nbsp;You see, they don't remember you, they remember the rep.&nbsp;与好人交往就会有好的朋友&nbsp;You hang out with nice people, you get nice friends, you understand?&nbsp;与聪明人交往就会有聪明的朋友&nbsp;You hang out with smart people, you get smart friends.&nbsp;与混混交往就会有混混的朋友&nbsp;You hang out with yo-yo people, you get yo-yo friends.&nbsp;你真的喜欢她?&nbsp;Do you really like her?&nbsp;我当然喜欢她&nbsp;Sure, I like her.&nbsp;我不明白 她有什么吸引你?&nbsp;I don't see it. What's the attraction?&nbsp;我不知道 大概是互补不足&nbsp;I don't know. It fills gaps, I guess.&nbsp;-什么不足 ? -我不知道 我和她都有不足之处&nbsp;-What's gaps? -I don't know. Gaps. She's got gaps, I got gaps.&nbsp;一起便能互补不足&nbsp;Together, we fill gaps. I don't know.

《洛奇》

offsetWidth/offsetHeight&nbsp;&nbsp;&nbsp;&nbsp;对象的可见宽度(包括边框) clientWidth/clientHeight&nbsp;&nbsp;&nbsp;内容的可见宽度（不包括边框） scrollWidth/scrollHeight&nbsp;&nbsp;&nbsp;元素完整的高度和宽度，overflow:hidden的部分也计算在内。 offsetLeft/offsetTop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;距离第一个有定位的父级盒子的距离（没定位以body为准） clientTop/clientLeft&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这个属性测试下来的结果就是border scrollLeft/scrollTop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;设置或返回已经滚动到元素的左边界或上边界的像素数 clientX/clientY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标点距离浏览器窗口的距离（不包括滚动距离） pageX/pageY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标点距离浏览器窗口的距离（包括滚动距离） offsetX/offsetY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标所在元素距离窗口的距离