webkit-box
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以下是关于flexible box的几个实例
1、三列自适应布局，且有固定margin：
<!DOCTYPE html><html><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></html>
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>
下面是一个常见的web page 的基本布局
<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 class="w200">定宽200</section>
<section class="flex3">比例3</section>
<section class="flex1">比例1</section>
</div>
<footer>Footer</footer>
</div>
|
|
- 大小: 20.2 KB
分享到：
相关推荐
css3弹性布局-webkit-box的用法演示 css3弹性布局-webkit-box的用法演示
在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示 [ above | below | right | left ]? <length>? <image>? 该值包涵了三部分：方位+偏移量+遮罩...
一个插件，用于使用CSS flexbox模型创建覆盖整个宽度的标题。 在此处查看一些示例： : 用法 CSS ： .full-width-hl .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -...
vue.js实现日历插件使用方法详解 今天要实现的功能就是以下这个功能：vue.js模拟日历插件 好了废话不多说了 直接上代码了 css: *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-...
-webkit-line-clamp: 3; overflow: hidden; } vertical-align 文字垂直居中的方法 iOS和部分Android在使用 button 标签时，如果设置等高的 line-height ，会出现文字下偏移的情况 iOS使用默认字体（不设置字体）时...
JsCSS可以区分JavaScript和CSS（希望使用一个大的Regex）。 这使得以一种非常有用的方式混合两种语言成为可能。 就像LESS或Sass一样：JavaScript是预处理器。 在CSS表达式中， | 可用于创建JavaScript区域。 它们...
这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡： 基本上是只有 -webkit- 内核的浏览器才支持。 不过使用起来真的是方便，解题如下： 不过使用起来真的是方便，...
display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。 <view class=header></view> <view class=content></view> page{ display: -webkit-box; //设置弹性布局 -webkit-box-orient: vertical...
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： ....
以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。...当然了，这个前提是使用css3的盒布局，即将外层元素的display设置为box 复制代码代码如下: <style typ
首先下载ie-css3.htc脚本，然后在css中加入： 它的使用方法是：下载它并放到你的服务器目录 在你的<head></head>里面写入下面的代码: 复制代码代码如下: .box { -moz-border-radius: 15px; /* Fire...
二、标准方法 标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码： 复制代码代码如下: .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-...
我们都知道，IE 6,7不支持新增加的CSS3...使用方法很简单： behavior: url(ie-css3.htc); 代码 复制代码代码如下: .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrom
方法一：使用CSS溢出省略的方式解决 解决效果如下： css代码： display: -webkit-box; display: -moz-box; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; -...
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
使用并解说所用CSS3 接下来给大家说说这个读者墙所应用到的css3属性，及其具体的使用方法，老鸟可以飞了。 渐变： background-image:-webkit-linear-gradient(#aaa,#bbb); 这是最简单的线性渐变，所以写起来也比较...
本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下 box-pack和box-align属性 当弹性元素和非弹性元素混合排版时，有可能会...
【CSS3的其他用法】 除了动画的代替，还有就是对于各种交互的实现上，也体现了CSS的强大，更多的是使用CSS3提供的选择器； 先来看个例子：可以更好的体现我这次对于CSS的深刻感悟 <style> body{background:#...
使用 box-shadow 和关键帧动画，gif 的像素被映射到 1x1 div 的无模糊 box-shadow，gif 的每一帧都变成 box-shadow 属性以在它们之间设置动画！ 免责声明：目前仅适用于 webkit 浏览器，稍后将添加更多支持 用法：...