学习CSS你必须踩得那些坑(六)

为君一笑 提交于 2019-12-03 17:40:59

这里加了边框方便调试

· 为了能够设置在垂直方向上的高度(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中水平居中很简单,但是垂直居中就不好做了。通过设置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;

}

总结

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

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!