<!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;
.Bleft,.Bright,.Bcenter{
float: none;/*特别注意，使用box盒模型的時候不能有浮動*/
.Bleft {
.Bright {
width: 100px;
.Bcenter {
</style>
</head>
<body>
<ul>
<li>
<h1>實驗——正常布局</h1>
<h4>總結：高度不一緻時，底部不能對齊：解決辦法：其實也可以外加一個父元素，給父元素一個高度，然後子元素繼承父元素高度也是可以的，但是缺點是沒父元素的高度是給定的，不能雖内容的改變而改變了</h4>
<!--<div class="float">-->
<div class="left">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
</div>
<div class="center">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
<div class="right">
總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
<!--</div>-->
</li>
<hr/>
<h1>column多欄布局</h1>
<h4>總結：雖然高度一緻，底部也可以對齊。但缺點是無法設定各個元素的寬度不一樣也不能控制每一欄中顯示什麼内容，因為内容都是配置設定的</h4>
<div class="column">
<div class="Cleft">
人類生性懶惰，沒有人喜歡填寫一堆表單。表單中每個字段都有可能讓使用者放棄填寫。每個人打字速讀不同，在移動裝置上打字更是一件苦差事。盡可能删除沒必要的字段，隻保留那些有必要的。如果真的有很多資訊要使用者填寫，試着将它們分散在不同頁面，一頁送出後再填寫下一頁。人類生性懶惰，沒有人喜歡填寫一堆表單。表單中每個字段都有可能讓使用者放棄填寫。每個人打字速讀不同，在移動裝置上打字更是一件苦差事。盡可能删除沒必要的字段，隻保留那些有必要的。如果真的有很多資訊要使用者填寫，試着将它們分散在不同頁面，一頁送出後再填寫下一頁。
</div>
<div class="Ccenter">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
<div class="Cright">
在介紹産品時，增加一些個性化的資訊（比如原産地），會讓使用者覺得産品友好和親近。通常，指明産品在哪裡被制造還能夠讓使用者下意識地認為産品有較好的品質。
<li class="box">
<h1>box盒布局</h1>
<h4>總結：即使高度不一緻時，底部也可以對齊。同樣也可以單獨設定每一欄的寬度和顯示的内容</h4>
<h4>/*特别注意，使用box盒模型的時候，各個元素之間不能有float浮動屬性*/</h4>
<div class="box">
<div class="Bleft">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
<div class="Bcenter">
<div class="Bright">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。
</ul>
</body>
</html>
![Apache Flink Meetup，1.13 新版本釋出 x 互娛場景實踐分享的開發者盛筵！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)