css中栅格话和列表显示是怎么实现的

html-css038

css中栅格话和列表显示是怎么实现的,第1张

两种方法:

一种是左浮动:{float:left}

Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

float语法:

float : none | left |right

参数值:

none :  对象不浮动

left :  对象浮在左边

right :  对象浮在右边

<div class="divcss5">

<div class="divcss5_left">布局靠左浮动</div>

<div class="divcss5_right">布局靠右浮动</div>

<div class="clear"></div><!-- html注释:清除float产生浮动 -->

</div>

二种内联样式:{display:inline}。

例子:

<html>

<head>

<style type="text/css">

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来!</p>

<div>div 元素的内容不会显示出来!</div>

</body>

</html>

CSS Grid:

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

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

简单理解请参照 table 标签。

Grid 栅格系统:

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

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