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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

3037
来自专栏用户2442861的专栏

display:inline、block、inline-block的区别

http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

1001
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

3437
来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

2079
来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

3146
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

4579
来自专栏极客慕白的成长之路

JavaScript实现计算器方法拓展

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

2441
来自专栏互联网软件技术

添加标签——无给定标签选项

1283
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1243
来自专栏前端儿

CSS- 文本超出指定宽度后隐藏并显示为省略号

  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   

1052

扫码关注云+社区

领取腾讯云代金券