月度归档:2013年11月

CSS 3新属性之resize详解

为了增强用户体验,CSS 3增加了很多新的属性,其中一个重要的属性就是resize,它允许用户通过拖动的方式来修改元素的尺寸。

样例代码:

.box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    resize: both;
    overflow: auto;
}

样例图片:

css3 resize

css3 resize

注意的是,如果没有设置overflow,resize不会生效,只要设置了overflow,无论设置的是auto还是hidden,resize都会生效。

CSS 3盒布局之指定水平方向与垂直方向的对齐方式

使用盒布局的时候,可以使用box-pack属性一级box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式,使用这两个属性可以很容易的将文字、图像或子元素放置在元素内的各个部位中。

使用box-pack属性时,火狐中需要需要书写成“-moz-box-pack”,在Safari浏览器或Chrome浏览器中需要书写成“-webkit-box-pack”的形式;

使用box-align属性时,火狐中需要书写成“-moz-box-align”,在Safari浏览器或者Chrome浏览器中需要书写成“-webkit-box-align”的形式。

首先元素需要设置成盒布局:display: box;

box-pack属性及box-align属性指定的属性值和各种属性值的含义如下表所示:

属性值 排列方向 box-pack属性值的含义 box-align属性值的含义
start horizontal 左对齐,文字、图像或子元素被放置在元素最左边 顶部对齐,文字、图像或子元素被放置在元素最顶部
center horizontal 中对其,文字、图像或子元素被放置在元素中部 中部对齐,文字、图像或子元素被放置在元素中部
end horizontal 右对齐,文字、图像或子元素被放置在元素最右边 底部对齐,文字、图像或子元素被放置在元素最底部
start vertical 顶部对齐,文字、图像或子元素被放置在元素最顶部 左对齐,文字、图像或子元素被放置在元素最左边
center vertical 中部对齐,文字、图像或子元素被放置在元素中部 中对其,文字、图像或子元素被放置在元素中部
end vertical 底部对齐,文字、图像或子元素被放置在元素最底部 右对齐,文字、图像或子元素被放置在元素最右边

 

举一个把文字放在盒子最右下角的例子:

样例代码:

.box {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: end;
}

样例图片: 

css3 盒布局

CSS 3属性之盒布局box

本文讲解一下css3的盒布局如何使用。

在过去想做一个3列布局基本都是用float来实现,如下所示:

示例代码:

<style>
 .box {
     width: 600px;
     height: 300px;
     border: 1px solid #000;
 }
 .box1 {
     background-color: orange;
 }
 .box2 {
     background-color: yellow;
 }
 .box3 {
     background-color: limegreen;
 }
 .box1, .box2, .box3 {
     float: left;
 }
 </style>
<div class="box">
   <div class="box1">
      这里是第一区域<br>
   </div>
   <div class="box2">
      这里是第二区域<br>
      这里是第二区域
   </div>
   <div class="box3">
      这里是第三区域<br>
      这里是第三区域<br>
      这里是第三区域
   </div>
</div>

示例图片:

css3盒布局

虽然实现了三列布局,但是想实现3列高度动态相同就要废点小劲了,如果改用css3盒布局的话,这个问题将很容易得到解决。

1.使用盒布局

样例代码:

<style>
 .box {
     width: 600px;
     height: 300px;
     border: 1px solid #000;
     display: box;  /* 目前使用时需要加上-webkit-、-mox-,display: -webkit-box */
 }
 .box1 {
     background-color: orange;
 }
 .box2 {
     background-color: yellow;
 }
 .box3 {
     background-color: limegreen;
 }
 .box1, .box2, .box3 {
     /*float: left;*/
 }
 </style>

样例图片:

css3 盒布局

 

可见使用css3盒布局制作自适应等高三列布局非常简单方便。

2.改变元素的显示顺序使用

使用盒布局的时候,可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素的样式中加上box-ordinal-group属性,该属性使用一个表示序号的整数属性值,浏览器现实的时候根据该序号从小到大来显示这些元素。使用Firefox时需要将其书写成“-moz-box-ordinal-group”的形式;如果使用Safari浏览器或Chrome浏览器,需要书写成“-webkit-box-ordinal-group” 的形式

样例代码:

<style>
.box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: box;
    display: -webkit-box;
}
.box1 {
    background-color: orange;
    -webkit-box-ordinal-group: 2;
}
.box2 {
    background-color: yellow;
    -webkit-box-ordinal-group: 3;
}
.box3 {
    background-color: limegreen;
    -webkit-box-ordinal-group: 1;
}
</style>

样例图片:

css3 盒布局

3.改变元素的排列方向

使用弹性盒布局的时候,我们可以很简单的将多个元素的排列方向从水平修改为垂直方向,或者从垂直方向修改为水平方向。

在css3中,使用box-orient来指定多个元素的排列方向。如果使用Firefox浏览器,写成”-moz-box-orient”,如果使用Safari或者Chrome浏览器,写成“-webkit-box-orient”的形式;

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: box;
    display: -webkit-box;
    -webkit-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
 }
 .box3 {
    background-color: limegreen;
 }
 </style>

样例图片:

css 3 盒布局

通过观察以上测试用例,都有一个共同的特点就是每个盒子中都留有一块空白,可以通过box-flex来解决这个问题,我们给box2设置-webkit-box-flex:1;

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
    -webkit-box-flex: 1;
 }
 .box3 {
    background-color: limegreen;
 }
 </style>

样例图片:

css3 盒布局 box-flex

 

如图所示,之前剩余的空白区域都填充在设置了box-flex:1的第二区域了,这样就实现了高度上动态自适应了,下一步我们同时给第三区域也设置上box-flex:1看看会是怎样的效果

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
    -webkit-box-flex: 1;
 }
 .box3 {
    background-color: limegreen;
    -webkit-box-flex: 1;
 }
 </style>

样例图片:

css 3 盒布局 box-flex

 

可以看到第二区域和第三区域共同分担了空白区域,因为它们设置的box-flex都等于1,所以它们平分了空白区域的面积。

这里解释一下box-flex的工作原理,box-flex是用来占据盒子中空白区域的,假设一共有3个子元素分别设置了box-flex:1、box-flex:2、box-flex:3,那么它们所占有的空白区域的面积分别是1/(1+2+3)、2/(1+2+3)、3/(1+2+3),很多情况下很多人会误解box-flex,认为它在计算面积时是按照盒子总面积计算的,所以就会直接认为子元素会按照box-flex的比例来分割盒子的总面积,实际上并不是这样的,现在我们给第一区域、第二区域、第三区域分别设置box-flex等于1,请看下图:

css 3盒布局 box-flex

很明显三个区域的高度并不相同,但是仔细看可以发现3个区域的空白区域的高度都是相同的,原因就是区域总高度不同因为每个区域中内容各自占了不同的高度,空白区域高度相同的原因是它们的box-flex都等于1,所以它们平分了原本应该存在的空白区域。

总之关于box-flex的问题记住一句话就行:它们按照比例分割的是空白区域的面积,而不是盒子的总面积!

 

 

CSS3属性之多栏布局column

本文将针对CSS 3中的多栏布局做详细介绍,使用多栏布局时只能为所有栏指定一个统一的高度,栏与栏之间的宽度不可能是不一样的,另外也不可能具体指定什么栏中显示什么内容,因此比较适合使用在显示文章内容的时候,不适合用于安排整个网页中由各元素组成的网页结构时。

1.首先我们先定义个div盒子

<style>
.box {
    width: 600px;
    background-color: #ddd;
}
</style>
<div class="box">我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进!。。</div>

样例图片:

QQ20131120112656

2.使用多栏布局第一个属性:column-count

column-count属性为一个数字表示列数,不带单位,含义是将一个元素中的内容分为多栏进行显示。

样例代码:

<style>
.box {
    width: 600px;
    backgrond-color: #ddd;
    column-count: 2;
}
</style>

样例图片:

css3 之 column

 

3.使用多栏布局的第二个属性:column-gap

使用column-gap属性来设定多栏之间的间隔距离。

样例代码:

<style>
.box {
    width: 600px;
    backgrond-color: #ddd;
    column-count: 2;
    column-gap: 60px;
}
</style>

样例图片:

QQ20131120113957

 

4.使用多栏布局第3个属性:column-rule

column-rule属性在栏与栏之间增加一条间隔线,并且设定该间隔线的宽度、样式、颜色,该属性的指定方法与css中的border属性指定方法相同。

样例代码:

<style>
.box {
    width: 600px;
    backgrond-color: #ddd;
    column-count: 2;
    column-gap: 60px;
    column-rule: 5px dashed #000;
}
</style>

样例图片:

QQ20131120114358

 

5.使用多栏布局最后一个属性:column-width

column-width可以设置每一栏的宽度,但是在实际测试中发现并不像描述的那么简单,遂列举出以下几个问题

  1. 在设定column-width的同时必须设置盒子的width,否则盒子宽度默认为100%,每栏宽度按照栏数平均分。
  2. 盒子每栏宽度必须大于等于column-width设定的值,否则就会减少栏数来增加每栏宽度,例如盒子宽度400px,一共2栏,那么每栏宽度就是200px,如果设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210px;,但是如果每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width,这么看column-width的个性有点像min-width。

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

CSS3中的动画功能之transtions和animations详解

CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。

一.Transitions

语法:transition: property duration timing-function

  • property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)

样例代码:

transition: background-color 1s linear;

可同时设置多个属性值:

样例代码:

transition: background-color 1s linear, color 1s linear, width 1s linear;

可同时设置所有属性值:

样例代码:

transition: all 1s linear;

二 .Animations

语法:animation: name duration timing-function iteration-count;

  • name: 关键帧集合名(通过此名创建关键帧的集合,见下面样例代码)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
  • iteration-count: 迭代循环次数,可设置为具体数值,或者设置为infinite进行无限循环,默认为1

样例代码:

.box {
    background-color: red;
    -webkit-animation: mycolor 4s linear infinite;
 }
 @-webkit-keyframes mycolor {
     0% {
        background-color: red;
     }
     40% {
         background-color: darkblue;
     }
     70% {
        background-color: yellow;
     }
     100% {
        background-color: green;
     }
 }

 三.实现动画的方法

  • linear                      在动画开始时到结束时以同样的速度进行改变
  • ease-in                   动画开始时速度很慢,然后速度沿曲线值加速
  • ease-out                 动画开始时速度很快,然后速度沿曲线值减速
  • ease                        动画开始速度很慢,然后速度沿曲线值加速,然后再沿曲线值减速
  • ease-in-out            同ease

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。

一.旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

二.缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

  • 一个参数时:表示水平和垂直同时缩放该倍率
  • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

  • 一个参数时:表示水平方向的倾斜角度;
  • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

skewX(30deg) 如下图:

transform之skew 详解

 

skewY(10deg) 如下图:

transform详解之skewY

 

skew(30deg, 10deg) 如下图:

transform详解之skew

 

我当初就是看到此图瞬间理解的。

四.移动 translate

用法:transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离,单位px,

  • 一个参数时:表示水平方向的移动距离;
  • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。

用法:transform-origin: 10px 10px;

共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;

两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

CSS3属性border-image详解(边框图片)

border-image一共有4项参数,本文将对这4项参数依次讲解及举例说明,为了方便理解,先介绍最常用的使用方式。

语法:border-image: url(bbs0101.png) A B C D;  第一个参数url就是背景图片路径,不做过多解释,其次4个参数ABCD表示4个像素值,不需要带单位,默认为px,同时也可以设置为百分比,百分比是针对背景图片计算的,比如图片宽100px,A=20%=100px*20%=20px,依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离,如图所示:

border-image详解

border-image详解

当设置好ABCD四个值之后,相当于按照这4个值对图片切了4刀,形成一个九宫格,此时我们需要按照以下两步分析border-image的工作原理:

  1. 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上,同时按照盒子border四个角的尺寸进行缩放直至铺满
  2. 然后分离出每条边中间的区域即A、B、C、D所在的四个区域,分别放到盒子border的对应4个位置上,同时按照border对应区域的尺寸进行缩放直至铺满

背景图如图所示:此图尺寸为90*90 中间所有小菱形等尺寸。

源背景图片

源背景图片

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30;
 }
<div class="box5"></div>

样例图片:

border-image

border-image

此时可以说此种情况(border-image: url(bbs0101.png) A B C D;)的border-image已经完成渲染工作,不过这里的第二步中采用的是拉伸方式(默认方式:stretch)铺满边框,我们还可以手动设置成repeat以按照平铺方式渲染,如下:

语法:border-image: url(bbs0101.png) A B C D repeat repeat;

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30 repeat repeat;
 }
<div class="box5"></div>

样例图片:

border-image:repeat

border-image:repeat

这段样式中总共写了2个repeat,第一个repeat定义上边(A区域)和下边(C区域)是否进行水平重复,第二个repeat定义左边(D区域)和右边(B区域)是否进行垂直重复,举例如下:

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30 repeat stretch;
 }

样例图片:

border-image

border-image

以上的样例中边框宽度是通过设置border:20;来完成的,这里需要声明一下,如果想使用border-image属性则border必须存在且border-width必须要大于0,但是是不是只能border的尺寸来控制border-image的尺寸呢,我这么问当然就不是了,这里再介绍border-image的最后一个参数W

语法:border-image: url(bbs0101.png) A B C D/W repeat repeat;

W为border-image各边框宽度,设置时需要带上单位px,即使设置了W,也不能设置border-width=0!

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch;
 }

样例图片:从上到下依次为W=10px、W=20px、W=30px

W=10px

W=10px

border-image

W=20px

W=30px

W=30px

以上已经将border-image的所有参数都讲解了一下,以下将对一些特殊情况以及一些小技巧进行一下举例说明:

一.当只设置url一个属性的时候,A=C=图片height,B=D=图片width

样例代码:

.box5 {
 border: 20px;
 width: 60px;
 height: 60px;
 border-image: url(images/border-image.png);
 }

样例图片:

border-image

border-image

二.当只设置一个切割尺寸P的时候,A=B=C=D=P

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30;
 }

样例图片:

border-image

border-image

三.当只设置一个重复方式的时候,表示四条边框重复方式相同

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 repeat;
 }

样例图片:

border-image:repeat

border-image:repeat.

此外针对重复方式还有一个属性就是round,意思是平铺,据说和repeat是有区别的,但是目前没有浏览器体现出round和repeat的区别,所以暂不考虑round属性。

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

一个小小的border-image属性,原本以为几句话可以说清楚,没想到写了满满一页还觉得说的不够详细,以后慢慢完善吧,今天实在是不想写了,如果有一定基础的你想必能看懂吧,O(∩_∩)O哈哈~

 

 

CSS3属性:background-clip详解(设置背景图显示区域)

背景图片默认显示区域包括border、padding、content区域,但是可以改变background-clip值设置显示区域不包括border区域或者只显示content区域。

样例代码:

.box1 {
    background-clip: border-box;  /* 默认 */
 }
 .box2 {
    background-clip: padding-box;
 }
 .box3 {
    background-clip: content-box;
 }

样例图片:

background-clip详解

background-clip详解

此时发现一个问题,设置了background-clip之后只是改变了背景图片显示区域,但是显示区域现实的图片并不是从图片左上角开始绘制的,如果想要让背景图片在显示区域从左上角开始显示则需要配合background-origin属性使用:

样例代码:

.box1 {
    background-clip: border-box;   /* 默认 */
    background-origin: border-box;
 }
 .box2 {
    background-clip: padding-box;
    background-origin: padding-box; /* 默认 */
 }
 .box3 {
    background-clip: content-box;
    background-origin: content-box;
 }

样例图片:

background-clip,background-origin

background-clip,background-origin

CSS3属性:background-origin详解(设置背景图绘制起始点)

在绘制背景图片时,浏览器默认是从padding区域左上角开始绘制,但是可以利用background-origin属性来指定从border左上角开始绘制或者从content区域左上角开始绘制。

样例代码:

.box1 {
    background-origin: border-box;
 }
 .box2 {
    background-origin: padding-box; /* 默认 */
 }
 .box3 {
    background-origin: content-box;
 }

样例图片:

background-origin详解

background-origin详解

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

CSS3盒模型box-sizing属性详解,布局更方便

使用方法:

  • box-sizing: content-box;
  • box-sizing: padding-box;
  • box-sizing: border-box;

属性解析:

当设置为content-box时,盒子的宽度和高度同默认宽度(不包括padding,border);

当设置为padding-box时,盒子的宽度和高度包括padding区域;

当时设置为border-box时,盒子的宽度和高度包括padding和border区域;

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

样例代码:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background-color: #000;
 color: #fff;
 margin: 30px auto;
 padding: 30px;
 border: 30px solid #f60;
 }
 .box-1 {
 -moz-box-sizing: content-box;
 }
 .box-2 {
 -moz-box-sizing: padding-box;
 }
 .box-3 {
 -moz-box-sizing: border-box;
 }
 </style>
</head>
<body>
 <div class="box-1">content-box</div>
 <div class="box-2">padding-box</div>
 <div class="box-3">border-box</div>
</body>
</html>

样例图片:(ff下测试)

box-sizing属性

 

QQ1

QQ2

QQ3