了解为什么要清除浮动我们先来看一个例子 我们想要的效果是这样的 son1和son2并排显示，不会影响底部蓝色的盒子，要实现这种效果我们先写出元素，如下 如果我们想son1和son2盒子并排显示...100px; height:30px; background: red; float: left; } 结果并没有像我们想象的那样...2.就是今天要讲的使用css清除浮动 清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让他们出来影响其他的元素。...在css clear属性用于清除浮动，其基本语法格式： 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素 both 同时清除左右两侧浮动 清除浮动方法...2.父元素添加overflow属性 添加overflow属性触发BFC方式，以实现清除浮动 给父元素添加overflow:hidden|auto|scroll 优点：代码简洁 缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉
文章上面的代码，虽然代码很简单，不难理解，但是也是建议大家边写边看，这样不会混乱。 文章所提及的小实例，都是很基础的，大家可以参照自己的想法进行扩展，或者修改，可能会有意想不到的效果。...我写这类型的文章也是想授人以渔，不是授人以鱼！ 这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。...看到有逐渐的变化，就是css3动画（ ）的效果 下面简单分析下，这个动画的几个步骤，从下面看到，这个动画一共8个步骤。...计算公式和上面的滑块相似，索引（ ）* 的宽度。不同的就是，ul的偏移量是取负数，因为ul是想左偏，上面的滑块是向右偏！ 当第一张图片的时候，ul偏移量设置（ ）。...今天讲这三个小实例不是说给大家代码，让大家复制粘贴使用，而是希望能起到一个抛砖引玉的作用，拓展思维的作用！就像我之前写文章说得那样，我写文章是希望能起到一个授人以渔的作用，而不是授人以鱼！
回到主题，从最开始的css到如今的sass(less),开发的效率确实变得越来越高效，但是可能有时候我们还是会对页面布局产生烦恼的情绪，比如:"咦？我想让它显示在这个部位，它一点都不听话啊"。...box-sizing: border-box; } 既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。...任意 position: static; 的元素不会被特殊的定位。...你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！ 你可以用百分比做布局，但是这需要更多的工作。总而言之，选一种最合适你的内容的方式。...如果你想要了解更多有关 flexbox 的内容，从这里学习如何辨别一份资料是否过时。或者查看关于最新标准的详细文章。
CSS(三) 發佈於 2018-06-28 本篇将讲解盒模型以及外边距折叠的相关知识。 “CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。...本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。...Inline boxes 不会影响垂直间距，它们不是用于确定布局，只是用于构建块内的样式 Inline boxes 的宽度基于其所容纳的内容，而与父容器的宽度无关 改变 Box 的行为 我们可以使用...Inline box 完全忽略元素的顶部和底部边距。 水平边距显示会像我们期望的那样，而元素周围的垂直空间没有变化。...做法就是在它们之间放置另一个不可见的元素。 一定要记住，填充不会折叠。
这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。 CDN技术示意图： ?...因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。...第八条、把JavaScript和css都放到外部文件中 （Make JavaScript and CSS External ） 这点我想还是很容易理解的。...不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增 大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。...一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。
当我们想写一个css样式时，我们不再需要给标签一个语义化类名，然后再给类名添加CSS规则，我们只需要给标签一个框架提供的类名就行，最后在编译过程中，会自动生成对应CSS规则，这就是原子类CSS，以及它和我们常用语义化标签的不同...不过，TailWind CSS提供了任意值的类名规则，我们想实现32px的字体大小，只需要加入text-[32px]的类名，这种方式，对于其他css属性的任意值也是同样适用，这样就大大增加了开发的灵活性...，这样我们就做到了减少标签里类名数量，而且还可以做到复用。...打包的css体积很小，未使用的类名不会打包输出。 提供了自定义类名配置，扩展了使用场景。 提供了一些基本的组件，对我这种拿来主义比较利好。...TailWind CSS目前的使用场景，个人觉得还是在做响应式网站方面，特别像是官网这种。TailWind CSS本身就是做响应式的，然后一般的官网页面都比较简单，不会有太多的类名造成维护问题。
这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。...因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。...在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。...第八条、把JavaScript和css都放到外部文件中 (Make JavaScript and CSS External ) 这点我想还是很容易理解的。...一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 像我这样的人 最近总是单曲循环的播放着这首《像我这样的人》 听很久都不会觉得腻 或许这首歌最大的魅力就是共鸣...“ 像我这样迷茫的人 像我这样寻找的人 像我这样碌碌无为的人 像我这样孤单的人 像我这样傻的人 像我这样不甘平凡的人 世界上有多少人 ” <!.../ overflow:hidden; /* 内容溢出的处理方式 hidden隐藏 scroll出现滚动条 auto自适应滚动条 */ overflow-x; /* 定义x轴溢出处理方式，其他轴默认auto...*/ overflow-y; /* 定义y轴溢出处理方式，其他轴默认auto */ /* 内容自动省略号的方法 white-space:nowrap; overflow:hidden; text-overflow
前言 如果你想使用ES6模块语法管理代码，又不想使用webpack这个重型工具； 如果你只是想简简单单的写个js、html、css，不需要typescript、postcss等高级工具； 如果你想开发时所见到的错误就像使用...script标签引入的脚本一样清晰； 如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数； 那么，你可以继续往下读了。...处理JS 本地开启nodejs静态服务，拦截所有js文件，检测文件内容，将import/export解释成ES5可执行的方法，再返回给浏览器。 例： ? 浏览器接收到的内容为： ? ?...处理css 直接将css文件的内容以style标签的形式在head创建，不会额外加任何标记。 Tips：创建局部样式请在html文件里使用style，创建全局样式，请使用css文件。...3、a.js引入b.js，b.js引入a.js这类循环引入不会重复加载，但代码可能不会按预期的那样执行。 4、import/export必须独立成行，即同一行不能出现两个import/export。
需要注意的就是评论内容框用的textarea标签，当选择表情的时候输入框内只能用代码来表示，因为textarea中只能存文字，所以要想显示图片可以使用div的contentEditable='true'...以后也不一定会弄吧，可能就那样放着要么删了，精简一下~ 看以后时间和心情吧。 文章评论功能其实也没啥大作用，但是一直在不断的完善自己的博客就感觉很不一样。...而且没有回复确实不太好，可是回复做起来有点麻烦，看了下别家的博客，发现留言评论都做得好好，但是好像都是用的博客平台，像我这样自己写的博客，要加功能只能自己动手敲代码了，只能有空的时候再弄了【/悲伤那么大...】~ 不过自己开发博客也是好处多多，想加什么基本都能加，看你技术上限在哪罢了。...可是网站做到现在再要加移动端适配得写不少css啊，而作为一个后端又贼烦写这些样式~~ 要么就是只把主页和文章详情页调整下好了，其他等以后换套前端框架吧。
Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的。请大家都能好好学习，不要像我一样一扫而过，好好的记下来！...减少页面元素将会减少 HTTP 请求 次数。这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计。 但是否存在其他方式，能做到既 有丰富内容，又能获得快速响应时间呢？...但是当脚本文件下载时，浏览器不会启动其他的 并行下载，甚至其他主机的下载也不启动。 在某些情况下，不是很容易就能把脚本移到底部的。如，脚本使用 document.write 方法来插入页面内容。...避免 DNS 查 询可减少响应时间，而减少并行下载数可能增加响应时间。 一个可行的折中是把 内容分布到至少 2 个，最多 4 个不同的主机名上。 法则 10....提高 Ajax 的性能最重要的方式是使得 其 response 可缓存，就象“法则 3 增加 Expires Header”讨论的那样。
这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。...因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。...第八条、把javascript和css都放到外部文件中 （Make JavaScript and CSS External ） 这点我想还是很容易理解的。...不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增 大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。...一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。
，Loaders API 以它为基础，我也想解释下这些改变背后的缘由以及接下来会有什么期待。...27.1.0 中的改变 在 27.1.0 中，Loader 的遗留问题已经大幅度的减少：实现 LoaderManager 的代码行数只有之前的三分之一，也有很多的测试让 Loader 在未来能够保持一个良好的状态...现在的 Loader 基于这些更高级别且充分测试的组件并从中受益，减少了不断增加的性能损失，提高了 Loader 的可靠性和正确性。 行为变化 这确实意味着一些行为变更。...像我在之前的博客 Lifecycle Aware Data Loading with Architecture Components 中提到的那样，我强烈建议开发者使用 ViewModel+LiveData...如果你使用的是 Android 框架的 Loader，请尽快切换到支持库。因为框架的 Loader APIs 不会有错误修复或者计划中的改进。
为你的页面元素选择正确的加载顺序 你的页面中 部分中的所有元素都需要以正确的方式预加载。用户在你的网站上看到任何内容之前，所有这些元素都必须按顺序加载。...优化工具删除不会用到的变量，还删掉了死代码。...优化服务器端代码同样非常重要，就像我们在处理大文件一文中看到的那样，而不会损失性能。 了解延迟和异步标记 JavaScript 中最常用的同步加载机制之一是异步加载。...如果有插件太多又试图同时运行，那么它将大大减慢你的网站速度。 客观地看待正在使用的插件可以帮助你找出哪些插件是可以不用的。减少插件的数量将使你的 WordPress 网站更快。...定期更新内容管理系统 大多数企业会使用提供内容管理功能的网站平台，比如 Wix 和 WordPress 这样的平台，无需花费大量时间和金钱。如果你用的是其中之一的话，则必须定期去更新它。
当浏览器加载一个web页面时，它不会渲染带有hidden属性的元素，除非该元素被CSS手动覆盖，这与应用display: none的效果类似。...image.png 稍后我们将对此进行讨论，以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。 style 元素 值得一提的是，有些元素的默认值是display: none。...image.png 在上面的例子中，透明的黑色区域有clip-path。当clip-path应用于元素时，透明黑色区域下的任何内容都不会显示。 为了更直观地演示以上内容，我将使用clippy工具。...控制颜色和字体大小 虽然这两种技术不像我们前面讨论的那样常见，但它们可能对某些用例有用。 颜色透明 通过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮非常有用。...动画与互动 当我们想让一个隐藏的元素动起来时，例如，显示隐藏的移动导航，它需要以一种可访问的方式来完成。
其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。 怎么使用css精灵图(sprite)？...使用精灵图的优点对于浏览器来说请求多张小的图片和请求一张大的图片当然是后者的性能更好，大大减少了浏览器向服务器的请求次数，减少了http请求次数，这也是精灵图被广泛使用的主要原因。...使用精灵图可以减少图片的字节数，如果一张图片是4K，9张就是36K，而将所有图片整合在一张图片上之后，只需要4-5K就可以了。...如果想改变网站的风格，只需要改变一张图就可以了，便于后期的维护和修改。...使用精灵图的缺点一定要考虑当前盒子的大小会不会漏出其他图片，一般情况来说还可以，但是如果网页时自适应的，那么可能就会比较麻烦了。
读完这本书的时候我也对书中的知识点进行了总结归纳： 以上是我所用到的知识点概要 本文所有链接均来自《CSS揭秘》，内容基本都来自原书 欢迎交流sunseekers css编码技巧 尽量减少代码重复的重复...，尽量减少改动时要编辑的地方，易维护，性能高； 使用css变量，currentColor,inherit...目前css变量很少，兼容性有待改善 响应式网页设计，每个媒体查询都会增加成本；避免媒体查询...相信每个人都有一套自己实现的方式； 我想介绍一下FlexBox的解决方案 display: flex; align-items：垂直方向上的对齐方式； justify-content：水平方向上的对齐方式...紧贴底部的页脚 一个具有块级样式的页脚，当页面内容足够长时他一切正常，但是当页面比较短时，就会出现问题；页脚就不能像我们期望中那样紧贴在视口的最底部，而是在内容的下方 解决方案:flex弹性布局 flex...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发 当 元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素
以上是我所用到的知识点概要 本文所有链接均来自《CSS揭秘》，内容基本都来自原书 欢迎交流sunseekers css编码技巧 尽量减少代码重复的重复，尽量减少改动时要编辑的地方，易维护，性能高；...边框内圆角 有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状 解决方案：box-shadow和outline结合 实现原理： outline（描边）不会跟着元素的圆角走...相信每个人都有一套自己实现的方式； 我想介绍一下FlexBox的解决方案 display: flex; align-items：垂直方向上的对齐方式； justify-content：水平方向上的对齐方式...紧贴底部的页脚 一个具有块级样式的页脚，当页面内容足够长时他一切正常，但是当页面比较短时，就会出现问题；页脚就不能像我们期望中那样紧贴在视口的最底部，而是在内容的下方 ?...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发 当 元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素
自从上次看了业界大神阮一峰发的那篇文章之后，给我的印象非常的深刻，一直想写文章跟大家交流和探讨一下，那就是：软件开发到底算不算知识呢？...在探讨这个话题之前，我们先看看大神阮一峰是怎么说的，大致内容如下： 在软件开发中，技术变化如此之快，你花费了大量时间学习技术和工具，一旦这些技术被取代，你的知识将变得毫无价值，因为它们大部分都是实施的细节...我最近总是在想这段话，软件开发算不算是真正的知识？ 如果它是一种真正的知识，那么理论上，我们学到的东西大部分应该不会过时，就好像微积分不会过时一样。...大部分时候，所谓编程就是在写某个抽象层的配置。比如，网页样式就是在写 CSS 配置，你很难说这到底是真正的知识，还是像《办税指南》那样的实施细节。 实施细节并不是知识，而是操作步骤。...只不过这个科学基础性的知识的生命周期可能比较长，不容易更新换代一样。 就像我们现在的技术更新迭代快一样。软件开发的技术一直在更新迭代，但是计算机系统原理，编译原理更新的周期快吗？生命周期长吗？
每年年初似乎都有疯狂的冲动想提高工作效率。新年的决心，渴望开启新的一年，当然，“抛弃旧的，拥抱新的”的态度促成了这一切。通常这时的建议严重偏向闭源和专有软件，但事实上并不用这样。...这是我挑选出的 19 个新的（或者对你而言新的）开源项目来帮助你在 2019 年更有效率。 HomeBank 管理我的财务可能会很有压力。我不会每天查看我的银行余额，有时也很难跟踪我的钱流向哪里。...我经常会花更多的时间来管理我的财务，挖掘账户和付款历史并找出我的钱去了哪里。了解我的财务状况可以帮助我保持冷静，并让我专注于其他事情。...图片.png HomeBank 是一款个人财务桌面应用，帮助你轻松跟踪你的财务状况，来帮助减少此类压力。它有很好的报告可以帮助你找出你花钱的地方，允许你设置导入交易的规则，并支持大多数现代格式。...但这通常是一次性的事情，它可以在添加/导入交易时自动添加类别。还有一个按钮来分析帐户并跳过已存在的内容，这样可以加快对大量导入的分类（就像我第一次做的那样）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
