你不知道的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;  }