web前端入门到实战：css实现盒尺寸重置、均匀分布的子元素、截断文本

盒尺寸重置

重置盒子模型，以便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 %，没有警告。

均匀分布的子元素

在父元素中均匀分布子元素。

代码实现：

  
Item1
  
Item2
  
Item3