css3中webkit-box的用法
转自：http://www.frontopen.com/288.html
1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
提供的关于盒模型的几个属性：
box-orient 子元素排列 vertical or horizontal
box-flex 兄弟元素之间比例，仅作一个系数
box-align box 排列
box-direction box 方向
box-flex-group 以组为单位的流体系数
box-lines
box-ordinal-group 以组为单位的子元素排列方向
box-pack
提供的关于盒模型的几个属性：
1、三列自适应布局，且有固定margin：
<style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：
<!DOCTYPE html>
<html>
<meta charset=”utf-8″ />
<style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style>
<div>
<div>200px</div>
<div>比例1</div>
<div>比例2</div>
</div>
</html>
3、下面是一个常见的web page 的基本布局：
<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
} .w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style>
<div id=”doc”>
<header>Header</header>
<div id=”content”>
<section>定宽200</section>
<section>比例3</section>
<section>比例1</section>
</div>
<footer>Footer</footer>
</div>
</html>
css3中webkit-box的用法的更多相关文章
- css3中font-face属性的用法详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- CSS3中transform属性的用法
有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source print? 01 &l ...
- css3中webkit内核的滚动栏样式
项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- MFC中List box的用法
首先在头文件中创建对象,CSGrid m_proViewList;//创建表头#pragma region 建立grid表的标题 m_proViewList.AppendColumn(_T(" ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- 不可不看！CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
随机推荐
- Netsuite > Foreign Currency Revaluation 外币评估
MENU: Transactions > Financial > Revalue Open Currency Balances 使用频率: - 每个月月底,结账前, 手工操作. - 或者在 ...
- C#利用HttpWebRequest进行post请求的示例（HTTPS）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...
- 输入5至10之间的数字(用javaScript实现判断)
输入5至10之间的数字 ----用javaScript实现判断 代码如下: <!DOCTYPE html><html><body> <script>fu ...
- GET方法和POST方法
package com.hanqi.cunchu; import android.app.ProgressDialog; import android.support.v7.app.AppCompat ...
- T-SQL编程 —— 用户自定义函数(内嵌表值函数)
内嵌表值函数 接上 <T-SQL编程 -- 用户自定义函数(标量函数)> http://www.cnblogs.com/viusuangio/p/6212072.html 内嵌表值函数可以 ...
- mysql 数据库 表字段添加表情兼容
项目中的几个需要支持Emoji表情符号,手机自带的表情,其实添加也很简单: 1 修改数据库 配置my.cnf init-connect='SET NAMES utf8mb4' ...
- 总结common-dbutils.jar
2016/4/13 20:19:36 common-dbutils.jar 最核心的类:QueryRunner updata方法: int update(String sql,Object... pa ...
- 调用微信JsAPI端获取位置
public partial class test : BasePage { protected test() { AccessPage = PageWebType.WX; } protected s ...
- Android中文TTS
如今在Android中开发中文语音播报有各式各样的云服务.SDK.API等云云,但是大部分服务是需要联网支持来进行语音合成的,在中文语音合成方面,科大讯飞无疑是佼佼者,而且它也提供了离线语音合成包(需 ...
- HTML基础（3）
1.块元素和内嵌元素(block\inline) 块的特征: 独占一行 不设定宽度,宽度将撑满整行 能设置所有样式 内嵌的特征: 默认同行可以继续跟同类型标签 内容撑开宽度 不支持宽高 不支持上下的m ...