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

原创

于 2019-08-16 14:29:59 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #web前端 #前端工程师 #前端基础

本文介绍了web前端开发中的三个CSS技巧：如何重置盒模型，实现子元素在父元素内的均匀分布，以及如何使用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 %，没有警告。

均匀分布的子元素

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

代码实现：

<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>

效果如下：

最低0.47元/天解锁文章