CSS布局 分类

Flex 布局

基本概念

设置 display: flex 或者 display: inline-flex 的元素称为 Flex 容器，容器中的子元素称为 Flex 项目。

display: flex：保持元素块状特性，宽度默认 100%，不和内联元素一行显示。
display： inline-flex：inline-flex 容器为 inline 特性，因此可以和图片文字一行显示。

注意：设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。

Mr.LRH大约 7 分钟

Grid 布局

基本概念

设置 display: grid 或者 display: inline-grid 的元素称为 Grid 容器，容器内部采用网格定位的子元素称为 Grid 项目。

display: grid：保持元素块状特性，宽度默认 100%，不和内联元素一行显示。
display: inline-grid：inline-grid 容器为 inline 特性，因此可以和图片文字一行显示。
display: subgrid：如果网格容器本身就是一个嵌套网格，可以使用该属性来表示从它的父节点取得它的行/列的大小，而不是指定它自己的大小。

Mr.LRH大约 10 分钟

全屏布局

position

Flex

Grid

Mr.LRH大约 2 分钟

多列布局

两列布局

左列定宽，右列自适应

float + margin

float + margin(fix)

float + overflow

优点：代码简单，容易理解，无需关注定宽的宽度，利用 BFC 达到自适应效果
缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持 IE6

position

Flex

Grid

table

优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
缺点：margin 失效；设置间隔比较麻烦；不支持 IE8-

Mr.LRH大约 18 分钟

栅格布局

/*生成栅格系统*/

@media screen and (max-width: 768px) {
  .generate-columns(12); /*此处设置生成列数*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

@media screen and (min-width: 768px) {
  .generate-columns(12); /*此处设置生成列数*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

div[class^='column-xs-'] {
  float: left;
}

div[class^='column-sm-'] {
  float: left;
}

Mr.LRH小于 1 分钟

水平垂直居中布局

水平居中

对于水平居中，应先考虑，哪些元素有自带的居中效果。 text-align:center 针对行内内容，必须将子元素设置为 display: inline; 或者 display: inline-block;
其次就是考虑能不能用 margin: 0 auto;
实在不行就是使用绝对定位实现
移动端能用 flex ，简单方便，灵活并且功能强大

单行文本/行内元素/行内块级元素

Mr.LRH大约 18 分钟

自适应布局

注意事项

使用 IE 盒模型 box-sizing: border-box;
不固定宽高，使用百分比、 auto 或 calc()
使用 @media 查询，针对不同媒体类型定义不同的样式
使用 <meta> 标签对 viewport （可视区域）进行控制
选择布局方式
- 在浏览器支持的情况下，页面大框架推荐使用 Grid 布局，局部布局推荐使用 Flex 布局
- float 与 inline-block 浏览器支持好，但是各有缺点

Mr.LRH大约 1 分钟

Sticky Footer

如果页面内容不足够长时，页脚固定在浏览器窗口的底部。
如果页面内容足够长时，页脚固定在页面的最底部。但如果页面内容不够长，置底的页脚就会保持在浏览器窗口底部。

将内容部分的底部外边距设为负数

把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。

<body>
  <div class="wrapper">
    content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }

  .wrapper {
    min-height: 100%;
    margin-bottom: -50px; /* 等于footer的高度 */
  }

  .footer,
  .push {
    height: 50px;
  }
</style>

Mr.LRH大约 2 分钟