在我们探讨外边距坍塌如何工作之前，我们需要重新研究盒子模型，文档树中的每个元素都是一个矩形框，由四个区域组成：内容区（content area），填充区域（padding area），边框区域（border area）和边距区域（margin area）。 外边距区域与盒模型的…

在CSS中，margin的值可以是正数，也可以是负数。 当margin为负数的时候，对普通文档流元素和对浮动元素的影响是不一样的。 当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向指定方向。 当元素的margin-bottom或者margin…

敲黑板： 老规矩，本文所有示例均为手打html示例，可以直接选中示例在控制台调试，欢迎👏 并且建议验证各种想法。手敲不易，如果你觉得收获了新知识，那我在此求个赞～ 当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。 …

为什么会高度塌陷当父元素不设置‘height’属性时，向其中添加子元素，父元素会拥有子元素的高度但是当其中的子元素添加’float‘属性时，子元素会脱离文档流，父元素会失去支撑其的高度，也就是所谓的‘

之前一直没有总结一下关于前端学习到的动画该怎么实现,这篇文章帮我自己总结一下。 在学习动画之前, 我们得先了解一下关于动画的基本概念. 帧: 帧是动画的最小单位,一帧也就是一张图片,连续的帧就形成动画。 帧数: 帧数就是在 1秒钟时间内传输的图片的多少。通常使用 FPS 表示。…

前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几种卡券效果的实现。

有些情况下，我需要用一种简单的方法来创建网格布局。 例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实现及使用它们。 在深入探讨这些概念之前，首先我们来回顾一下 CSS 变量的基础知识， 我们也可以将它称为“自定义属性…

1. 层叠上下文 将HTML比做一个三维的结构，众 HTML元素基于其元素属性按照优先级顺序占据这个空间。 z-index可以将它理解为空间直角坐标系中的z轴，值越优先级越高。它可以用来设置元素在HTML中占据这个空间的优先级。 而在HTML的DOM树中每一个DOM元素都可以有…

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。 此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点 alt属性中的文本作为备用文字描述了图片的内容，…