日期:2016年7月15日

CSS:理解:Before和:After伪元素

CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。 观看演示 之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章,下面我们要详细的再说一下。 事实上,伪元素在CSS里是一系列的元素,比如:first-line, :first-letter, ::selection, :before 和 :after,但在本文中,我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。 伪元素语法 早在CSS1里就已经有了伪元素的概念,但我们今天要说的 :before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before &… Read More

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: p:before {} 不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display… Read More

进一步理解CSS浮动与清除浮动

本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素。 起因 CSS的浮动,算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话,只能说“知其然而不知其所以然”。虽然很多人都说浮动会用就行,但是要想成为一个优秀的前端,对这些常用属性得知根知底。 恰巧在慕课网,张鑫旭老师开了《CSS深入理解之float浮动》这门课。链接在文末,有兴趣的可以听听,老师讲课风格很风趣…… Float的历史 Float设计的初衷,是为了实现文字环绕效果。就像下图展示的一样(图片源于w3school): 嗯,就这么简单。 Float引起的父元素高度塌陷BUG? 在这儿,我们用一个例子来说明子元素设置浮动,从而引起父元素高度塌陷的问题。 首先写一个div,里面插入一张图片。 <div id="div"> <img src="./source/head.jpg"> </div> 我们再给div设置一个border,为了让大家看的清楚。 CSS设置如下: #div… Read More

关于CSS浮动(float,clear)的通俗讲解(经验分享)

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例。 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。 注意,以上这些理论,是指标准流中的div。 小菜认为,无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。 显然标准流已经无法满足需求,这就要用到浮动。        浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。 例如,假设上图中的div2浮动,那么它将脱离标准流,但div1、div3、div4仍然在标准流当中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。如图: 从图中可以看出,由于对div2设置浮动,因此它不再属于标准流,div3自动上移顶替div2的位置,div1、div3、div4依次排列,成为一个新的流。又因为浮动是漂浮在标准流之上的,因此div2挡住了一部分div3,div3看起来变“矮”了。 这里div2用的是左浮动(float:left;),可以理解为漂浮起来后靠左排列,右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。 如果我们把div2采用右浮动,会是如下效果: 此时div2靠页面右边缘排列,不再遮挡div3,读者可以清晰的看到上面所讲的div1、div3、div4组成的流。 目前为止我们只浮动了一个div元素,多个呢?… Read More

清除浮动的最佳方案:clearfix

CSS清除浮动float闭合,很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;} 或者 .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。 但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。 最优浮动闭合方案: .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{*+height:1%;} 用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。 你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了: .demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden} .demo,.demo2{*+height:1%;} 以上写法就避免了改变html结构,直接用css解决了。 最简单的清除浮动的办法(推荐): .clearfix{overflow:auto;zoom:1} /* zoom is… Read More