PC 端响应式布局

前言：PC端 电脑显示器的尺寸种类还是很多的，台式电脑和笔记本电脑尺寸相差就更明显，所以响应式布局还是很重要的，甚至是必须要考虑的。

　　　响应式的页面好不好，在后管平台上很明显。因为后管平台，一般是全屏显示。不像官网那样两边有一个安全尺寸。

　　   PC端的宽度相差太大，一般是常用响应式的布局（布局改变了，不仅仅尺寸变化）；而不是像移动端那样，通过rem单位，只是改变了元素的尺寸。

一、栅格系统：（栅格系统是比较好的一种响应式布局，框架已经帮我们处理好了，只要配置下就可以自动实现响应式的布局）

　　1、栅格系内的元素，宽度是不定的。根据不同的尺寸，宽度会改变。使用栅格系统，必须要保证这个元素宽度改变，元素内的结构不变。如下图，

　　　  栅格系统设置的元素A，在屏幕变小时，A的宽度也会变小。A的宽度变小，可能会引起A内的结构发生变化（如换行、溢出），所以要确保元素A内的结构不变，或者A内元素的结构变化的临界尺寸要比栅格系统响应的尺寸更小。即，

　　　　浏览器在不断变小，元素A的尺寸会不断变小，还没到A内结构变化的尺寸。栅格布局就先发生变化了，此时栅格系统变成，上面两个A，下面两个A。

2、栅格系统的元素，如上面的A的宽度是严格根据栅格系统分的尺寸来的。12栏栅格系统，那么上面的每个元素A就是3栏。元素A之间的距离是通过padding值撑出来的，元素A的width区域，才是内部我们需要放元素显示的结构。

　　下面以 Ant Design 的  24 栅格系统进行说明。下面的Col标签宽度是Row标签的1/4宽度，并且4个Col标签是紧靠着的。如果给他们设置间距，其实是他们的width之间出现了间距。效果上就是我们需要的间距。

    <Row>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
    </Row>

感悟：在有栅格系统的框架，使用栅格布局开发，还是很快的。没有栅格系统的话，自己写一个栅格系统，也不麻烦。或者用下面的方法实现响应式布局。

二、flexd：弹性布局天生就是响应式的，子元素的宽度排不下就会自动换行的。    https://www.jianshu.com/p/a902816692a9  或  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　1、弹性布局中，子元素拥有的空间，和 子元素 本身的空间 是两个概念。就像 书 在盒子中，书可以盒子内的空间任意移动。

　　　   父元素设置了弹性属性，根据设置的情况给每个子元素设置活动的空间（这个空间是透明的，无法看到）。子元素可以在这个空间中，自由移动（比如，排在顶部，或者底部）。

　　2、这里比较难的，父元素分配给每个子元素的活动空间是 怎么 分配的。根据父元素的属性，和子元素自身的大小来定空间。

　　　 a、flex-direction：决定主轴的方向

　　　 b、flex-wrap：如果一条轴线排不下，如何换行。

　　    c、flex-flow：上面两个属性的简写。（可以完全不用管，就当没有这个属性）

　　　d、justify-content：项目在主轴上的对齐方式。

　　    e、align-items：项目在交叉轴上如何对齐。

　　    f、align-content：多根 交叉轴线的对齐方式（即 行与行之间对齐方式）。如果项目只有一根轴线，该属性不起作用。

　　重点：上面的几个属性，设置的子元素的活动空间都是可以直观看到的。那看不到的活动空间是怎么分配的呢。这个看不到的空间，主要还是交叉轴上的空间。父元素一旦设置了，主轴上的空间已经定好了。就是项目在主轴上长度。

　　　　　但是，交叉轴的空间，可以在子元素设置属性。

　　3、CSS3弹性布局实现的6只骰子（不同的角度，不同的实现方法）：https://wow.techbrood.com/fiddle/8177 （6点骰子，分成两组，手动给它换行了） 或 https://www.jianshu.com/p/d4d5830061bd （6点骰子，每3点就会占满一行，自动换行。）

三、float

使用 <div> 元素的网页布局

使用 <table> 元素的网页布局（虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具）

CSS 页面布局总结

 

一、瀑布流：

1、纯CSS实现瀑布流布局 ： https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

2、相等大小，顺序排列的瀑布流：