CSS 3中弹性盒布局的最新版


 CSS 3中弹性盒布局的最新版概述   在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。   虽然可以使用其他CSS样...
 CSS 3中弹性盒布局的最新版概述

  在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。

  虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。

  虽然CSS Flexible Box模块已经被公布了好几年,但是自开始公布以来,该模块中所定义的内容已经经过了几次重大修改。目前公布的正式版本为◦CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 September 2012。

  目前为止,Opera 12.10版本以上,IE 11版本以上、Chrome 21版以上、Firefox 22版本以上的浏览器均支持该最新版本。

 从示例页面开始学习最新版本的弹性盒布局

  接下来开始通过一个示例页面开始学习最新版本的弹性盒布局。该示例页面中的body元素中的代码如下所示。

  1. <body>
  2. <div id="main">
  3.     <div class="content">
  4.         <section>
  5.             <h1>section 1</h1>
  6.             <p>示例文字</p>
  7.         </section>
  8.         <section>
  9.             <h1>section 2</h1>
  10.             <p>示例文字</p>
  11.         </section>
  12.         <section>
  13.             <h1>section 3</h1>
  14.             <p>示例文字</p>
  15.         </section>
  16.         <section>
  17.             <h1>section 4</h1>
  18.             <p>示例文字</p>
  19.         </section>
  20.     </div>
  21.     <div class="content">
  22.         <section>
  23.             <h1>section 5</h1>
  24.             <p>示例文字</p>
  25.             <section>
  26.                 <h1>section 6</h1>
  27.                 <p>示例文字</p>
  28.             </section>
  29.             <section>
  30.                 <h1>section 7</h1>
  31.                 <p>示例文字</p>
  32.             </section>
  33.             <section>
  34.                 <h1>section 8</h1>
  35.                 <p>示例文字</p>
  36.             </section>
  37.     </div>
  38.     <div class="content">
  39.         <section>
  40.             <h1>section 9</h1>
  41.             <p>示例文字</p>
  42.         </section>
  43.         <section>
  44.             <h1>section 10</h1>
  45.             <p>示例文字</p>
  46.         </section>
  47.         <section>
  48.             <h1>section 11</h1>

更多 css样式 相关资讯

Web开发中20个很有用的CSS库

Web开发中20个很有用的CSS库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样

纯CSS实现Tooltip

tootip这个东西,真是什么地方都用得着,这段时间就不可避免的遇到了。 首先考虑一下tooltip的基本表现: 这应该是最简单的tooltip了。 首先是移动到某个元

十个实用但IE不支持的CSS属性

对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6。当然,这样的想法是非常病态的,马

web前端css定位position和浮动float

div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式。在CSS2.1的规范中是这样描述的: 1.如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属

经验分享:使用 Restyle.js 简化 CSS 预处理

Andrea Giammarchi的restyle.js是一个新的,基于JavaScript的CSS预处理器,能够运行在服务端(通过Node.js)或者浏览器中。它宣称自己是“一种简化的CSS方法”,能够生成CSS规

用CSS美化半个字符巧妙方法

用CSS美化半个字符巧妙方法

CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙

你可能不知道的5种 CSS 和 JS 的交互方式

你可能不知道的5种 CSS 和 JS 的交互方式

  CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊,两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。虽然我们将代码拆

EnjoyCSS – 先进的在线CSS3代码生成器

EnjoyCSS – 先进的在线CSS3代码生成器

EnjoyCSS是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的

CSS制造出光泽一闪而过的图片效果

我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单,但非常的漂亮。在重新设计网站版面时,我很想在我的logo上使用这种效果。只需要

更多 content 相关资讯

使用CSS3的褪色和动画效果构建消息提醒框

使用CSS3的褪色和动画效果构建消息提醒框

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧。

CSS3每日一练之选择器-插入文字

平时博客等经常会有文章摘要,将文字截断后直接使用省略号表示文章还没有结束,如下所示: 在人际关系中,良好的第一印象是非常重要的,人们愿意在彼此身上寻求信任与诚

更多 display 相关资讯

CSS里的各种水平垂直居中基础写法心得

CSS里的各种水平垂直居中基础写法心得

     首先,依旧是概念。介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让

CSS制作水平垂直居中对齐

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂

检测用户浏览器是否支持CSS3

如何检测用户的浏览器是否支持CSS3,我们需要使用HTML,CSS和JavaScript来完成这件事情。下面是步骤。 1)先制作下面的HTML 1.<span id="check" rel="Detect"></span> 2)然后

使用CSS3和RGBa创建超酷的按钮

使用CSS3和RGBa创建超酷的按钮

虽然CSS3仅仅增加了少数新特性,但是这些属性却可以做很多有用的事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用CSS3的圆角、盒子阴影和文字阴影效果,同时使