专题课程
单行截断字符串,这里必须指定字符串的宽度
之前在做布局的时候使用calc 出现了很严重的线上 BUG。后来就深究了下这个属性的使用。calc好用的地方就是，可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下 can i use 截图：
而且在使用的时候要加上厂商前缀，达到兼容性。不过现在不推荐使用，毕竟，浏览器支持有限。
示例代码：
研究过淘宝，天猫，京东的 h5端页面看到这个单位用的不多，主要还是兼容性的问题吧。
解决盒模型在不同浏览器中表现不一致的问题。但是仍然会有兼容性问题。看最下面的浏览器支持列表。
它有三个属性值分别是：
浏览器支持：
这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：
html 代码如下：
css代码如下：
绝对定位在布局中可以很方边的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如： 弹层，悬浮层等。
line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。
先来看一个实例，如下图：
代码也很简单，就是当我们在div 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？
我们查一下 line-height 的定义，如下：
所以在以上的情况我们要想使，我们的字体能够撑满我们的容器，就需要给父级容器添加 line-height属性且值为 100%
代码和效果如下：
那么为什么会出现上面的问题呢？
所以，可以得出下面的一个公式：
所以，当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。
收藏(0)
赞 
粤公网安备44010602001432号