分类: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代码… 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 &… 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

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

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

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学习之外边距合并

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

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

对于上一篇:你应该知道的一些事情——CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解。最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的权重计算公式,有好奇者问了一个ClASS选 择器组合与ID选择器优先级问题,如果按公式套下来,CLASS组合后是应该高于ID的,但结果实验并非如此,好奇之下,又在晚上找了找,总结如下。 顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符… 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规则在元素上生效的主要原因。… Read More