学习CSS你必须踩得那些坑（六）
这里加了边框方便 调试 ： · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：我们设置行内元素<a> display为inline-block 行内元素是就像水一样，垂直方向上设置高度都没用，所以有时候需要设置为inline-block或block。 有个形象的比喻，inline=>水，inline-block=>果冻，block=>石头 · 设置box-sizing为border-box 默认情况下，元素的height只包括内容区域。但是我们经常需要加入border或者padding，元素的高度的实际高度是padding + border + height，每次你都需要减去padding和border。除了计算麻烦之外，用百分比设置高度的时候，你经常会遇到内容区域溢出的问题： <style> html,body{ height: 100%; width:100%; } .container{ padding: 0 20px; } </style> </head> <body> <div class="container"> Hello World </div> </body> [站外图片上传中……(4)] · 通过line-height进行垂直居中： css 中水平居中很简单，但是垂直居中就不好做了