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

一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top.right和bottom的CSS规则来改变元素的位置. 注意点:[a]. 元素原来位置将保留,不被其他元素所占据; [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ; [c]. 当使用right.top时改变元素位置时,元素将以原来位置的bor…

前言  当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中除了浮动外没有其他属性可实现上述的效果.  那到底如何理解它的实现原理呢?下面我们采取分步…

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control…

前言 一直听说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操…