第三章：盒模型
盒模型很早就提出了，早期由于商业竞争，出现了不同的模式。以IE为代表的被淘汰的盒模型和Mozlia为代表的目前被W3c认可的标准模型。被淘汰并非说明它一点优点就木有，大家可以自己思考其优点。但是就目前来说咱还是看标准模型吧。
1.盒模型基本的要素；
任何标签都是个矩形，它占位的宽度=margin+border+padding+width;高度同理 （标准盒模型）
IE的盒模型略微诡异，它占位的宽度=margin+width 因为 width=border+padding+contentWidth;
css3 提供了解决方法 box-sizing 但是不建议用，尽量回避这个问题
2。 css标签分类；
所有的标签可以分为二大类：块元素和行间元素 。
顾名思义：块元素是一整块，意思就是在默认模式下，独立占全宽。行间元素就是块内的，一个个小的元素。根据页面布局，分别使用这二类元素组合为一个布局合理、功能完善的页面。
行内元素设置宽高不起作用除非设置display:inline-block;
关于定位，文章讲的非常清晰，需反复阅读理解，目前个人理解的那些相对肤浅就不贴出来了！希望在之后的阅读中可以悟出点不一样的东西~
第四章：背景效果
如何使用图片：代码简洁、美化页面同时带来良好的用户体验~
1.基础知识
应用缩写，减少代码的行数。
注意区分 background:url(1.gif) no-repeat 20px 20px; background:url(1.gif) no-repeat 20% 20%;
区别 前者是距离该元素的20px 作为起始点 后者是元素的20% 点处和 背景图的20%处重叠。
2.圆角技术
css3中已经提供了border-radius:的属性来设置圆角，方便快捷，环保无污染。关于使用背景图片来设置圆角的想法，可以参考一下，为解决其他问题的思路！
1.设置三个嵌套，最外层放 中间平铺的的图片 中间的块放置下圆角 最里面的放上圆角。
2. 滑动门技术 四个角分别设置不同的背景图片 可以 解决方法1中，宽度必须固定的限制。
3. 山顶角 这个听起来特别牛气的感觉，不过总体还是使用不同的图片 使不同的区块显示不同的颜色 不适合较大的区块，此处具体原理容我懒癌发作，/(ㄒoㄒ)/~~ 我不想弄，大家自行百度吧。。。。。。
栗子：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闂濡傛涓ュ郴</title>
<style type="text/css">
#wrapper{width:450px;margin:0px auto;}
#box{position:relative;width:300px;height:440px;background:#0099FF;font-size:12px;margin-right:10px;float:left;}
b{display:block;width:0;height:0;overflow:hidden; position:absolute;}
.t1{left:0;top:0;border-top:3px #fff solid;border-right:3px transparent dotted;}/*左上角*/
.t2{right:0;top:0;border-top:3px #fff solid;border-left:3px transparent dotted;}/*右上角*/
.t3{left:0;bottom:0;border-left:3px #fff solid;border-top:3px transparent dotted;}/*左下角*/
.t4{right:0;bottom:0;border-right:3px #fff solid;border-top:3px transparent dotted;}/*右下角*/
.boxstyle{position:relative;width:100px;height:100px;padding:20px;font-size:12px;float:left;margin-bottom:10px;}
#box1{background:#FF3300;}
#box2{background:#99FF33;}
#box3{background:#00CC00;}
</style>
</head>
<body>
<div id="wrapper">
<div id="box">
<b class="t1"></b><b class="t2"></b>
<div>
<h3>asfsafsdafsadfs</h3>
<h4>asdfsaf</h4>
<p>sdaf<a href="http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html">Border属性的终极研究---看我七十二变</a>》</p>
<p>.t1{left:0;top:0;border-top:3px #fff solid;border-right:3px transparent dotted;}/</p>
<p>.t2{right:0;top:0;border-top:3px #fff solid;border-left:3px transparent dotted;}</p>
<p>.t3{left:0;bottom:0;border-left:3px #fff solid;border-top:3px transparent dotted;}</p>
<p>.t4{right:0;bottom:0;border-right:3px #fff solid;border-top:3px transparent dotted;}</p>
</div>
<b class="t3"></b><b class="t4"></b>
</div>
<div id="box1" class="boxstyle">
<b class="t1"></b><b class="t2"></b>
<div>鎷夊睅鐨勫弽棣堟€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ユ€ュ晩<a href="http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html">234242 闃挎柉钂傝姮 safsdafs</a></div>
<b class="t3"></b><b class="t4"></b>
</div>
<div id="box2" class="boxstyle">
<b class="t1"></b><b class="t2"></b>
<div>fjjjjjjjjjjjj jjj sadf asfd 闃挎柉椤垮彂椤轰赴鐨?a href="http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html">Border闃垮＋澶уか鎾掑彂鐢?浣犺鎴栦笉瑙?淇哄氨鍦ㄩ偅閲?涓嶅鍔犱綘涓嶇涓嶅純</a>》</div>
<b class="t3"></b><b class="t4"></b>
</div>
<div id="box3" class="boxstyle">
<b class="t1"></b><b class="t2"></b>
<div>这是一个山顶角而不是圆角框，实理原理请看我的一篇文章《<a href="http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html">Border属性的终极研究---看我七十二变</a>》</div>
<b class="t3"></b><b class="t4"></b>
</div>
</div>
</body>
</html>
3.css3新特性
1.投影
在css3发布之前，许多网站中也有一些投影的效果，这效果的实现对前端人员来说是有点恶心，它需要我们在添加背景图片并设置偏移量。css3直接去设置就好了，喜大普奔 box-shadow: 3px 3px 5px #234 最后一位是颜色，像素依次代表着上 右 下 投影的大小。
2.透明度
css3中的滤镜和rgba都可以设置透明度 alhpa:40;会导致其他元素继承不透明度。rgba(0, 0, .0, 0.9)只会应用到本身
3.多个背景
css3提供多个背景，目前主流的浏览器均支持该属性。
效果可参考 该站点 https://silverbackapp.com/
学习本书第一部分的重点：http://blog.csdn.net/onealcsh126/article/details/51088266
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
