前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?".本系列将稍微深入探讨一下那个貌似没什么好玩的border! <CSS魔法堂:重拾Border之--解构Border> <CSS魔法堂:…

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?".本系列将稍微深入探讨一下那个貌似没什么好玩的border! <CSS魔法堂:重拾Border之--解构Border> <CSS魔法堂:…

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?".本系列将稍微深入探讨一下那个貌似没什么好玩的border! <CSS魔法堂:重拾Border之--解构Border> <CSS魔法堂:…

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?".本系列将稍微深入探讨一下那个貌似没什么好玩的border! <CSS魔法堂:重拾Border之--解构Border> <CSS魔法堂:…

前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style type="text/css"> .ball{ background: rgba(100,100,100,0.2); width: 100px; height: 100px; padding: 10px; border-radius: 50%; box-shadow: -14px 8px…

前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Float的特性和行为特征,若有纰漏望各位指正. 被埋没的志向--文字环绕  回忆一下我们一般什么时候会想用浮动呢?是多列布局还是多列布局呢:)?其实它向往的却是这个  它想干的就是这个--文字环绕,而且CSS2中除了浮动外没有其他属性可实现上述的效果.  那到底如何理解它的实现原理呢?下面我们采取分步…

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊......于是通过本篇来一探究竟:) line-height到底有多height? 行距.行间距傻傻分不清  首先看看"有道词典"的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本…

前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibility:hidden保留原来的位置后,面试官就会心一笑呢?其实不止那么简单呢!本文我们将一起深究它俩的恩怨情仇,下次面试时我们可以回答得更出彩! 深入display:none  我们都清楚当元素设置display:none后,界面上将不会显示该元素,并且该元素不占布局空间,但我们仍然可以通过JavaScript操…

前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通过伪元素更好地实现更多的可能! 初识伪元素  说起伪元素我第一想到的莫过于::before和::after这两个了,它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点.那这时我不禁地想问:"直接添加两个class为.before和.after不是一样的吗?"  其…

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins>  <CSS魔法堂:你一定误解过的Normal flow>  <CSS魔法堂:Absolute Positioning就这个样>  <CSS魔法堂:说说Float那个被埋没的志向>  深入细节后会发现3中定位模式之间,Box…