学习CSS你必须踩得那些坑（六）

时间 2019-11-06

标签学习 css 必须那些栏目 CSS 繁體版

原文原文链接

这里加了边框方便调试：css

· 为了可以设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：咱们设置行内元素<a> display为inline-blockhtml

行内元素是就像水同样，垂直方向上设置高度都没用，因此有时候须要设置为inline-block或block。
有个形象的比喻，inline=>水，inline-block=>果冻，block=>石头调试

· 设置box-sizing为border-boxcode

默认状况下，元素的height只包括内容区域。可是咱们常常须要加入border或者padding，元素的高度的实际高度是padding + border + height，每次你都须要减去padding和border。除了计算麻烦以外，用百分比设置高度的时候，你常常会遇到内容区域溢出的问题：htm

<style>图片

html,body{开发

height: 100%;文档

width:100%;get

}it

.container{

padding: 0 20px;

}

</style>

</head>

<body>

Hello World

</div>

</body>

[站外图片上传中……(4)]

· 经过line-height进行垂直居中：
css中水平居中很简单，可是垂直居中就很差作了。经过设置line-height等于height可让文字垂直居中。关于居中的问题，参考[译]CSS居中彻底指南：http://www.voyax.me/2016/04/19/译-CSS居中彻底指南/

最后还有一个大坑！！！

[站外图片上传中……(5)]

为啥navbar高度没有撑开！！！好吧，都是float的错，float致使元素溢出了文档流，从而父元素的高度不会随着float元素高度的变化而适应。
单从float的角度说，有两个思路：

1. 将父元素变成BFC

2. 清除浮动

代码以下：

经过overflow触发BFC

.navbar::after{

overflow: hidden;

}

clearfix（关于clearfix的讨论，看看stackoverflow上的这个讨论）

.clearfix:after {

content: " "; /* Older browser do not support empty content */

visibility: hidden;

display: block;

height: 0;

clear: both;

}

总结

这一章主要带着你踩踩坑，介绍了几个开发中常常遇到的问题。下一张咱们看看在实际开发中，若是从零开始组织你的代码，同时逐步完成这个页面