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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190811A0M0DK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券