盒尺寸重置重置盒子模型，以便width s和height s并没有受到border 还是padding他们的影响 。代码实现：html { box-sizing: border-box;},::before,*::after { box-sizing: inherit;}效果如下：说明box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。box-sizing: inherit 使元素尊重其父元素box-sizing 规则。浏览器支持98.4 %，没有警告。均匀分布的子元素在父元素中均匀分布子元素。代码实现：<div class=“evenly-distributed-children”> <p>Item1</p> <p>Item2</p> <p>Item3</p></div><style>.evenly-distributed-children { display: flex; justify-content: space-between;}<style>效果如下：说明display: flex 启用弹性箱。justify-content: space-between 水平均匀分布子元素。第一个项目位于左边缘，而最后一个项目位于右边缘。或者，使用justify-content: space-around 给子元素们分配空间，而不是在他们之间。浏览器支持98.1 %，需要前缀才能获得完全支持。截断文本如果文本长度超过一行，它将被截断并以省略号结束。代码实现：<p class=“truncate-text”>If I exceed one line’s width, I will be truncated.</p><style>.truncate-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px;}<style>效果如下：说明overflow: hidden 防止文本溢出其尺寸(对于块，100 %宽度和自动高度)。white-space: nowrap 防止文本高度超过一行。text-overflow: ellipsis 使其在文本超出其维度时以省略号结尾。width: 200px; 确保元素具有维度，以知道何时获取省略号浏览器支持98.4 %，仅适用于单个行元素。