Category: Div / Css / XML / HTML5 / SVG

CSS3: Media Query实现响应式Web设计

十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园…也许需要出门走一走 了。 OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的“弹性布局结构”这方面出发,通过一个具体的实例来深入学习。 如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手 机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同 的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。 范例效果预览 首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。 更多范例 我(原文作者)使用media query的方式设计了一些WordPress模板,比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。 概述 我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由“固定”方式改为“液态”,布局元素的宽度随着浏览器窗口的尺寸变化进行调 整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。 HTML代码 我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚: <div id="pagewrap"> <header id="header"> <hgroup> <h1 id="site-logo">Demo</h1> <h2 id="site-description">Site Description</h2>

CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div

for parent block or body  – text-align:center;  for centerd block- display:inline-block; <style> body{text-align:center} .center{display:inline-block;background:red} </style> <div class="center"> <p contenteditable="true">write text</p> </div> DEMO http://jsfiddle.net/RXP4F/ 参考: http://stackoverflow.com/a/18524791/4484798 关于 inline-block 的用法, 请参考文章:  详解CSS display:inline-block的应用 本文: CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div… Read More

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 & ::after – 这个样子,用来跟“伪类(pseudo-classes)”区分开,(例如 :hover, :active, 等)。 浏览器对伪元素的支持 然而,不论你使用单冒号还是双冒号语法,浏览器都能识别。因为IE8只支持单冒号的语法,所以,如果你想兼容IE8,保险的做法是使用单冒号。 :before和:after伪元素能干嘛? 简言之,这两个伪元素会在真正页面元素之前和之后插入一个额外的元素,从技术角度上讲,它们与下面的HTML标记是等效的。 <p> <span>:before</span> 这里是真正元素的内容 <span>:after</span> </p> 在Web页面的HTML源代码里,你实际上找不到它们,但从视觉上,你却能看到它们的存在,所以我们用这个“伪”字就是表示它们假元素。 :before和:after伪元素的用法 :before和:after伪元素的用法十分简单;下面的代码样例中, :before 和… Read More

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

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: p:before {} 不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了: img::after {} 这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值: [String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例: a:after… Read More

CSS: HTML 和 Body 的区别

在 CSS 中,<html> 和 <body> 的区别往往被忽略,全局样式或者定义在 <html> 上,或者定义在 <body> 上。实际上,两者是有区别的,不论是 CSS 老鸟还是新手,都应该了解。 HTML 和 Body 如何关联 <!DOCTYPE html> <html lang="en"> <head> <!-- Metadata and such --> </head> <body> <!-- Where the content begins --> <body> </html> 根据标准定义,<html> 是文档的根元素,<head>、<body> 是 <html>… 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 { border: 5px solid red; width: 600px; } 最后效果是这样的: 通过chrome控制台,可以看到此时div的高度为464px。 接下来,我们给那张图片添加浮动效果。 #div img{ float: left; } 再看网页,发现父元素已经塌陷了,之前的边框也消失不见了,成为一条线了。 此时再去控制台查看div的高度,高度为0px。 不,不是BUG 很多人把这个现象称为浮动带来的BUG。但从一开始Float的用途来思考:… 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元素,多个呢? 下面我们把div2和div3都加上左浮动,效果如图: 同理,由于div2、div3浮动,它们不再属于标准流,因此div4会自动上移,与div1组成一个“新”标准流,而浮动是漂浮在标准流之上,因此div2又挡住了div4。 咳咳,到重点了,当同时对div2、div3设置浮动之后,div3会跟随在div2之后,不知道读者有没有发现,一直到现在,div2在每个例子中都是浮动的,但并没有跟随到div1之后。因此,我们可以得出一个重要结论: 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。 div的顺序是HTML代码中div的顺序决定的。 靠近页面边缘的一端是前,远离页面边缘的一端是后。 为了帮助读者理解,再举几个例子。 假如我们把div2、div3、div4都设置成左浮动,效果如下: 根据上边的结论,跟着小菜理解一遍:先从div4开始分析,它发现上边的元素div3是浮动的,所以div4会跟随在div3之后;div3发现上边的元 素div2也是浮动的,所以div3会跟随在div2之后;而div2发现上边的元素div1是标准流中的元素,因此div2的相对垂直位置不变,顶部仍 然和div1元素的底部对齐。由于是左浮动,左边靠近页面边缘,所以左边是前,因此div2在最左边。 假如把div2、div3、div4都设置成右浮动,效果如下: 道理和左浮动基本一样,只不过需要注意一下前后对应关系。由于是右浮动,因此右边靠近页面边缘,所以右边是前,因此div2在最右边。 假如我们把div2、div4左浮动,效果图如下: 依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的 元素,因此div2相对垂直位置不变,与div1底部对齐。div4发现上一个元素div3是标准流中的元素,因此div4的顶部和div3的底部对齐, 并且总是成立的,因为从图中可以看出,div3上移后,div4也跟着上移,div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。 至此,恭喜读者已经掌握了添加浮动,但还有清除浮动,有上边的基础清除浮动非常容易理解。 经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。 清除浮动可以理解为打破横向排列。… 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 only for IE6 */ 清除浮动这谭水很深很深,但是上面这个简单的解决方案已经可以在今天所有的主要浏览器上工作。 当然, overflow设置为hidden也可以的: .clearfix{overflow:hidden;zoom:1} /* zoom is only for IE6 */ 目的是一样的, 区别是: 如果你使用auto值, 当内容撑开的时候,会显示滚动条, hidden则不会.… Read More

CSS3实现的响应式字体:自适应视图窗口大小的新单位

这个是为了解决什么问题? 我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。 在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths. 我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的,这正是我要找的东西,我只是不知道它叫什么。 它是怎么工作的? 其实非常简单。一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。   1vw = 当前视图窗口(viewport)1%的宽度   1vh = 当前视图窗口(viewport)1%的高度   1vmin = 1vw 或 1vh, 取决于哪个更小一点   1vmax = 1vw 或 1vh, 取决于哪个更大一点 如果当前视图窗口宽度是100毫米,那么5vw就是5毫米。 vmin 和 vmax 的设置就像这样: section { width: 100vmin;… Read More

CSS尺寸和字体单位-em、px还是%

在页面整体布局中,页面元素的尺寸大小(长度、宽度、内外边距等)和页面字体的大小也是重要的工作之一。一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目。反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性;甚至在当下访问终端 (iPhone、iPad、PC、Android…)层出不穷的今天,适应各式各样的访问终端,将成为手中的一块“烫手的山芋”。所以在近几年,“九宫 格”式的“流式布局”再度回归。为了提供页面布局,及其它的可维护性、可扩展性,我们尝试将页面元素的大小,以及字体大小都设置为相对值,不再是孤立的固 定像素点。使其能在父元素的尺寸变化的同时,子元素也能随之适应变化。以及结合少量最新CSS3的@media查询,来实现“响应式布 局”,bootstrap这类CSS框架大势兴起。 然而在CSS中,W3C文档把尺寸单位划为为两类:相对长度单位和绝对长度单位。然而相对长度单位按照不同的参考元素,又可以分为字体相对单位和视 窗相对单位。字体相对单位有:em、ex、ch、rem;视窗相对单位则包含:vw、vh、vmin、vmax几种。绝对定位则是固定尺寸,它们采用的是 物理度量单位:cm、mm、in、px、pt以及pc。但在实际应用中,我们使用最广泛的则是em、rem、px以及百分比(%)来度量页面元素的尺寸。 px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位。它是一个绝对尺寸单位; em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; %: 百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。 这里需要注意的是:em是相对于应用于当前当前元素的字体尺寸;而百分比则是相对于父元素的尺寸。如下面示例: HTML: <div class="parent"> <div class="em-demo"> 设置长度为5em demo </div> <div class="percentage-demo"> 设置长度为80% demo </div> </div> CSS: div{ border: 1px dashed #808080;

IE6,IE7和8浏览器兼容HTML5标签的解决方案

html5大行其道的时代已经到来。如果你还在等待浏览器兼容,说明你已经与web脱节几条街了。当然,这得益于移动客户端的蓬勃发展。如果还在纠 结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天。如果你不信,我只能 说:爱信不信! 下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5</title> </head> <body> <header> <nav></nav> </header> <article> <section> <h2></h2>

CSS学习之外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图: 亲自试一试 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图: 亲自试一试 尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。 假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并: 如果这个外边距遇到另一个元素的外边距,它还会发生合并: 这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。 外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果 没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的 上外边距和下外边距就合并在一起,这样各处的距离就一致了。 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 一般来说, 垂直外边距叠加有三种情况: 元素自身叠加 当元素没有内容(即空元素)、内边距、边框时, 它的上下边距就相遇了, 即会产生叠加(垂直方向)。 当为元素添加内容、 内边距、 边框任何一项, 就会取消叠加。 相邻元素叠加 相邻的两个元素, 如果它们的上下边距相遇,即会产生叠加。 包含(父子)元素叠加 包含元素的外边距隔着 父元素的内边距和边框, 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加。 添加任何一项即会取消叠加。   来自:http://www.w3school.com.cn/css/css_margin_collapsing.asp 本文:CSS学习之外边距合并… Read More

深入理解CSS权重(优先级)

对于上一篇:你应该知道的一些事情——CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解。最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的权重计算公式,有好奇者问了一个ClASS选 择器组合与ID选择器优先级问题,如果按公式套下来,CLASS组合后是应该高于ID的,但结果实验并非如此,好奇之下,又在晚上找了找,总结如下。 顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。 网上教程权重计算 关于CSS权重,网上教程大都按不同选择器给了权重值: STYLE:1000 #ID:100 .CLASS 10 ELEMENT 1 这里引入一张流行的CSS权重关系图: 组合比较 256个class选择器可以干掉1个id选择器 这里引自张鑫旭的一片博客。大致内容是说 Firefox等浏览器所有的类名(classes)都是以8字节字符串存储的,8字节所能hold的最大值就是255. 所以你想啊,当同时出现256个class, 势必会越过其边缘,溢出到id区域。 Opera浏览器class类名的存储是以16字节的字符串。因此,该浏览器要想发生class溢出到id的话,需要连续65536个class。 并且实际做了一个例子来进行比较,代码如下(原文请点击这里): css:… Read More

你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know,以及作者相关信息 作者:Vitaly Friedman 译者:99 除了浮动之 外,css权重问题是你要了解的,最复杂的一个概念之一。css每条规则权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。为了 减少调试bug的时间,你需要了解浏览器是怎样解析你的代码的。为了完成这个目标,你需要对权重是如何工作的,有一个清楚的认识。很多Css出现问题的场 景,都是某处定义了一个更高权重的规则,导致此处规则不生效。 Css权重问题并不简单,而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题,我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题,包括例子,规则,原理,通用解决方案以及一些资源。 CSS权重:概述 权重决定了哪一条规则会被浏览器应用在元素上。 权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。 权重的级别划分时包含了所有的css选择器 如果两个选择器作用在同一元素上,则权重高者生效。 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。 你可以通过CSS权重之争进一步了解CSS权重。 你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。 如果两个选择器权重值相同,则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大,会取代前面的CSS规则) 如果两个选择器权重值不同,则权重大的规则被计算到权重中 如果一条规则包含了更高权重的选择器,那么这个规则权重更高 最后定义的规则会覆盖所有跟前面冲突的规则 内联样式表含有比别的规则更高的权重 Id选择器的权重比属性选择器更高 你可以使用id来增大权重 类选择器比任意数量的元素选择器都高 通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算 你可以用css权重计算器来计算权重。… Read More