目录
1.元素宽度的问题
当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。
2. cale() ,计算数值
.column-wrap .container{
width: 100%;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
float: left;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left: 1.5em;
width: calc(30% - 1.5em);
border-radius: 0.5em;
background-color: #890;
float: left;
}
<div class="column-wrap">
<h2>实现等高列</h2>
<div>
<header>Franklin Running Club</header>
<div class="container">
<main>
<h3>Welcome Join Us</h3>
<p>你好，欢迎加入我们！</p>
</main>
<sidebar>
这里是侧边栏
</sidebar>
</div>
</div>
</div>效果：
3. 调整盒模型
在CSS中可以使用box-sizing属性调整盒模型的行为。
box-sizing的默认值为content-box，这意味任何指定的宽或高都只会设置内容盒子的大小。
box-sizing设置为border-box后，height和width属性会设置内容、内边距以及边框的大小总和
4.全局设置border-box
用通用选择器（＊）选中了页面上所有元素，并用两个选择器选中了网页的所有伪元素。将这段代码放到你的样式表开头。
*,
::before,
::after{
box-sizing:border-box;
}
更优化代码：
盒模型通常不会被继承，但是使用inherit关键字可以强制继承
如下述代码所示，可以在必要时选中第三方组件的顶级容器，将其恢复为content-box。这样组件的内部元素会继承该盒模型。
5.元素高度的问题
普通文档流是为限定的宽度和无限的高度设计的。
当明确设置一个元素的高度时，内容可能会溢出容器。
用overflow属性可以控制溢出内容的行为，该属性支持以下4个值。
❑ visible（默认值）——所有内容可见，即使溢出容器边缘。
❑ hidden——溢出容器内边距边缘的内容被裁剪，无法看见。
❑ scroll——容器出现滚动条，用户可以通过滚动查看剩余内容。在一些操作系统上，会出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）。不过，在这种情况下，滚动条不可滚动（置灰）。
❑ auto——只有内容溢出时容器才会出现滚动条。
用百分比指定高度：必须给父元素明确定义一个高度。
用百分比指定高度存在问题。百分比参考的是元素容器块的大小，但是容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器处理不了，因此它会忽略这个声明。
要想让百分比高度生效，必须给父元素明确定义一个高度。
5.1 等高列
最好的办法是让它们自己决定高度，然后扩展较矮的列，让它的高度等于较高的列。
5.1.1 使用css表格布局代替浮动布局
.column-wrap .container{
width: 100%;
display: table;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left:1.5em;(display:table-cell,外边距不生效)
width: 30%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
上图看到外边距并不会作用于table-cell元素，那如何让间隔生效呢？
5.1.2 使用flexbox实现等高列
给容器设置display: flex，它就变成了一个弹性容器（flex container），子元素默认等高
.container{
display:flex;
}
.main{
padding: 1.5em;
width: 70%;
border-radius: 0.5em;
}
.sidebar{
width:30%
margin-left: 1.5em;
padding: 1.5em;
border-radius: 0.5em;
}5.1.3 使用min-height和max-height
min-height和max-height。你可以用这两个属性指定最小或最大值，而不是明确定义高度，这样元素就可以在这些界限内自动决定高度。
5.1.4 垂直居中内容
vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。比如，可以用它控制一个行内的图片跟相邻的文字对齐。
垂直居中指南
在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。
❑ 可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。
❑ 容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align: middle。
❑ 可以用Flexbox吗？ 如果不需要支持IE9，可以用Flexbox居中内容。
❑ 容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。
❑ 容器和内容的高度都知道吗？将内容绝对定位。（只有当前面提到的方法都无效时才推荐这种方式。）
❑ 不知道内部元素的高度？用绝对定位结合变形（transform）。（还是只有当前面提到的方法都无效时才推荐该方法。）还不确定的话，参考howtocenterincss网站。这个网站很不错，可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码。