css3弹性盒子模型之box-flex

box-flex为何方神圣?它是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
HTML代码:

<article>
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码:

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
}
.sectionOne{
	background:orange;
	-moz-box-flex:3;
	-webkit-box-flex:3;
	box-flex:3;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
	background:green;	
}

展示效果

说明:
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center);
分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1,也就是说这三个子容器将父容器wrap的宽度600px分为6份,sectionOne占居父结构宽度的3/6即300px,sectionOne占居父结构宽度的2/6即200px,sectionThree占居父结构宽度的1/6即100px。

以上是按比例数进行划分分配的,如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那?
如果其中一个子容器或多个子容器设置了固定宽度,其它子容器没有设置,其计算方式是这样的:子容器如果设置了固定宽度值,该子容器则直接应用设置的宽度值,其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度,在剩下的宽度基础上按一定比例进行划分分配。请看下面代码

HTML代码

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代码

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
}
.sectionOne{
	background:orange;
	-moz-box-flex:3;
	-webkit-box-flex:3;
	box-flex:3;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionThree{
	width:200px;//设置固定宽度
	background:green;	
}

展示效果

说明:
sectionThree设置了固定宽度为200px,父容器的宽度600px减去改子容器的200px还剩下400px,这400px宽度值则按box-flex设置的值进行划分,sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那?接着看

CSS代码

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
}
.sectionOne{
	background:orange;
	-moz-box-flex:3;
	-webkit-box-flex:3;
	box-flex:3;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
        margin:0px 50px;//添加margin属性
}
.sectionThree{
	width:200px;
	background:green;	
}

展示效果

说明:
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px,这300px宽度值则按box-flex设置的值进行划分,sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

待续内容
二、box属性
以上将box-flex如何对父容器的宽度进行划分分配讲解完毕,下面在看一下父容器里面的box属性包括哪些。box属性如下所示

box-orient, box-direction, box-align, box-pack, box-lines

二、box属性
上篇文章”css3弹性盒子模型之box-flex“将box-flex如何对父容器的宽度进行划分分配讲解完毕,下面在看一下父容器里面的box属性包括哪些box属性,具体属性如下代码所示:

box-orient | box-direction | box-align | box-pack | box-lines

Continue reading “css3弹性盒子模型之box-flex”

选择器之属性选择器

选择器是css3中一个重要的内容,使用选择器可以将样式与元素直接绑定。这样的话,在样式表中什么样式与什么元素相匹配变得一目了然,修改起来也很方便。

在css3中,增加了如下所示的三个属性选择器,att代表元素属性(attribute单词缩写)、val代表元素属性值(value单词缩写)
[att*=val]
[att^=val]
[att$=val]

案例HTML代码

<!DOCTYPE>
<html>
<head>
<meta charset=utf-8" />
<title>选择器之属性选择器</title>
</head>
<body>
<section id="sectionOne">模块01</section >
<section id="sectionTwo" class="wrap02">模块02</section >
<section id="sectionThree">模块02</section >
</body>
</html>

1、[att*=val]属性选择器的含义是:
如果元素指定的att属性中包含val指定的字符的话,则该元素使用这个样式。
如案例HTML代码,如果用属性选择器让id为sectionTwo的模块02背景为红色,则需要如下定义

section[id*=sectionTwo]{background:red;}

以上效果也可以定义为:

section[id=sectionTwo]{background:red;}

以下定义则3个模块背景色都为红色

section[id*=section]{background:red;}

说明:
以上属性选择器以section元素的id属性来定义的,也可以使用其它属性如:title、class等。
如果val字符里面包含“字符串”与“数字”组合、单纯数字则需要用“\”先转义一下数字

2、[att^=val]属性选择器的含义是:
如果元素指定的att属性中以val指定的字符为开头字符的话,则该元素使用这个样式。
如案例HTML代码,如果让3个section的背景色都设置为红色,则需要如下定义:

section[id^=section]{background:red;}

虽然以上代码实现的效果与下面代码实现的效果相同,但要正确理解“*”与“^”两者的区别。

section[id*=section]{background:red;}

3、[att$=val]属性选择器的含义是:
如果元素指定的att属性中以val指定的字符为结尾字符的话,则该元素使用这个样式。
如下代码则是定义sectionOne与sectionThree两个模块的背景色为红色

section[id$=e]{background:red;}

说明:
如果结束字符为纯数字,则无效;纯字符、字符+数字混合均有效!

伪类元素之美

通过使用:before和:after,你能创作出让人称奇的视觉效果。对页面中的每个元素,你都有两个额外的可以控制的元素,本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间,而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧! Continue reading “伪类元素之美”

css3.0对background的调整与增强

(注:仅对css3对background的调整、增加的属性进行了翻译)
css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

1、多个背景图片
在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、新属性:Background Clip
此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下:
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示,而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示,而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值,类似与background-clip: border;

3、新属性: Background Origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
(1)background-origin:border;
从border边框位置算起
(2)background-origin:padding;
从padding位置算起
(3)background-origin:content;
从content-box内容区域位置算起;

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性:Background  Size
Background Size属性用来重设你的背景图片。有几个属性值:
(1)background-size: contain;
缩小背景图片使其适应标签元素(主要是像素方面的比率)
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小,来缩放图片的尺寸大小

你可以去CSS 3 specifications 站点看一下简单的案例说明。

5、新属性:Background Break

css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
属性值:

(1)Background-break: continuous;
此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
space:图片以相同的间距平铺且填充整个标签元素
round:图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。

中文原文:css3.0对background的调整与增强
英文原文:Backgrounds in CSS3
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

各浏览器对CSS3.0属性支持情况列表

支持 CSS3 .0属性的浏览器越来越多,甚至包括测试版本的 IE9,当然,所谓支持仅仅是部分支持,因为 CSS3.0 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 创建你的站点,至少要对各个浏览器对这种新技术的支持情况有一个全面了解。
需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 .0的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 等5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 .0各种功能的详细支持情况清单。
css3.0属性浏览器支持情况
可以看出,全盘支持 CSS3 属性的浏览器有 Chrome和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。
点击查看大图
css3.0pk

css3.0选择器
除了 IE 家族和 Firefox 3,其它几乎全部支持。Chrome,Safari,Firefox 3.6,Opera 10.5 成绩最好 。
点击查看大图
css3.0pk02

两个在线调试css3.0的工具

两个在线调试css3.0的工具,css3 pleasecss3 generator。
css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本 也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!css3please.com网站为我们收集整理了一些css3.0新属性效果在ie下的解决方案!

推荐内容:
6个关注css3的网站
关注css3.0
CSS 3.0 参考手册 (中文版)
1、css3please.com

css3.0
2、css3generator.com
css3.0tool

css3.0新属性介绍!

zenelements.com网站对部分css3.0新属性进行了整理总结,并对相应新属性在各个浏览器的支持情况做了一个图表 ,让我们对于每一个浏览器对css3.0新属性的支持情况一目了然!

从以下列表可以看出,通过升级firfox、Chrome、Safari、Opera浏览器的版本是可以做到支持css3.0属性的,但ie浏览器的升级版本还是无法很好的支持css3.0的新属性!(注:Netscape浏览器不在此列表中)
css3.0.0
CSS3: Introduction
CSS3: Border Image
CSS3: Border Color
CSS3: Border Radius
CSS3: Box Shadow
CSS3: Font Face
CSS3: Gradients
CSS3: HSL & HSLA
CSS3: Multiple Column
CSS3: Multiple Images
CSS3: Opacity
CSS3: RGB & RGBA
CSS3: Text Shadow
CSS3: Transform

5个效果帮你了解css3

css是大家众所周知的,广泛的用来定义网站样式。随着css3版本的发布,css3支持一些省时、省力的一些新属性。尽管目前仅仅最新的浏览器支持这些新属性,但还是感觉不错的。此文章我将介绍5个css3的新属性。(更多css3属性阅读6个关注css3的网站
效果浏览
代码下载

一、基本代码结构
在开始这个教程之前,我们先把基本的代码结构编写好,我将结合这些代码来讲解介绍。
我们需要如下div代码元素
1、#round,讲解css3圆角效果时使用;
2、#indie,讲解个性圆角效果时使用;
3、#opacity,讲解css3实现透明的新方法;
4、#shadow,在不使用photoshop情况下,如何创建投影效果;
5、#resize,介绍一个新的css3属性,调整缩放元素。

XHMTL代码如下:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5. <title>An Introduction to CSS3; A Nettuts Tutorial</title>
  6. <link href=“style.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <div id=“wrapper”>
  10. <div id=“round”> </div>
  11. <div id=“indie”> </div>
  12. <div id=“opacity”> </div>
  13. <div id=“shadow”> </div>
  14. <div id=“resize”>
  15. <img src=“image.jpg” alt=“resizable image” width=“200” height=“200”>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

在html文档里面,我们创建了几个div,同时给相应的div定义了ID。
我们创建基本的css样式。

  1. body    {
  2. background-color: #fff;
  3. }
  4. #wrapper {
  5. width: 100%;
  6. height: 100%;
  7. }
  8. div {
  9. width: 300px;
  10. height: 300px;
  11. margin: 10px;
  12. float: left;
  13. }
  14. /*rest of the code will come here, later*/

正如你看到的,我们给每一个div标签设置了300px的宽和300px的高。同时给它们定义了float:left(左浮动)让它们显示在一排。

二、圆角
css1

创建圆角效果稍微有点麻烦。首先,你先设计这个圆角效果图片,然后,创建多个结构标签,把圆角图片分别定义在相应的结构里面。这个步骤你是了解的。

这个效果用css3的新属性“border-radius”来做就很简单了,我们先创建div标签并定义黑色背景和黑边。这个border是必须的,因为我们通过这个border边来让border-radius属性生效。

代码如下:

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. }

刷新页面,你就可以看到一个宽高为300px的黑色、正方形的div。现在,我们开始来实现这个圆角的效果。仅仅需要添加2行代码就可以了。

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. -moz-border-radius: 10px;
  5. -webkit-border-radius: 10px;
  6. }

正如你所看到的,我们添加了2行几乎相同的代码,唯一不同的地方就是”-moz”和”-webkit”。-moz主要是针对firefox浏览器的,-webkit则是Safari(苹果)/Google Chrome(谷歌)浏览器的。
刷新你的页面,在firefox(火狐)和Safari(苹果)浏览器里面是你可以看到平滑的圆角div,而在Chrome(谷歌)浏览器里面稍微会有点锯齿的边。

回到代码里面,修改border-radius的值,可以修复圆角有锯齿的情况。border-radius的值越大圆角越平滑,就像在photoshop里面的那样。据我所知,这个元素没有最大值。

三、个性圆角
css2
制作传统的圆角将花费你大量的时间,庆幸的是,css3可以轻而易举的解决它。

这个属性有点类似于我们前面例子,也是使用css3的border-radius属性,然而,我们要对这个代码做一些小的修改。
代码如下:

  1. #indie {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. -moz-border-radius-topright: 10px;
  5. -moz-border-radius-bottomright: 10px;
  6. -webkit-border-topleft-radius: 10px;
  7. -webkit-border-bottomleft-radius: 10px;
  8. }

我们在代码里面添加了”topright”和”bottomRight”,它涉及到div元素的右上圆角和右下圆角。使用这些代码你可以轻易的实现标签似的效果

四、css3的新属性改变透明度
css3
目前,你实现透明的效果,需要添加很多行代码来修复元素透明度。现在好了,css3简化了这个过程,可以轻易的实现。
这行代码很容易记住,仅仅opacity: value;这么一段代码。是不是很好记?
代码如下:

  1. #opacity {
  2. background-color: #000;
  3. opacity: 0.3;
  4. }

五、投影
css4
在photoshop里面给图片添加投影效果是毫无意义的,因为当我们把它应用到网页里的时候,我们先将投影保存为一个图片,然后把它设为背景来模拟投影的效果。现在就不用这么做了(对于现在最新的浏览器来说)不幸的是,还有一些老的浏览器无法支持此属性。
仅仅一行代码,同时设置了4个不同的属性值。

  1. -webkit-box-shadow: 3px 5px 10px #ccc;

第一个值我设置了3px,它主要是设置标签和投影之间的水平距离;第二个值设置了5px,它主要设置标签于投影之间的垂直距离。
另一个值我设置了10px,它是投影半径,正确的解释就是投影的模糊程度或是渐变的程度。
最后一个颜色值是设置倒影的颜色,这意味着阴影不仅限于灰色阴影了,我们还可以使用红色,做成红色投影从而让投影更漂亮。
最终代码如下

  1. #shadow {
  2. background-color: #fff;
  3. border: 1px solid #000;
  4. -webkit-box-shadow: 3px 5px 10px #ccc;
  5. }

正如你所看的,我给div定义了白色背景、黑边和灰色的投影。

六、缩放
css5
最新的css版本,它可以调整元素标签的大小。
使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单,可以说仅需要一行代码,当然你还可以配合使 用一些曾经使用过的属性,比如”max-width”, “max-height”, “min-width”和 “min-height”.

  1. #resize {
  2. background-color: #fff;
  3. border: 1px solid #000;
  4. resize: both;
  5. overflow: auto;
  6. }

代码里面我添加了两行css,”resize: both;” 和 “overflow: auto;”overflow这行是必须的,overflow有几个属性值,这里的overflow属性值应设置为auto。
另外一行我添加了”resize: both;”,它声明元素的水平、垂直方向是可以被缩放的。

中文原文:5个效果帮你了解css3
英文原文:5 Techniques to Acquaint You With CSS 3
转载请注明来源,以表示对作者和译者的尊重,多谢!

6个关注css3的网站

目前还有一部分浏览器暂时无法支持css3的新属性,同时有的css3新属性标准各个开发商也在协调中。但随着浏览器的改进,相信以后的浏览器会更好的支持css3属性,这只是时间的问题。既然css3时代就要到来,那我们就提前准备一下呗。一下收集分享了6个关注css3的网站资源供大家学习交流。css3.0参考手册中文版权
1、Get Started with CSS 3网站主要讲解了css3支持的新属性,比如:圆角、投影、边渐变等等。
webmonkey
2、css3.info网站详细讲解了用图片定义边框的属性。
css3
3、javascriptkit.com网站具体列举了css3新添加、支持的一些属性。
javascriptkit
4、westciv.com网站对支持css3和不支持css3属性的浏览器进行了总结并给列举出了一个表单!
westciv
5、flepstudio.org网站详细讲解了页面元素添加投影的css3属性。
flepstudio.org
6、zenelements.com网站介绍了如何利用css新属性创建多列的文字排版。
zenelements