文档章节

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

博为峰教研组
 博为峰教研组
发布于 2016/12/26 19:42
字数 505
阅读 5
收藏 0

这里加了边框方便调试

· 为了能够设置在垂直方向上的高度(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;

}

总结

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

 

 

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
学习CSS你必须踩得那些坑(二)

利用browser-sync实时刷新页面 为了省去每次修改代码后都要手动刷新页面,我习惯使用browser-sync监听文件,自动刷新浏览器 1. 安装Browsersync npm install -g browser-sync 2. 运行Browser...

博为峰教研组
2016/12/26
7
0
学习CSS你必须踩得那些坑(一)

目标 按照Sketch设计稿,实现一个完整的页面,希望你学完这一些列课程后,能够系统地掌握CSS,真正玩转CSS 课程内容 首先下载素材文件(Windows用户可以下载pdf版) 设计稿 用Sketch打开文件...

博为峰教研组
2016/12/26
13
0
唠唠 RDS 那些事 —— RDS on Windows Server 2016 第二篇

上一篇中唠叨了一下什么是 RDS 服务。于是,有人问我现在还有人在用 RDS 吗?我反问为什么没人用呢?对方答曰踩坑的飘过。其实,我是觉得,任何技术在运用到实际项目的时候,都会遇到数不尽的...

loveunicom
2017/10/27
0
0
Next.js踩坑入门系列(六) —— 再次重构目录

Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux (六) 再次重构目录 (七) 其他相关知识 上一节引入了r...

luffyZhou
2018/10/11
0
0
学习CSS你必须踩得那些坑(四)

完成导航 HTML结构 <header class="siteheader"> <nav class="navbar"> <a class="navbarbrand" href="#">Company Logo</a> <ul class="navbarnav list-nostyle"> <li><a href="#">Platform......

博为峰教研组
2016/12/26
10
0

没有更多内容

加载失败,请刷新页面

加载更多

springmvc的return “success”源码解读

qqqq

architect刘源源
今天
4
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0
商业合作模式有几种

公司合作首先要看公司的发展、定位已经公司双方的实力,前期沟通,了解很重要,切不可盲目。一般公司之间合作有以下: 一、六种合作模式 1、资源互换:资源互换是一种双方商定在一段时间内彼此...

吴伟祥
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部