盒尺寸重置

重置盒子模型，以便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
    

效果如下：

说明

display: flex 启用弹性箱。 justify-content: space-between 水平均匀分布子元素。第一个项目位于左边缘，而最后一个项目位于右边缘。 或者，使用justify-content: space-around 给子元素们分配空间，而不是在他们之间。

浏览器支持98.1 %，需要前缀才能获得完全支持。

截断文本

如果文本长度超过一行，它将被截断并以省略号结束。

代码实现：

If I exceed one line's width, I will be truncated.

效果如下：

说明

overflow: hidden 防止文本溢出其尺寸(对于块，100 %宽度和自动高度)。 white-space: nowrap 防止文本高度超过一行。 text-overflow: ellipsis 使其在文本超出其维度时以省略号结尾。 width: 200px; 确保元素具有维度，以知道何时获取省略号

浏览器支持98.4 %，仅适用于单个行元素。

这里推荐一下我的学习交流q.u.n：731771211，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：