CSS 动画一站式指南
摘要：CSS 动画一站式指南 1. CSS 动画 在 CSS3 出现之前，简单的交互都需要使用 JS 才能完成，如今 CSS3 增加了 transform ，transition ， animation 三大交互属性，为 CSS 的单调性增加了很多趣味，CSS 也可以实现比较复杂的动画了。 1.1 变换
阅读全文
posted @ 2022-11-02 09:56
随笔分类 - CSS
浅析 CSS 中的边距重叠
摘要：边距重叠是什么 在说边距重叠之前，先以正常的思维来考虑如果你现在是浏览器引擎遇到这种情况应该怎么办？ 现在有两个元素 div1 和 div2 上下紧挨着，中间没有其它元素，它们的外边距就会发生重叠。div1 在上，div2 在下，div1 的 margin-bottom 为 20px， div2 的
阅读全文
posted @ 2020-04-23 23:43
CSS 中你应该了解的 BFC
摘要：我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GF
阅读全文
posted @ 2020-04-21 18:50
W3C 标准盒模型和 IE 模型
摘要：CSS 中有两种盒模型，分别是 IE 盒模型 和 W3C 标准盒模型 。 从上图可以看到标准 W3C 盒模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE 盒子模型的范围也包括 margin、border、pa
阅读全文
posted @ 2020-04-20 15:33
实现三栏布局的五种方法
摘要：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300 px，中间自适应。 中间自适应就是说中间的盒子可以随着浏览器窗口的大小或子元素的大小自动调整大小，中间盒子不能是定宽的，它的大小是由子元素撑开的。 接下来用五种方法来实现题目中的要求。 1. float 布局 由于两边的元素宽度是固定的，
阅读全文
posted @ 2020-04-03 11:47
CSS 中 box-shaow 详细用法教程
摘要：影子在现实生活中可以是一个物体的副本，在 CSS 中也是这样的，相当于复制了那个元素（并不是真正的元素，对页面布局没有任何影响），可以从下面的代码中看出来。 这个时候实际上已经生成了一个宽度 100px，高度 100px 蓝色的正方体，现在我们通过给它加一些偏移量让其显示出来。 令 当我们令这个影子
阅读全文
posted @ 2020-03-25 17:29
移动端适配思路浅析
摘要：本文主要讲了一些移动端适配的基本思路和一些代码示例，并没有讲解具体的移动端适配的方案，主要从为什么这么做出发讲了一些自己粗浅的理解。 所谓移动端适配，就是页面运行在移动端并且会根据当前运行的移动端设备的大小自行进行调整。 实现移动端适配可以按照以下思路出发， 首先要将 viewport 的宽度等于设
阅读全文
posted @ 2020-01-04 21:55
CSS布局方式--inline-block 布局
摘要：布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。 inline block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline block 元素排列没有清除浮动这样的问题。 但是，使用 inline block 布局两个元素之间会有
阅读全文
posted @ 2020-01-04 09:51
