前端开发人员必须熟悉的10个CSS3属性

前端开发需要的书籍 前端软件开发文档编写 前端哪个开发软件好用

  1. background-size
    目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

    上面的代码使得背景图像已经占据了整个可用空间。但是,如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽,那又怎么做?

body, html { height: 100%; }
body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}

    对,就是这么做,分别定义background-size的x,y参数。 最新版本的Chrome 和 Safari支持此属性,但我们还是要用旧的方法支持旧的浏览器。

body {
background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

  1. text-overflow
    浏览器最初开发文本溢出属性可以设定两个值:clip ellipsis 此属性支持切断容器中的文本,而且也给出了一个省略号的特性。

.box {
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}

或许你会考虑当鼠标经过时显示全部的文本内容。

box:hover {

white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}

    有点奇怪,这看起来并不像是重置text-overflow属性或是停用它,使之生效,在on:hover中我们可以使得white-space的 normal属性。现在正常了。 知道吗?您还可以指定自己的字符串,应使用省略号的位置。这样做来修饰要显示的文本字符串。
  1. Flexible Box Model
    Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性,但一旦你这么做了,将终身受益。 做个演示,创建简单的两列布局。

<div id=”container”>
<div id=”main”> 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;}
到目前为了还没有看出什么效果来。

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

main {

background: yellow;
width: 800px;
}

    但是我们仍有个疑问,为什么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等产生的问题,像使得元素被排挤到下一行。

    我只是在这儿肤浅的说一下,请参阅保罗爱尔兰优秀文章的详细信息。然而,使用此方法的时候也应注意一下兼容问题,例如老的浏览器应该先测试下,并且 提供必要的备注。
  1. Resize
    只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分,可用于重定义textarea的大小。
    <textarea name=”elem” id=”elem” rows=”5″ cols=”50″></textarea>
    默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。
    textarea {
    -moz-resize: vertical;
    -webkit-resize: vertical;
    resize: vertical;
    }

可能的值:
both: 重定义水平和垂直方向
horizontal: 水平调整大小限制
vertical: 垂直调整大小限制
none: 不支持重定义

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

The html
<ul>
<li>
<a href=”#” target=”_blank”> Hover Over Me </a>
</li>
<li>
<a href=”#” target=”_blank”> Hover Over Me </a>
</li>
<li>
<a href=”#” target=”_blank”> Hover Over Me </a>
</li>
<li>
<a href=”#” target=”_blank”> 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 有三个参数:
The property to transition. (Set this value to all if needed) 转换属性。(设置此值为所有如有需要)
The duration 持续时间
The easing type 缓动类型
为什么我们不将transition直接应用到hover上呢?是因为我们只是在mouseover时生效,当mouseout时元素将立即返回到 其最初的状态。 因为我们对效果做了调整,所有对旧的浏览器不会产生任何影响。 接下来是通过文章所学,我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。

前端开发面试常见问题 前端开发需要几个浏览器 软件前端开发思维导图

» 本文来自:前端开发者 » 《前端开发人员必须熟悉的10个CSS3属性》
» 本文链接地址:https://www.rokub.com/5342.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!