你的位置:首页 > 软件开发 > 网页设计 > 第 29 章 CSS3 弹性伸缩布局[下]

第 29 章 CSS3 弹性伸缩布局[下]

发布时间:2016-05-01 17:00:11
学习要点:1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。 一.新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C ...

学习要点:

1.新版本

 

主讲教师:李炎恢

 

本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。

 

一.新版本

新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一。

首先,设置伸缩盒的 display 有如下两个属性值:

属性值

说明

flex

将容器盒模型作为块级弹性伸缩盒显示(新版本)

inline-flex

将容器盒模型作为内联级弹性伸缩盒显示(新版本)

//大部分不需要前缀

div {  display: flex;}

属性值

说明

row

设置从左到右排列

row-reverse

设置从右到左排列

column

设置从上到下排列

column-reverse

设置从下到上排列

2.flex-wrap

flex-wrap 属性类似与旧版本中的 box-lines,但是 box-lines 我们没有讲解,原因是没有浏览器支持它。

//设置无法容纳时,自动换行 

div {  -ms-flex-wrap: wrap;}

原标题:第 29 章 CSS3 弹性伸缩布局[下]

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。