CSS弹性布局和栅格布局有什么异同

html-css014

CSS弹性布局和栅格布局有什么异同,第1张

CSS Grid:

这是 CSS 布局实现方式之一。

它可以定义行列宽高什么的,将页面分布成不等大小块。

简单理解请参照 table 标签。

Grid 栅格系统:

它是一种约定式的排版方式。

以规则的网格阵列来指导和规范版面排布以及信息分布。

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float:left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>