CSS
文章平均质量分 95
Zoey Chou
这个作者很懒,什么都没留下…
展开
-
CSS3变量currentColor浅析
定义currentColor是CSS3中的变量,它表示“当前的标签所继承的文字颜色”。!tips:“当前颜色” 指本体color , 如果没有设置color就找父元素,一级一级找,一直到根元素位置。基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-04-11 17:48:49 · 3830 阅读 · 0 评论 -
低版本浏览器flex布局简易替代方案
需求:实现以下布局IE10以上可采用最为简单粗暴的flex弹性布局,具体如何做,请移步百度;若要兼容IE8+可使用“宽度分离”或者特定场景下使用格式化宽度来实现宽度分离:在不考虑box-sizing属性下,宽度分离是保证元素尺寸改变不影响布局的良好解决方案,甚至在某种情况下比box-sizing具有更好的表现。具体原则是:width属性不与影响宽度的border、padding(有...原创 2019-05-06 15:54:22 · 1269 阅读 · 0 评论 -
三种方法实现两栏等高自适应布局(《CSS世界读书笔记》)
前言本文为张鑫旭《CSS世界》读书笔记,代码实现思路亦来源此书。效果需求:实现两栏布局,要求无论哪一栏的内容多,两栏高度均以最高一栏为准,两栏的背景色需和容器高度相等,即竖直方向铺满容器。【TIPS】这里为什么不用height: 100%呢?原因在于必须给父元素设定具体高度值,此属性值才会起作用,但大部分情况下,我们是不太会给父元素的高度定死的。代码实现:方法一:使用 di...原创 2019-05-21 14:11:57 · 2519 阅读 · 0 评论 -
深入理解margin: auto填充特性(《CSS世界读书笔记》)
margin: auto的填充规则:一侧定值(包括不设定值取默认值0的情况),另一侧auto,那么另外一侧的margin为剩余空间大小 两侧auto,则平分剩余空间基于以上规则,可以得出:margin属性的auto可以实现块级元素左中右对齐(且与浮动实现对齐相比为最佳实践)。<div class="father"> <div class="son">&...原创 2019-06-13 14:06:08 · 1102 阅读 · 0 评论 -
小图标和文字天然对齐(《CSS世界读书笔记》)
之前的理解(错误理解):line-height可以实现内联元素的垂直居中效果,所以给span一个与高度相等的行高值,这样图片和文字的“高度”就相等了,文字也自然垂直居中了。但是这个理解是错误的,这其中其实隐藏了很深的原理:原理:一个display: inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的基线就是其margin的底边缘;...原创 2019-06-14 17:19:41 · 680 阅读 · 0 评论 -
几个炫酷且实用的CSS动画效果
一、鼠标滑入文字逐个渐入效果图:鼠标滑入文字逐个渐入鼠标滑入按钮时,按钮中原本的文字从下方滑走,同时在原位置上,按钮文字单个挨个浮现。(原本文字和后面单个浮现的文本内容可不一致,可根据需要进行调整)。实现思路:用div模拟button按钮,并将按钮文本单个单个的放在其子元素span中,用于后面的单个显示。而鼠标没有触发时的静止状态文本则由div按钮的伪类::before来承担。在静...原创 2019-07-11 16:20:09 · 6269 阅读 · 9 评论 -
CSS3 skew斜切效果详解
前言之前一直没理解到这个变形的原理,加之项目上用的很少,就一直没花时间去梳理(这是个坏习惯!),今天趁着又看到了,赶紧来整理整理。原理其实原理很简单,只要手边有纸有笔(或者抽象思维比较好的也可以在脑子里画,反正学渣本渣是不行的)画出来就可以了。举个栗子,下图是例图:图1图形仅在水平方向上变形(垂直方向上的高度不变)。 例如,skewX(30deg)就会把图片从图2变为图...原创 2019-07-17 17:37:15 · 4249 阅读 · 0 评论