css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。 语法:box-flex:value; 示例:
<style>
.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;
background: #f0f3f9;}
.list {padding: 0 1em; font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}
.list_one { -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: yellow;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background-color: #99CC00;}
.list_three {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: paleturquoise;}
</style>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_three">3</div>
</div>
结果: 图片
可以指定某个子元素的宽度,剩下的部分平分。 示例:
<style>
.test_box {display: -moz-box;display: -webkit-box;display: box;width: 800px;margin: 40px auto;padding: 20px;
background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/200px monaco;
text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: #00CC99;}
.list_two {-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99FF00;}
.list_w300 { width: 300px; background: #CCCCFF}
</style>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_w300">3</div>
</div>
结果: 图片
2.box-orient 用来确定子元素的方向,是横着还是竖着。 可选值:horizontal | vertical | inline-axis | box-axis | inherit inline-axis是默认的 horizonta inline-axis 是一样的让元素横着 vertical box-axis 是一样的让元素纵列。 示例:
<style>
.test_box {width: 300px; margin: 0 auto;display: -moz-box;
display: -webkit-box;display: box;box-orient:horizontal;padding: 20px;background: #f0f3f9;}
.list{padding: 0 1em;font: bold 36px/120px monaco; text-shadow: 1px 1px #eee;-webkit-box-flex: 1;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
</style>
<div class="test_box">
<div class="list one">1</div>
<div class="list two">2</div>
<div class="list three">3</div>
</div>
结果:如图
3.box-direction 用来确定子元素的排列顺序。可选值: onrmal | revers | inherit onrmal是默认值按着正常顺序排列,从左到右 从前到后,revers表示反转。 示例:
<style>
.test_box {display: -moz-box;display: -webkit-box;display: box;-moz-box-direction:reverse;-webkit-box-direction:reverse;
box-direction:reverse;width: 300px;margin: 20px auto;padding: 10px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/150px monaco;text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: yellow;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99CC00;}
.three{background: #CCCCFF}
</style>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_one three">3</div>
</div>
结果: 如图
4.box-align与box-pack 决定盒子内部剩余空间怎么使用,行为效果为对齐方式。 box-align 为垂直方向上的空间利用,box-pack 为水平方向上的空间利用。 box-align 可选参数: start | end | center | baseline | stretch stretch为默认父标签的高度有多高,子元素就有多高。start表示底边对齐 end 为底部对齐,center居中对齐,baseline 基线对齐。 示例:
<style>
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-align:end;
-webkit-box-align:end; -o-box-align:end; box-align:end;
width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
</style>
<div class="test_box">
<div class="list one">1</div>
<div class="list two" style="line-height:200px;">2</div>
<div class="list three">3</div>
</div>
结果:如图
box-pack可选值: start | end | center | justify start为默认值, justify表示两端对齐。 示例:
<style>
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-pack:justify;
-webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify;
width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;
text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
</style>
<div class="test_box">
<div class="list one">1</div>
<div class="list two" style="line-height:200px;">2</div>
<div class="list three">3</div>
</div>
结果:如图
5.box-lines 用来决定子元素是否可以换行显示,有两个可以选的值:single | mutiple single 默认值,不换行。mutiple 换行多行显示。 示例:
<style>
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-lines:multiple;
-webkit-box-lines:multiple;-o-box-lines:multiple;
box-lines:multiple; width: 300px;
height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
</style>
<div class="test_box">
<div class="list one">1</div>
<div class="list two" style="line-height:200px;">2</div>
<div class="list three">3</div>
</div>
结果:如图
6.box-ordinal-group 改变子元素的顺序,值为数字,数字越小越排在前面。 示例:
<style>
.test_box {display: -moz-box;display: -webkit-box;display: box;
width: 300px;margin: 40px auto;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;
-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;background: #99CC00;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;background: #CC33CC;}
.three{ background: #CCCC00}
</style>
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_one three">3</div>
</div>
结果:如图
demo下载https://github.com/ningmengxs/css3.git
- ngx_pagespeed-nginx前端优化模块介绍
- Tomcat利用MSM实现Session共享方案解说
- Tomcat集群环境下session共享方案梳理(1)-通过memcached(MSM)方法实现
- nginx负载均衡(5种方式)、rewrite重写规则及多server反代配置梳理
- python常用知识梳理
- 如何打击“假货、高仿”类小程序
- centos 6x系统下源码安装mysql操作记录
- 【3】利用Word模板生成文档的总结
- 【2】快速代码集的由来及概览
- silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
- Silverlight数据绑定/IValueConverter学习笔记
- silverlight:DeepZoom版的图片局部放大效果
- Linq之ToDictionary<TSource, TKey, TElement>的写法
- vs.net的调试小技巧之#define debug(适合新手)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例