<!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盒布局的更多相关文章

  1. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  2. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  3. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  4. CSS3弹性盒布局

    使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. <!DOCTYPE html> <html lang="zh-CN" ...

  5. CSS3 弹性盒布局

    一.伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 二.定义 Flexbox 语法格式: di ...

  6. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  7. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  8. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  9. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

随机推荐

  1. java list随机打乱

    java list随机打乱package arrlist; import java.util.ArrayList; import java.util.Collections; import java. ...

  2. Android几种打开SQLite的方法

    第一种:用SQLiteOpenHelper辅助类 SQLiteOpenHelper类可以用来创建或打开数据库,两个关键的方法:onCreate(SQLiteDatabase db)和onUpgrade ...

  3. C 语言学习的第 01 课：先来聊聊计算机吧

    各位同学,新学期,我就是你们的助教了.我的个人信息,你们的任课老师都已经介绍过了,所以我这里也就不再啰嗦.下面,来聊聊今天的话题:“先来谈谈计算机吧”. 想必看到这个题目,你们大家一定是不愿意点击进来 ...

  4. hihocoder1241 Best Route in a Grid

    题目链接:hihocoder 1241 题意: n*n的格阵,每个方格内有一个数字.蚂蚁从左上角走到右下角,数字是零的方格不能走,只能向右向下走.蚂蚁走的路径上全部方格的的乘积为s,要使s低位0的个数 ...

  5. SharedPreferences保存数据

    1.使用SharedPreferences保存数据方法如下: //实例化SharedPreferences对象(第一步) SharedPreferences mySharedPreferences= ...

  6. RabbitMQ 主题（Topic）

    我们进步改良了我们的日志系统.我们使用direct类型转发器,使得接收者有能力进行选择性的接收日志,,而非fanout那样,只能够无脑的转发. 虽然使用direct类型改良了我们的系统,但是仍然存在一 ...

  7. applicationContext.xml和dispatcher-servlet.xml的区别

    在SpringMVC项目中我们一般会引入applicationContext.xml和dispatcher-servlet.xml两个配置文件,这两个配置文件具体的区别是什么呢? Spring 官方文 ...

  8. iOS开发小技巧--UIButton的另一种布局方法(第一种在layoutSubViews方法中,这一种利用苹果提供的两个返回CGRect的方法)

  9. mxnet目录结构

    普通目录 R-package, R语言API, 因为用的python, 所以对R暂时不感兴趣 amalgamation, 将整个mxnet库打包成一个文件, 以方便直接在客户端调用, 如Android ...

  10. Chrome DevTools good good study day day up

    Chrome DevTools 官方页面 https://developer.chrome.com/devtools