常用的css布局方式,css常见的布局方式

浮动布局示例

• 相关CSS属性

float - left：元素向左浮动 - right：元素向右浮动 - none：默认值。元素不浮动，并会显示在其在文本中出现的位置 - inherit：从父元素继承 float 属性的值 浮动的缺点

1.父级不能被撑开，在父级设置的属性就没办法正常显示

2.margin和padding值不能正常被显示

清除浮动的几种方法 1.clear:both 2.父级元素设置overflow：hidden属性 3.在浮动元素结束点给个div标签 4.使用伪类清除 5.BFC清除浮动（块级格式化上下文）

绝对定位布局示例

• 相关CSS属性

position - absolute：生成绝对定位的元素 - fixed：生成绝对定位的元素 - relative：生成相对定位的元素 - static：默认值 - inherit：规定应该从父元素继承 position 属性的值

• 注意事项

当页面宽高变化时，可能会出现布局紊乱。

flex布局示例

• 相关CSS属性

display - flex 指定容器采用弹性布局 - inline-flex 行内元素也可以使用flex布局 flex-direction (元素的排列方向) - row：水平方向，起点在左端 - row-reverse：水平方向，起点在右端 - column：垂直方向，起点在上部 - column-reverse：垂直方向，起点在底部 flex-wrap (元素换行) - nowrap：默认参数，元素不换行 - wrap：换行，第一行在上方 - wrap-reverse：换行，第一行在下方 justify-content (元素的对齐方式) - flex-start：默认参数，元素左对齐 - flex-end：元素右对齐 - center： 元素居中 - space-between：元素两端对齐，项目之间的间隔都相等 - space-around：每个项目两侧的间隔相等 align-items (元素交叉轴的对齐方式) - stretch：默认参数，如果项目未设置高度或设为auto，将占满整个容器的高度 - flex-start：交叉轴的起点对齐 - flex-end：交叉轴的终点对齐 - center：交叉轴的中点对齐 - baseline: 项目的第一行文字的基线对齐 align-content - stretch：默认参数，轴线占满整个交叉轴。 - flex-start：与交叉轴的起点对齐 - flex-end：与交叉轴的终点对齐 - center：与交叉轴的中点对齐 - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 - space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 align-self - auto：默认值 - flex-start | flex-end | center | baseline | stretch：同align-items属性 补充 order：可定义元素的排列顺序，默认为0，可为负数 flex-grow：元素放大比例，默认为0 flex-shrink：元素缩小比例，默认为0 flex: none | [ <'flex-grow：元素放大比例'> <'flex-shrink：元素缩小比例'>? || <'flex-basis'：元素占据的主轴空间> ]

网格布局示例

• 相关CSS属性

display: grid：指定容器采用网格布局 display: inline-grid：指定行内元素采用网格布局 grid-template-columns：定义了列的宽度 - repeat（x,xxx）定义重复的值 - auto-fill 根据定义的宽度自动填充 - fr 定义片段 - minmax 最大值最小值设置 - auto 自适应宽度 - [] 括号指定网格名称，日后引用可直接引用名称 grid-template-rows：属性定义每一行的行高 - repeat（x,xxx）定义重复的值 - auto-fill 根据定义的宽度自动填充 - fr 定义片段 - minmax 最大值最小值设置 - auto 自适应宽度 - [] 括号指定网格名称，日后引用可直接引用名称 grid-row-gap：行间距设置 grid-column-gap：列间距设置 grid-template-areas：定义区域名称 例：grid-template-areas：'1 2 3' '6 5 4' '7 8 9'; grid-auto-flow：设置元素放置顺序 - column：先列后行 - row：先行后列 - row dense && column dense：指定元素位置以后，剩下的元素自动放置，尽量不要出现空格 justify-items：设置单元格内容的水平位置 - stretch：默认值，自适应单元格的整个宽度 - start：对齐单元格的起始边缘 - end：对齐单元格的结束边缘 - center：单元格内部居中 align-items：设置单元格内容的垂直位置 - stretch：默认值，自适应单元格的整个宽度 - start：对齐单元格的起始边缘 - end：对齐单元格的结束边缘 - center：单元格内部居中 place-items: <align-items：start | end | center | stretch> <justify-itemsstart | end | center | stretch> justify-items与align-items合并写法 justify-content：同flex相似 align-content：同flex相似 place-content：justify-content与align-content合并写法 grid-auto-columns与grid-auto-rows用来设置浏览器自动创建的多余网格的列宽和行高 grid-column-start：设置元素左边框所在的垂直网格线，可使用span合并单元格 grid-column-end：设置元素右边框所在的垂直网格线，可使用span合并单元格 grid-row-start：设置元素上边框所在的水平网格线，可使用span合并单元格 grid-row-end：设置元素下边框所在的水平网格线，可使用span合并单元格 justify-self属性同justify-items属性的用法完全一致，作用于单个项目 align-self属性同align-items属性的用法完全一致，作用于单个项目