弹性盒模型

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>

相关阅读:
基于KNN的newsgroup 18828文本分类器的Python实现
 基于Bayes和KNN的newsgroup 18828文本分类器的Python实现
 C++笔试题
 一号店笔试题
 最长递增子序列
 雅虎2015校招--研究工程师
 百度2013校园招聘笔试题（答案整理） – 机器学习/数据挖掘工程师
 windows下Python shell代码自动补全
 windows下scrapy安装
 实验四
原文地址：https://www.cnblogs.com/wxydigua/p/3678793.html

热门文章
HDU 1996
HDU 1995
HDU 2077
HDU 2064
HDU 1207
腾讯面试题
 Josephus2
Josephus
Caesar
1.6jdk + eclipse + pydev搭建Python开发环境