前言 每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不可选的空白符，于是想尽办法修复这个bug。
直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟，原来我错了。那不是bug，是我不懂而已。先行者——IE5.5中的
原创
2022-03-24 11:45:23
151阅读
下列样式规则可用于最小化各浏览器标签样式的不一致性。注意：实际使用时应该对其进行适当的调整，以适应项目要求。/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1,
原创
2022-03-29 14:44:43
117阅读
前言 Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。Flex就这么简单浏览器兼容性 一说到兼容性就是永远的痛，不过幸运的是只要在IE10加-ms-前缀就可以用啦_涉及的对象 Flex布局主要是操作Flex Container 和 Flex Item
原创
2022-03-24 10:33:50
218阅读
其实我最开始学会的语言是HTML，我记得那还是大一的事情。当时我对床的兄弟DR放了一本HTML的书在床上，我因为没事就拿来看看。那本书大概只有50页左右，可是可以说如果没有这本书，今天Maybe我不会成为一个软件工程师。后来我学习了Flash, DHTML和CSS，不过当时学得CSS和DHTML只是...
转载
2014-07-23 14:25:00
78阅读
CSS(层叠样式表)分成两个部分: 内联样式和外部样式。
转载
2023-05-26 23:39:20
46阅读
一、Position各属性值详解 1. static ：默认值，元素将按照正常文档流规则排列。 2. relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。  
原创
2022-03-29 14:04:57
208阅读
一、前言 文字承载着站点内涵，而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深入一下子网页字体的内容，若有纰漏请大家指正，谢谢！ 目录一坨: 二, 字体分类 1. 衬线体(Serif)
原创
2022-03-29 14:57:48
338阅读
我们想设计一个w=180px；h=100px的div; .demo1 { width: 180px; height: 100px; background: pink; padding: 10px; border: 1px solid #c1c1cc; margin: 5px; } <div clas
原创
2022-09-01 16:59:02
101阅读
选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组
转载
2024-04-22 10:16:42
55阅读
CSS是一种用于控制网页外观和格式的样式表语言。它与HTML（超文本标记语言）紧密配合，HTML负责网页的结构，而CSS则负责网页的样式。通过CSS，你可以轻松地改变网页的字体、颜色、间距、布局等，让网页看起来更加美观和专业。
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model)一、W3C标准的盒子模型 二、IE盒子模型 三、两种模型的区别 W3C标准盒子
原创
2022-03-29 14:02:27
79阅读
前言 以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。属性介绍 首先先我们简单粗暴了解transition属性吧！transition: <transition-property> <tran
原创
2022-03-24 10:31:48
252阅读
如图所示，这是一个很炫酷的卡片效果，关键效果在于卡片的边框呈渐变色变化着，在网页中有这样一个卡片相信可以极大的增强用户体验交互。本次文章将解读如何使用纯CSS实现这个炫酷的卡片效果。
基于上面的动图可以分析出以下是本次实现的主要几点：
卡片的边框是渐变色
卡片的边框呈顺时针动画
卡片底部还有阴影随着边框动画而变化
鼠标悬停时动画隐藏显示静态的卡片
实现过程
看到这样的边框首先要想到的是CSS
原创
精选
2023-11-13 12:49:15
605阅读
转载
2013-12-17 22:55:00
52阅读
2评论
前言 在《CSS魔法堂：Transition就这么好玩》中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习的记录，欢迎拍砖。简单粗暴介绍CSS Animation 规则和属性定义关键帧动画
原创
2022-03-24 10:31:16
313阅读
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
转载
2013-11-29 14:19:00
136阅读
2评论
前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。
后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。以Normal flow为基础Q:不是说好以左上角为原点(0,0)吗
原创
2022-03-24 12:00:44
155阅读
前言过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的，那就是hasLayout。趁着最近突然发神经打算好好学习CSS，顺便解答多年来的疑惑。hasLayout到底是何方神圣？hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽
原创
2022-03-29 15:02:59
107阅读
严文彬 在 mac 文件管理中有这样一个小细节。当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名 img一个很微妙但非常 人性化 的细节（ps.都能完全看见也就不需要提示了????）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~一、CSS 实现思路相信大家都知道 title 这个属性，原生
转载
2021-12-09 16:38:34
149阅读
一、前言 很久之前就了解过CSS3的线性渐变（Linear-Gradient），这段时间决定进一步认知这一特性，以下笔记以便日后查阅。二、CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 &nb
原创
2022-03-29 14:24:21
893阅读
