我们经常可以看到固定宽度的布局.例如960px的页面在笔记本上可能显示刚刚好,但是在高分辨率的显示器上两侧就会出现留白,可是我们现在有了智能手机.手机浏览器会将一个标准页面缩放到与视口(即:设备可视区域)恰好匹配.然后用户可以选择在自己感兴趣的内容上放大浏览,这样就导致了用户体验非常糟糕!(想象一下不停的点击放大滑动然后缩小,更可恶的是如果误点击了一个链接).响应式web设计的核心是移动优先.（有兴趣的亲，可以前往看看web前端教程
http://www.************/course/web/）
在使用CSS3属性的时候需要注意浏览器前缀,并且将不带有前缀的添加到最后,这样如果该属性可用就会覆盖之前的声明.
百分比宽度的计算
百分比宽度 = 目标元素宽度 / 上下文元素宽度,例如我们有以下的固定宽度的布局:
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
</ul>
</nav>
</header>
<aside>
<p>this is aside</p>
</aside>
<article>
<p>this is content</p>
</article>
<footer>
<p>this is footer</p>
</footer>
</div>
<style>
wrapper{
margin-left: auto;
margin-right: auto;
width: 960px;
}
nav{
width: 940px;
margin: 26px 0 0 -10px;
padding: 25px 10px 0 10px;
}
nav ul li{
display: inline-block;
}
aside{
border: none;
border-right: #e8e8e8 solid 2px;
margin: 58px 10px 0 10px;
padding-right: 10px;
float: left;
width: 220px;
}
article{
margin: 58px 10px 0 0;
float: right;
width: 698px;
}
footer{
float: left;
margin: 20px 10px 0 10px;
clear: both;
width: 940px;
}
</style>
根据经验,我们将最外层的#wrapper的宽度设置为96%,那么nav的宽度应该设置多少?我们用940/960 = 97.91666666666666%,所谓的上下文元素就是被参照的元素,我们也可以简单理解为具有特定宽度的父元素或者祖宗元素.
使用em替代像素
几年前,使用em替代px主要是为了实现文字缩放.em的实际大小是相对于上下文字体而言的.如果给body的font-size设置为100%,其他文字单位都使用相对单位em,那些文字都将受到body上初始声明的影响.现代浏览器中默认文字大小是16px,因此在body中声明以下的3条css等效:
body{
font-size: 100%;
font-size: 16px;
font-size: 1em;
}
弹性图片
在IE7+实现图片随流式布局自动缩放非常简单:
img{
max-width: 100%;
}
同理,该css属性还可以拓展到<object>,<video>,<embed>等其他多媒体元素
CSS3实用技巧
类似报纸排版的多栏布局column-count
文字换行word-wrap:break-word,需要给外层容器添加此属性,中间内容将自动换行(不会生成水平滚动条)
水平导航的最佳实践:
<nav>
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
<li><a href="">link 5</a></li>
</ul>
</nav>
<style>
nav{
display: table;
}
nav ul{
display: table-row;
}
nav ul li{
display: table-cell;
}
nav ul li:first-child{
text-align: left;
}
nav ul li:last-child{
text-align: right;
}
</style>
首字下沉效果.得益于伪元素选择器.::first-letter,同理::first-line用于选择首行.
元素的透明度
说道透明度我们一般会想到opacity这个属性.但是给一个容器设置了透明度后,它的内容也就变得透明了,因此我们可以使用透明的背景色:rgba或者hsla
使用CSS3创作绚丽的效果
模拟书籍页边距的光晕效果
使用多重内阴影:
box-shadow:inset 0 0 30px hsl(0,0%,0%),
inset 0 0 70px hsla(0,97%,53%,1);
文字浮雕
text-shadow:0px 1px #fff,
4px 4px 0px #dad7d7;
过渡动画
除了常见的transition:all 1s ease 0s外我们也可以为不同的属性指定不同的过渡(也就是说步调可以任意),例如:
button{
transition-property: border,color,text-shadow;
transition-duration: 2s,3s,8s;
}
以上的效果是2s完成border,3s完成color,8s完成text-shadow.
CSS3针对表单的伪类选择器
input:required,必填表单域
input:focus:invalid,处于焦点并输入了非法值的表单域,同理,有input:focus:valid
使用上面的3个选择器可以制作响应式的表单:
input:required{
border: 1px solid rgba(253, 8, 8, 0.3);
}
input:focus:invalid{
background: url('error.png') no-repeat right;
}
input:focus:valid{
background: url('ok.png') no-repeat right;
}
html5新特性
自动联想词
<div>
<label for="username">用户名</label>
<input type="text" id="username" list="usernames">
<datalist id="usernames">
<select>
<option value="a"></option>
<option value="aa"></option>
<option value="abc"></option>
<option value="bb"></option>
</select>
</datalist>
</div>
以上的代码当我们输入字符的时候会自动从下面的datalist标签中进行筛选.
不支持html的浏览器的渐进增强
<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//加载补丁
$.webshims.polyfill();
</script>
