沐鸣测速登陆_网站H5前端开发之display水平排列

www.pptschool.com 沐鸣官方登录 2022-01-03 845 次浏览 没有评论

Display 的几个常用的属性,如下图:

第一个是block,是使元素变成块级元素,元素会独占一行,块级元素宽度默认100%,可以设置宽度width、高度height、填充padding、间距margin的值。

第二个是inline,是使元素变成行内元素,可以与其他行内元素共占同一行,不会独占一行,

 不能设置宽度width、高度height,可以设置填充padding、间距margin左右的值。

第三个是inline-block,是使元素变成行内块级元素,可以与其他行内元素共占同一行,元素不会独占一行的,可以设置宽度width、高度height、填充padding、间距margin的值。

第四个是none,元素会隐藏,元素所占的空间也不会保留。

Display: inline-block 可以搭配vertical-align一起使用,vertical-align的属性有sub 、super、text-top、text-bottom、middle,对应的属性的解释如下图:

display属性

在工作中遇到的项目,有的例如企业网站的新闻或者产品模块,如下图的效果,当上新闻图片或者产品图片的尺寸不同的时候,用浮动布局去做的话,可能排版会产生错乱,那么可以用Display:inline-block;

效果如下图:

css下图:

父级元素.order ul需要设置font-size: 0; 是因为需要消除存在空白间隙的原因,空白间隙的间距是4px, 设置font-size: 0,就是字体大小为0,那么空白间隙也会变成0了,这样就不会影响下面的排版了。如上所说的产品列表或者新闻列表那里的布局,即使上传的图片宽度不同,图片的设置是width: 100%; 高度可能不一样导致布局混乱,就可以用display: inblock; vertical-align: top; 排版就不会乱,而且是相对顶端对齐的。相比用浮动布局,float会使元素脱离文档流,而且父级元素的高度会坍塌,用display: inline-block则不会。虽然会有上面说的空白间隙,可以设置父级元素字体大小为0就能解决这个问题,而且能兼容各个浏览器了。所以当遇到类似这种产品列表或者新闻列表是水平排列的,用display: inline-block;去做效果挺好,也不需要清除浮动或担心排版会错乱。

回顶部