布局概念
#main {
max-width: 600px;
margin: 0 auto;
}特别注意： padding太大，会把width撑破。（不再受限）
当你设置一个元素为 Box-sizing: border-Box; 时，此元素的内边距和边框不再会增加它的宽度。
.simple {
width: 500px;
margin: 20px auto;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：
* {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}相当于给自己的直系子元素加 inline-block,并紧凑它们，然后提供一些简便的API。（e.g 1/3）
新的 flexBox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexBox 的 Chrome 浏览器中运行，基于最新的标准。
网上有不少过时的 flexBox 资料。 如果你想要了解更多有关 flexBox 的内容，从这里学习如何辨别一份资料是否过时。我已经写了一份关于最新标准的详细文章。
使用flexBox你还可以做的更多；这里只是一些让你了解概念的例子：
使用 FlexBox 的简单布局
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1; //所有包含flex配置项的参数和为n,则它占位为1/n,此时就他一个，所以1/1
}
布局案例
margin控制的 是 平凡元素 的真身,但 translate()却相当于给元素赋了 relative 属性，d2真身还在原位置，会对后续元素产生影响。
d3通过margin属性，强行将自己的真身，覆盖在了d2上。这里d2，d3一样大，所以后续元素不受影响，但d2较大，后续元素就会受影响了。
.d1,.d2,.d3{
height: 100px;
width: 100px;
background-color: #FF0000;
border: 1px solid #000000;
box-sizing: border-box;
}
.d1 {
margin: 0 auto;
}
.d2{
margin-left: 50%;
transform: translate(-100%,0);
display: inline-block;
}
.d3{
margin-left: -100px;
display: inline-block;
}
你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。
你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
vertical-align属性 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
原文链接：https://www.f2er.com/note/421462.html
