CSS-常见布局介绍

浮动布局

浮动布局示例

相关CSS属性

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

浮动的缺点

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

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

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

绝对定位布局

绝对定位布局示例

相关CSS属性

position - absolute：生成绝对定位的元素

- fixed：生成绝对定位的元素

- relative：生成相对定位的元素

- static：默认值

- inherit：规定应该从父元素继承 position 属性的值

注意事项

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

flexBox弹性布局

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 | [ ? || ]

网格布局

网格布局示例

相关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-auto-flow：设置元素放置顺序

- column：先列后行

- row：先行后列

- row dense && column dense：指定元素位置以后，剩下的元素自动放置，尽量不要出现空格

justify-items：设置单元格内容的水平位置

- stretch：默认值，自适应单元格的整个宽度

- start：对齐单元格的起始边缘

- end：对齐单元格的结束边缘

- center：单元格内部居中

align-items：设置单元格内容的垂直位置

- stretch：默认值，自适应单元格的整个宽度

- start：对齐单元格的起始边缘

- end：对齐单元格的结束边缘

- center：单元格内部居中

place-items:

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属性的用法完全一致，作用于单个项目