盒布局：
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>三栏网页</title>
6 <style type="text/css">
7 .container{
8 /*开启盒布局 */
9 display: -webkit-box;
10 display: -mox-box;
11 display: box;
12 -webkit-box-orient: horizontal;
13 -moz-box-orient: horizontal;
14 box-orient:horizontal;
15 /* -webkit-box-direction:reverse;
16 -moz-box-direction:reverse;
17 box-direction:reverse;*/
18 }
19 /*盒的总体布局 */
20 .container div{
21 color: #FFFFFF;
22 font-size: 12px;
23 padding: 10px;
24 line-height: 20px;
25 }
26 /*通过设置盒的ul来设置盒子宽度 */
27 .container div ul{
28 margin: 0;
29 padding-left: 20px;
30 }
31 /*左栏*/
32 .container .left-aside{
33 background-color: #40E0D0;
34 /* -webkit-box-ordinal-group: 4;
35 -moz-box-ordinal-group: 4;
36 box-ordinal-group: 4;*/
37 /*弹性边框，自动补齐缺少的 */
38 -webkit-box-flex:5;
39 -moz-box-flex:5;
40 box-flex:5;
41 }
42 /*中间栏*/
43 .container .center-content{
44 background-color: #FF3321;
45 400px;
46 -webkit-box-flex:2;
47 -moz-box-flex:2;
48 box-flex:2;
49 }
50 /*右栏*/
51 .container .right-aside{
52 background-color: #C0C0C0;
53 /*-webkit-box-ordinal-group: 3;
54 -moz-box-ordinal-group: 3;
55 box-ordinal-group: 3;*/
56 -webkit-box-flex:5;
57 -moz-box-flex:5;
58 box-flex:5;
59 }
60 </style>
61 </head>
62 <body>
63 <div class="container">
64 <div class="left-aside">
65 <h2>菜单</h2>
66 <ul>
67 <li>HTML５</li>
68 <li>CSS 3</li>
69 <li>活动沙龙</li>
70 <li>研发小组</li>
71 </ul>
72 </div>
73
74 <div class="center-content">
75 <h2>内容</h2>
76 <p>盒布局是CSS 3发展的新型布局方式，它比传统的浮动布局更加完善、更加灵活、
77 而使用这种方法却极为简单。</p>
78 <p>开启盒布局方法，就是设置display属性值为box（或lnline-box）。</p>
79 </div>
80
81 <div class="right-aside">
82 <h2>工具</h2>
83 <ul>
84 <li>天气预报</li>
85 <li>货币汇率</li>
86 </ul>
87 </div>
88
89 </div>
90 </body>
91 </html>
开启盒布局：display:box
布局方向：box-orient : horizontal | vertical | inline-axis | block-axis | inherit
horizontal：水平方向，从左到右
vertical：垂直方向，从上到下
inline-axis：默认值，表示盒子元素沿着内联轴编排它的子元素，表现为横向编排
block-axis：表示元素沿着块轴编排它的子元素，表现为垂直编排
布局顺序：box-direction：normal | reverse | inherit
normal：默认值，正常顺序，从左到右，从上到下
元素位置：box-ordinal-group: <interger>
<interger>：整数值，从1开始。用于表示元素的显示位置，子元素的默认值是1。
弹性空间：box-flex：<value>
<value>:一个整数或小数，不可为负值，默认值是0.0。它使得盒元素的内部元素的总宽度和总高度，始终等于盒元素的宽度与高度。当然它的前提是盒元素有确定的宽度和高度。
元素的对齐：box-pack和box-align
box-pack：start | end | center | justify
start：子元素都显示在左侧，额外的在右侧
end：子元素都显示在右侧，额外的在左侧
center：子元素居中显示，额外平均分配在两侧
justify：子元素散开显示
box-align：start | end | center | baseline | stretch
start：子元素都显示在顶部，额外的在底部
end：子元素都显示在底部，额外的在顶部
center：子元素垂直居中显示
baseline：子元素沿基线显示
stretch：子元素的高度被拉伸到合适的盒元素的高度
盒子阴影：box-shadow：none | [inset]?[<length>]{2,4}[<color>]?
none：默认值表示没阴影
inset：可选值。设置为内阴影，默认是外阴影
length：可取负值。四个值：水平偏移，垂直偏移，模糊距离，阴影大小
color：可选值。阴影颜色
盒子尺寸的计算方法：box-sizing：centent-box | padding-box | border-box | inherit
centent-box：默认值。计算方法为：width/height=content。表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内
padding-box：计算方法为width/height=content+padding。表示指定的宽度和高度包含内边距和内容区域。边框宽度不包含在内
border-box：计算方法为width/heigth=congtent+padding+border。表示指定的宽度和高度包含内容，边框和内边距。
inherit：继承父类
盒子溢出处理：overflow-x和overflow-y
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>盒子溢出内容处理</title>
6 <style type="text/css">
7 div{
8 margin: 10px;
9 200px;
10 height: 80px;
11 padding: 10px;
12 border: 1px solid #FF9912;
13 float: left;
14 }
15 #box1{
16 overflow-x: scroll;
17 overflow-y: scroll;
18 }
19 #box2{
20 overflow-x: auto;
21 overflow-y: auto;
22 }
23 #box3{
24 overflow-x: hidden;
25 overflow-y: hidden;
26 }
27 #box4{
28 overflow-x: visible;
29 overflow-y: visible;
30 }
31 </style>
32 </head>
33 <body>
34 <!--<p>scroll:</p>-->
35 <div id="box1">盒子模型是网页设计的基本，重中之重。。。
36 盒子模型是网页设计的基本，重中之重
37 盒子模型是网页设计的基本，重中之重
38 盒子模型是网页设计的基本，重中之重</div>
39 <!--<p>auto:</p>-->
40 <div id="box2">盒子模型是网页设计的基本，重中之重。。。
41 盒子模型是网页设计的基本，重中之重
42 盒子模型是网页设计的基本，重中之重
43 盒子模型是网页设计的基本，重中之重</div>
44 <!--<p>hidden:</p>-->
45 <div id="box3">盒子模型是网页设计的基本，重中之重。。。
46 盒子模型是网页设计的基本，重中之重
47 盒子模型是网页设计的基本，重中之重
48 盒子模型是网页设计的基本，重中之重</div>
49 <!--<p>visible:</p>-->
50 <div id="box4">盒子模型是网页设计的基本，重中之重。。。
51 盒子模型是网页设计的基本，重中之重
52 盒子模型是网页设计的基本，重中之重
53 盒子模型是网页设计的基本，重中之重</div>
54 </body>
55 </html>
生成的图片为：
插播一个选择器:
盒子允许用户改变尺寸：resize
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>可调整的div元素</title>
6 <style type="text/css">
7 div{
8 100px;
9 height: 80px;
10 max- 600px;
11 max-height: 400px;
12 padding: 10px;
13 border: 1px solid #40E0D0;
14 resize: both;
15 overflow: auto;
16 }
17 </style>
18 </head>
19 <body>
20 <div>HTML 5很强大，特别强大，很好用，正在逐渐发展起来，有很好的前途，学好它是吸金的好方法啦啦啦啦啦啦啦</div>
21 </body>
22 </html>
resize：none | both | horizontal | vertical | inherit
none：默认值，表示用户不能调整
both:表示用户可以调整元素的宽度和高度
horizontal：表示用户可以调整元素的宽度，不能调整高度
vertical:表示用户可以调整元素的高度，不能调整宽度
inherit：继承父类
外轮廓线：outline
outline-width：thin | medium | thick | <length> | inherit
thin：线条较细
medium：线条中等，默认值
thick：线条较粗
<length>：线条的宽度值，不允许负值
outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
none：没有轮廓线
dotted：轮廓线为点状
dashed：轮廓线为虚线
solid：轮廓线为实线
double：轮廓线为双条线
groove：轮廓为3D凹槽
ridge：轮廓为3D凸槽
inset：轮廓为3D凹边
outset：轮廓为3D凸边
outline-color：<color> | invert | inherit
<color>：颜色值
invert：默认值。执行颜色反转，比保证轮廓在任何背景下都是可见的
outline-offset：<length> | inherit
<length>：表示偏移距离的长度，可以为负值
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>利用外轮廓线绘制表单</title>
6 <style type="text/css">
7 #login {
8 margin: 20px auto;
9 300px;
10 border: 1px solid #f90;
11 line-height: 22px;
12 outline: 2px solid #ccc;
13 background-color: #ffff99;
14 font-size: 18px;
15 }
16 #login h1{
17 font-size: 18px;
18 margin: 0;
19 padding: 5px;
20 border-bottom: 1px solid #fc6;
21 margin-bottom: 10px;
22 }
23 #login label{
24 /*block将显示为块级元素，此元素前后会带有换行符。*/
25 display: block;
26 100px;
27 float: left;
28 text-align: right;
29 /*clear规定元素的那一侧不允许其他浮动元素 */
30 clear: left;
31 margin-top: 15px;
32 }
33 #login input{
34 float: left;
35 150px;
36 margin-top: 15px;
37 line-height: 22px;
38 height: 24px;
39 border: 1px solid #7f9db9;
40 }
41 #login input:focus{
42 outline: 4px solid #fc6;
43 }
44 #login div{
45 clear: both;
46 padding-left: 100px;
47 padding-top: 20px;
48 font-size: 12px;
49 }
50 #login div button{
51 80px;
52 font-size: 14px;
53 line-height: 22px;
54 background-image: -moz-linear-gradient(top,#ffffcc,#ffcc99);
55 background-image: -webkit-gradient(linear,left,top,left bottom,from(#ffffcc),to(#ffcc99));
56 }
57 #login div button:hover{
58 outline: 2px solid #fc6;
59 }
60 </style>
61 </head>
62 <body>
63 <form id="form1" name="form1" method="post" action="">
64 <div id="login">
65 <h1>用户登入界面</h1>
66 <label for="UserName">用户名：</label>
67 <input type="text" name="UserName" id="UserName">
68
69 <label for="Password" >密码：</label>
70 <input type="password" name="Password" id="Password">
71
72 <div><button>登入</button><a href="#">忘记密码？</a> </div>
73 </div>
74 </form>
75 </body>
76 </html>
伪装元素：appenrance
appenrance：normal | icon | window | button | menue | field
normal:正常
icon：图标
window：视窗
button：按钮
menue：菜单
field：输入框
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>伪装的按钮</title>
6 <style type="text/css">
7 a,input{
8 -webkit-appearance: button;
9 -moz-appearance:button;
10 appearance: button;
11 }
12 #nav a{
13 font-size: 12px;
14 padding: 0 10px;
15 line-height: 22px;
16 text-decoration: none;
17 color: #00f;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="nav">
23 <input type="text" name="key" value="关键词">
24 <a href="#">搜素</a><br>
25 热门关键词：<br>
26 <a href="#">CSS 3</a>
27 <a href="#">HTML 5</a>
28 <a href="#">移动开发</a>
29 </div>
30 </body>
31 </html>
说明：这段代码说明了-webkit等的作用，没有他们，根本显示不出来
为元素添加内容：content
contert：none | normal | <string> | counter | attr | url | inherit
none：如果有指定的添加内容，则设置为空
normal：默认值。不做任何改动
<stirng>：指定添加的文本内容
counter：指定一个计数器作为添加内容
attr：把选择的元素的属性值作为添加内容<attribute>为元素的属性值
url：指定一个外部资源作为添加内容，如图像，音频，视频等<url>：为一个网址
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>为元素添加内容</title>
6 <style type="text/css">
7 #nav {
8 margin: 20px auto;
9 200px;
10 border: 1px solid #ff9900;
11 padding: 20px;
12 line-height: 22px;
13 font-size: 18px;
14 }
15 #nav a{
16 display: block;
17 font-size: 12px;
18 line-height: 22px;
19 color: #00f;
20 }
21 /*用[href$=xlsx]来确定为谁添加前缀或后缀 */
22 a[href$=xlsx]:before{
23 content: "网页";
24 }
25 a[href$=docx]:after{
26 content: "哈哈";
27 }
28 a[href$=vsdx]:after{
29 /*可将路径添加 */
30 content: attr(href);
31 }
32 </style>
33 </head>
34 <body>
35 <div id="nav">
36 <a href="文件/1.xlsx">资料</a>
37 <a href="文件/2.vsdx">元素</a>
38 <a href="文件/3.docx">界面</a>
39 </div>
40 </body>
41 </html>