<!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. [BZOJ1188][HNOI2007]分裂游戏（博弈论）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1188 分析: 设SG[i]表示一个石子在位置i上的SG值 这个很容易暴力求,因为i的后 ...

  2. name after, name for, name as

    name after, name for, name as name after是一个常见用法  :  1.Her parents named her Sophia after her grandmo ...

  3. java/c# 判断点是否在多边形区域内

    java/c# 判断点是否在多边形区域内 年06月29日 ⁄ 综合 ⁄ 共 1547字 ⁄ 字号 小 中 大 ⁄ 评论关闭 最近帮别人解决了一个问题,如何判断一个坐标点,是否在多边形区域内(二维). ...

  4. Alpha版本冲刺现场演示和阶段验收的总结

    一共15个组.有13个组参加了今天的现场演示,分别是YZH.Radio Group.FZU5BOYS.静静看.Clean Code.Mod4.F4.For the Dream.Journey of C ...

  5. __getattr__与__getattribute__

    class Foo: def __init__(self,x): self.x=x def __getattr__(self, item): print("执行的是我----->&qu ...

  6. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  7. java 读取数据库中表定义

    将数据库中的表信息读取出来 package com.cloud.smartreport.utils; import java.sql.Connection; import java.sql.Datab ...

  8. 国外有哪些比较好的IT社区

    作者:匿名用户链接:https://www.zhihu.com/question/35373320/answer/114468522来源:知乎著作权归作者所有,转载请联系作者获得授权. Github ...

  9. bzoj4409&&bzoj4410&&bzoj4411[Usaco2016 Feb Platinum]题解

    辣鸡wyz最近状态奇差,于是想用usaco题找找手感,万万没想到被虐了一脸TAT 先贴代码,有空再填坑 4409[Usaco2016 Feb]Circular barn #include <io ...

  10. c# 百度api语音识别

    public static string getStrAccess(string para_API_key, string para_API_secret_key) { //方法参数说明: //par ...