你不知道的css(一) #9
Description
最近在看张鑫旭老师的《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;
}