你不知道的css(一)

• 2019 年 11 月 20 日
• 筆記

最近在看张鑫旭老师的《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;  }