1、注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box
Box-orient 定义盒模型的布局方向
Horizontal 水平显示
vertical 垂直方向
box-direction 元素排列顺序
Normal 正序
Reverse 反序
box-ordinal-group 设置元素的具体位置
<style> .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; /* -webkit-box-direction:Reverse;*/ font-size:20px;color:#fff; } .box div{width:100px;height:100px;background:red;border:1px solid #fff;} .box div:nth-of-type(1){-webkit-box-ordinal-group:2;} .box div:nth-of-type(2){-webkit-box-ordinal-group:4;} .box div:nth-of-type(3){-webkit-box-ordinal-group:1;} .box div:nth-of-type(4){-webkit-box-ordinal-group:5;} .box div:nth-of-type(5){-webkit-box-ordinal-group:3;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
2、Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack: 对盒子富裕的空间进行管理
Start 所有子元素在盒子左侧显示，富裕空间在右侧
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
eg、
<style> .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; } .box div{height:100px;background:red;border:1px solid #fff;} .box div:nth-of-type(1){width:300px;} .box div:nth-of-type(2){-webkit-box-flex:2;} .box div:nth-of-type(3){-webkit-box-flex:3;} .box div:nth-of-type(4){-webkit-box-flex:4;} .box div:nth-of-type(5){-webkit-box-flex:5;} /* 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 */ </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
<style> .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:Justify;/* -webkit-box-pack:start; */ } .box div{width:100px;height:100px;background:red;border:1px solid #fff;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body>
3、box-align 在垂直方向上对元素的位置进行管理
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
eg：
<style> html{height:100%;} body{height:100%;margin:0;} .box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;} .box div{width:100px;height:100px;background:red;border:1px solid #fff;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body>
4、盒模型阴影
用法：
•box-shadow:[inset] x y blur [spread] color
•参数：
inset：投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影
color
eg：
<style> .box{width:100px;height:100px;margin:100px;background:Red; box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;} </style> </head> <body> <div class="box"></div> </body>
5、倒影：
box-reflect
direction 方向 above|below|left|right;
距离
渐变（可选）
resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
<style> body{ background:#000;} img{display:block;margin:200px auto;-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);} </style> </head> <body> <img src="miaov.jpg" /> </body>
resize用法：
<style> .box{width:100px;height:100px;background:url(miaov.jpg);border:5px solid #000; resize:both; overflow:auto;/*一定要配合overflow：auto;使用*/} </style> </head> <body> <div class="box"></div> </body>
6、渐变
<style> .box{width:300px;height:300px;background:-webkit-linear-gradient(red 0,blue 100%);} </style> </head> <body> <div class="box"></div> </body>
7、box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
eg：
<style> .box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box; /* box-sizing:content-box; 标准盒模型 */} .div{height:50px;background:red;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body>
8、Css3分栏布局
column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
eg：
<style> .wrap{width:900px;border:1px solid #000;margin:0 auto; -webkit-column-count:2; -webkit-column-gap:100px;-webkit-column-rule:1px solid #000;} .wrap p{font:14px/28px "宋体"; text-indent:2em;} </style> </head> <body> <div class="wrap"> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> </div> </body>
9、Css3响应式布局
媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
eg：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="index3.css" media="screen and (min-800px)"> <link rel="stylesheet" type="text/css" href="index2.css" media="screen and (min-600px) and (max- 800px)"> <link rel="stylesheet" type="text/css" href="index1.css" media="screen and (max-600px)"> </head> <body> <div class="wrap"> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> </div> </body> </html>
10、媒体特性：横竖屏
(max-600px)
(max-device- 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
eg：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link rel="stylesheet" media="all and (orientation:portrait)" href="index1.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="index3.css"> <script> alert(window.devicePixelRatio); </script> </head> <body> <div class="wrap"> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .wrap{width:100px;height:100px;background:Red;} @media screen and (min-800px){ .wrap{background:blue;} } @media screen and (max-800px) and (min-600px){ .wrap{background:yellow;} } @media screen and (max-600px){ .wrap{background:green;} } </style> </head> <body> <div class="wrap"> </div> </body> </html>
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”> @media screen and (min-400px) and (max-500px) {.box {margin: 0 auto;}}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> @import url("index1.css") screen and (max-600px); @import url("index2.css") screen and (min-600px) and (max-800px); @import url("index3.css") screen and (min-800px); </style> </head> <body> <div class="wrap"> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> <p>如题，《javascript高级程序设计》上说with语句会创建作用域，而汤姆大叔在博客里面说js中只有函数会创建作用域，我做了以下测试： 得出结果分别是：23和wangmeijian，假如with会创建作用域的话，结果应该是undef ...</p> </div> </body> </html>