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

原创 高志飞 教程 css 44阅读 7 天前 举报

盒尺寸重置

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

代码实现:

效果如下:

说明

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

均匀分布的子元素

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

代码实现:

效果如下:

说明

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

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

截断文本

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

代码实现:

效果如下:

说明

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

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

自己是一个五年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复