怎么用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 %,没有警告。
均匀分布的子元素
在父元素中均匀分布子元素。
代码实现:
Item1
Item2
Item3