常见图文组合以及溢出隐藏

先给大家介绍几种常见的居中方式：文本垂直居中使用line-height=heght；可以实现。

写在父级，子击中行元素，行块元素文本水平居中text-align：center；

块元素相对于在父级水平居中：margin：0 auto；

还有设置文本介绍时，文字内容会超出盒子宽度，这时可以设置文本多余部分隐藏，多余的部分设置为省略号。

单行省略号：overflow：hidden；（溢出隐藏）text-overflow：ellipsis；（超出部分用省略号显示）whit-space：nowrap（不换行）

多行文字末尾显示省略号：overflow：hidden；text-overflow：ellipsis；dispaly：-webkit-box；（转换为弹性盒子，必须填写）-webkit-box-orient：vertical；（必须填写）-webkit-clamp：2；（设置第几行隐藏文字）

实现几个基础的页面图文组合布局

 

 看到效果图，首先构思如何搭建这个模块，看到水平布局首先想到的是使用浮动。

1.一个大盒子命名为item。大盒子包括6个小盒子

2.以一个小盒子为基础 发现每个小盒子里头有一个img和3个P标签即可，并且让这些文本水平居中。通过text-align：center；就能实现再让每个盒子添加浮动属性，调整上下左右边距和背景色来达到我们想要的结果

3.将每个盒子排列，在这里我们需要考虑层叠现象所/以给下面三个盒子相同的类名取消掉上边距，因为浮动后上边距与下边距会相加，出现层叠现象