怎么用css实现盒尺寸重置、均匀分布的子元素、截断文本

本篇内容介绍了“怎么用css实现盒尺寸重置、均匀分布的子元素、截断文本”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

站在用户的角度思考问题,与客户深入沟通,找到龙南网站设计与龙南网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟空间、企业邮箱。业务覆盖龙南地区。

盒尺寸重置

重置盒子模型,以便width sheight s并没有受到border 还是padding他们的影响 。

代码实现:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

效果如下:

怎么用css实现盒尺寸重置、均匀分布的子元素、截断文本

说明

box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。
box-sizing: inherit 使元素尊重其父元素box-sizing 规则。
浏览器支持98.4 %,没有警告。

均匀分布的子元素

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

代码实现:


  

Item1

  

Item2

  

Item3