相比于上面的方法多了一些代码，理解麻烦，不推荐。 略微难理解，margin或padding的值要对应好；浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷。 这种布局常用推荐使用浮动去做，配合 overflow:hidden; 触发 BFC，非常好用，兼容性也 ok，但是设置…

女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。 当然，最好的方式是用canvas来画。 因为tan(θ)=sy/sx，θ=Math.atan(sy / sx)，因为雨的线段默认是从上到下垂…

用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。🤔 以这个模板为例，没有应用css属性。🖥 使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。 clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。 在此…

这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要JS什么的，我就懒，算了算了，不写了。 然后今天早上就看完数据结构教程，无聊，顺便看慕课网的瀑布流教程，发现一般般，不过学到了用columns，然后又谷歌到了 break-inside 额，发现很O…

在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于阅读。为此，我们一般使用wrapper 或者 container。在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，…

移动端适配我们需要做哪些事情?一个最佳实践除了设置viewport和rem基准值，随着iPhone手机的不断升级，我们不得不正视以下2个问题：安全区域适配识别刘海屏关于viewpoint-fit在切入

这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 “流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如…

继上一篇html篇之后，看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。 文中篇概念性的内容也蛮多，小编一…

下面总结了一些常用又有趣的css技巧，希望大家收藏，以减少查资料的时间。 css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -…