CSS布局

1、正常布局流

浏览器默认的布局方式：块级盒子、内联盒子；没有采用CSS改变布局规则时。

2、display:flex弹性盒子;更多详见弹性盒子博文；

弹性盒子是一种按行或按列布局元素的排列方法，元素可以膨胀以填充额外的空间，元素可以缩小以适应更小的空间；----即元素具有自适应性，可以随着父元素的大小变化而变化

　　为什么采用弹性盒子？

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

以下简单的布局需求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

　　如何起作用？

　　设置了display:flex的父元素，是一个flex容器，容器内的元素被称为柔性的盒子（flex项）

　　主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。

　　交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。

3、display:grid;网格

4、浮动布局:

浮动创建多列布局，以及实现文字环绕图片。

面临清除浮动的问题；

5、定位--position

6、多列布局容器----multicol

• 通过以下两个属性开启容器

1. column-count:3;将创建指定数量的列,创建的这些列具有弹性的宽度
2. column-width:200px;浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。

• 给多列设定样式------无法给单独的列设定样式----设置的是所有列

1. column-gap:20px;设定列之间的间隙
2. column-rule:2px solid color======与border一样的属性

• 多列布局容器容易出现内容折断的问题，这时需要通过属性：page-break-inside:avoid;解决这个问题

7、响应式布局

　　允许Web页面适应不同的屏幕宽度等因素的布局方式；

　　响应式布局方式

1. 多列布局容器，弹性盒子、网格默认是响应式的

• 视口元标签

  <meta name="viewport" content="width=device-width,initial-scale=1">
  

  　　告诉移动浏览器，它应该将视口宽度设置为设备的宽度，将文档大小放大到预期大小得100%；

　　　　　通过设定width=device-width，你用设备的实际宽度覆写了苹果默认的width=960px，然后你的媒介查询就会像预期那样生效。

　　　　　所以你应该在你的文档头部总是包含上面那行HTML。

　　   2、媒体查询和液态图像max-width,min-width等;点击这里查看更多媒体查询的信息

• 响应式图像：设置max-width:800px
• 响应式排版，使文字在足够大的屏幕设备时，字体变得更大

  html { 
    font-size: 1em; 
  } 
  
  h1 { 
    font-size: 2rem; 
  } 
  
  @media (min-width: 1200px) { 
    h1 {
      font-size: 4rem; 
    }
  }
  

  3、使用视口单位实现响应式排版

• 但是永远不要只使用viewport单位进行设定文本，因为这样会导致字体只会跟随着视口大小变化，用户失去了操作权