CSS3-box盒布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒布局——display:box;</title>
<style>
li:after {
content: '';
clear: both;
display: block;
}
li {
*zoom: 1;
}
/*div[id] {*/
/*height: inherit;*/
div{
float: left;
padding: 20px;
margin: 5px;
background: rgb(113, 175, 255);
color: #314b6e;
font: bold 14px "微软雅黑";
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*float*/
/*div.float{*/
/*width: auto;*/
/*height: 400px;*/
/*}*/
.left, .right {
width: 300px;
}
.center {
width: 500px;
}
/*column*/
div.column {
display: inline-block;
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
background: rgb(250, 255, 150);
}
.Cleft, .Cright {
/*width: 300px;*/
/*宽度就不能设置了*/
}
.Ccenter {
/*width: 500px;*/
}
/*box*/
div.box{
display: -moz-box;
display: -webkit-box;
background: rgb(250, 255, 150);
}
.Bleft,.Bright,.Bcenter{
float: none;/*特别注意，使用box盒模型的时候不能有浮动*/
}
.Bleft {
width: 300px;
}
.Bright {
width: 100px;
}
.Bcenter {
width: 500px;
}
</style>
</head>
<body>
<ul>
<li>
<h1>实验——常规布局</h1>
<h4>总结：高度不一致时，底部不能对齐：解决办法：其实也可以外加一个父元素，给父元素一个高度，然后子元素继承父元素高度也是可以的，但是缺点是没父元素的高度是给定的，不能虽内容的改变而改变了</h4>
<!--<div class="float">-->
<div class="left">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<div class="center">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<div class="right">
总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<!--</div>-->
</li>
<hr/>
<li>
<h1>column多栏布局</h1>
<h4>总结：虽然高度一致，底部也可以对齐。但缺点是无法设置各个元素的宽度不一样也不能控制每一栏中显示什么内容，因为内容都是分配的</h4>
<div class="column">
<div class="Cleft">
人类生性懒惰，没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同，在移动设备上打字更是一件苦差事。尽可能删除没必要的字段，只保留那些有必要的。如果真的有很多信息要用户填写，试着将它们分散在不同页面，一页提交后再填写下一页。人类生性懒惰，没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同，在移动设备上打字更是一件苦差事。尽可能删除没必要的字段，只保留那些有必要的。如果真的有很多信息要用户填写，试着将它们分散在不同页面，一页提交后再填写下一页。
</div>
<div class="Ccenter">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<div class="Cright">
在介绍产品时，增加一些个性化的信息（比如原产地），会让用户觉得产品友好和亲近。通常，指明产品在哪里被制造还能够让用户下意识地认为产品有较好的质量。
</div>
</div>
</li>
<hr/>
<li class="box">
<h1>box盒布局</h1>
<h4>总结：即使高度不一致时，底部也可以对齐。同样也可以单独设置每一栏的宽度和显示的内容</h4>
<h4>/*特别注意，使用box盒模型的时候，各个元素之间不能有float浮动属性*/</h4>
<div class="box">
<div class="Bleft">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<div class="Bcenter">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
<div class="Bright">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。
</div>
</div>
</li>
<hr/>
</ul>
</body>
</html>
CSS3-box盒布局的更多相关文章
- 深入理解 CSS3 弹性盒布局模型
Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...
- CSS3弹性盒布局
使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. <!DOCTYPE html> <html lang="zh-CN" ...
- CSS3 弹性盒布局
一.伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 二.定义 Flexbox 语法格式: di ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
随机推荐
- AutoMapperHelper
/// <summary> /// AutoMapper帮助类 /// </summary> public static class AutoMapperHelper { // ...
- latex中页面距离的设置
1.页面设置 a4 会给你一个较小的页面,为了使用更多的控制,可用 geometry宏包和命令 \layout . 2.改变长度 在latex里改变长度的命令是 \addtolength 和 \set ...
- svn1.8 server client eclipse 插件 配置 完全教程
svn毋庸置疑,广受欢迎的版本管理软件,我们这里以1.8.10版本为例 本文分三部分 第一部分,服务器端svn安装与配置 第二部分,eclipse下svn插件安装与配置 第三部分,客户端svn简单介绍 ...
- C#开发命名规范
学习C#之初,始终不知道怎么命名比较好,很多时候无从命名,终于有一天我整理了一份命名规范文档,自此我就是按照这个命名规范书写代码,整洁度无可言表,拙劣之处请大家斧正,愚某虚心接受,如有雷同,不胜荣幸 ...
- Python基础-字符串格式化_百分号方式_format方式
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...
- Bete冲刺第三阶段
Bete冲刺第三阶段 今日工作: web: 检索了各类资料,今日暂时顺利解决了hibernate懒加载异常的问题,采用的凡是也比较简单就是添加了一个OpenSessionInViewFilter的过滤 ...
- Beta版本冲刺Day3
会议讨论: 628:已经将原本写在jsp中的所有界面修饰代码转移到了css文件中,同时当页面跳转的时候也不会出现崩溃的现象,并且已经解决了上次无法连接数据库的问题.但是又遇到了一些新的小问题,希望明天 ...
- 【UR #2】树上GCD
这道题是有根树点分治+烧脑的容斥+神奇的分块 因为是规定1为根,还要求LCA,所以我们不能像在无根树上那样随便浪了,必须规定父亲,并作特殊讨论 因为gcd并不好求,所以我们用容斥转化一下,求x为gcd ...
- open-flash-chart2
链接 http://www.oschina.net/news/10797/Open-Flash-Chart-2-0 open-flash-chart.rar http://123-reg-suspen ...
- 概率 light oj 1248
t组样例 n<100010 dp[i] 从i翻到n面的期望 接下来翻 可能是i面已经有的 也可能是n-i面没有的 dp[i]=i/n*(dp[i]+1)+(n-i)/n*(dp[i+1]+1) ...