你不知道的css(一)

[z2014]

最近在看张鑫旭老师的《css世界》，记录第二章有关宽高很有意思的东西: 1.如何用html片段实现一个凹和凸字呢？

.ao{
    width: 0;
    display: inline-block;
}
.ao:before {
    content: 'love 你 love';
    outline: 2px solid black;
    color: white;
}

这个主要是利用英文单词连续不换行的特性,如果想让英文单词以每个字符为最小宽度，那就设置 word-break:break-all 2.实现一个宽度为100px，padding为20px，border为1px的的div 我第一时间想到的是用box-sizing属性,但是书中提到了另一种解决思路: 宽度分离

.father{
    width: 102px;
}
.son{
    border: 1px solid black;
    padding: 20px
}

这种方式带来不好的地方在于html层级嵌套太深, 3.height为百分比时，如果是定位元素，则会将padding计算在内，否则就不会

.box{
    height: 160px;
    padding: 20px;
    box-sizing: border-box;
    position: relative 
}
.son{
    height: 100%;
    width: 100%;
    position: absolute;
}