前端必须要掌握的几个CSS3的属性 - 丶小卒(2)_H5之家

有点奇怪，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的 normal属性。现在正常了。知道吗？您还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。

8. Flexible Box Model

Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性，但一旦你这么做了，将终身受益。做个演示，创建简单的两列布局。

<div> <div> Main content here </div> <aside> Aside content here </aside> </div>

首先我们要设定一个容器，然后指定它的宽和高，即便是没有实质性的内容在里面。

#container { width: 960px; height: 500px; /* just for demo */ background: #e3e3e3; margin: auto; display: -moz-box; display: -webkit-box; display: box;
}

接下来分别定义#main和aside的背景色

#main {

background: yellow; } aside { background: red; }

到目前为了还没有看出什么效果来。

Flexible Box Model

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。看看有什么效果产生，当我们设置了#main的宽度后。 #main { background: yellow; width: 800px; }

Flexible Box Model

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。

aside { display: block; /* cause is HTML5 element */ background: red; /* take up all available space */ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; }

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一行。

Flexible Box Model

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且提供必要的备注。

9. Resize

只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分，可用于重定义textarea的大小。

默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。

textarea { -moz-resize: vertical; -webkit-resize: vertical; resize: vertical; }

可能的值：

none：不支持重定义

10、 Transition

也许CSS3最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。好像IE9还不支持此功能，但这并不代表你不能使用这个功能，关键是在于提高技能。现在模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。

The HTML

<ul> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> </ul>

The CSS

ul a { -webkit-transition: padding .4s; -moz-transition: padding .4s; -o-transition: padding .4s; transition: padding .4s; } a:hover { padding-left: 6px; }

transition 有三个参数：

为什么我们不将transition直接应用到hover上呢？是因为我们只是在mouseover时生效，当mouseout时元素将立即返回到其最初的状态。因为我们对效果做了调整，所有对旧的浏览器不会产生任何影响。接下来是通过文章所学，我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。具体如何创建我就不翻译了。