1.布局是什么

就是把页面分成一块一块，按左中右，上中下等排列

1.1.布局的分类

1.1.1.固定宽度布局

一般宽度为960/1000/1024px

1.1.2.不固定宽度布局

主要靠文档流的原理布局

1.1.3.响应式布局

意思就是PC上固定宽度，手机上不固定宽度（也就是一种混合布局）

1.2.布局的两种方式

1.2.1.从大到小

  • 先定下大局
  • 再完善每个部分的小布局

  • 适用与老手，因为熟练有大局观

    1.2.2.从小到大

  • 先完成小布局

  • 再组合成大布局

  • 适用于新人，因为小的简单

    2.布局需要用到哪些属性

    image.png

    2.1. float 布局

    float 示例代码

    2.1.1.步骤

  • 子元素上加 float:left 和 width

  • 父元素上加.clearfix

    1. .clearfix::after{
    2. content:'';
    3. display:block;
    4. clear:both;
    5. }

    简单示例

    2.1.2.经验（没有为什么，都是前辈的经验）

  • 有经验者会留一些空间或者最后一个不设 width而是设一个max-width

  • 不需要做响应式，因为手机上没有IE,而这个布局是专门给IE准备的
  • IE 6/7 存在双倍 margin 的 bug，解决办法两个：

① 将错就错，针对 IE 6/7 把 margin 减半
image.png
其他浏览器只会识别图中第十五行，而 IE 6/7 会识别第十六行，在前面加 _ 或者 * 都可以
②神来一笔，再加一个 display:inline block （即在 margin 后面再加这么一句即可）

2.1.3.实践

2.1.3.1.不同的布局

  • 用 float 做两栏布局（如顶部条）
  • 用 float 做三栏布局（如内容区）
  • 用 float 做四栏布局（如导航）
  • 用 float 做平均布局（如产品展示区）（ float 里最难的布局）

曾经的淘宝的前端发明了双飞翼布局，不用学，已过时

2.1.3.2.经验

  • 加上头尾（header 和 footer），即可满足所有 PC 页面需求
  • float 要程序员自己计算宽度，不灵活，手机页面不用 float,用来对付 IE 足以

  • 图片下面有多余的背景色时加vertical-align: top;就会消失 

    1.   ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1592190450032-26bf8b5a-0cd1-4094-a1c0-e0d0c3a5dea9.png#align=left&display=inline&height=88&margin=%5Bobject%20Object%5D&name=image.png&originHeight=88&originWidth=296&size=7832&status=done&style=none&width=296)

  • 设置字体高度示例 line-height:32px;

    1.    ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1592191165083-b33cfb86-0ddd-4b4e-a31d-205f3e29e164.png#align=left&display=inline&height=107&margin=%5Bobject%20Object%5D&name=image.png&originHeight=107&originWidth=246&size=7671&status=done&style=none&width=246)

  • 当 border 影响布局，占了2px时可以把 border 换成 outline

  • 前提是个块级元素，内容要居中，左右 margin 都设置 auto 即可（提示不要写成 margin: 0 auto; 这个表示上下 margin 为0 左右为 auto ，我们只需要左右 auto 即可，不要写多余的，因为也不知道别的地方 margin 是否为 0 ）

    1.   ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1592193384720-e332e894-3e94-483f-a258-4f67c8163118.png#align=left&display=inline&height=100&margin=%5Bobject%20Object%5D&name=image.png&originHeight=100&originWidth=321&size=7727&status=done&style=none&width=321)

  • 必要时加负 margin

image.png
总的 width=800px，图片 width=191px，间距 width=12px，这时第四张图右边也会有个12px的间距所以导致加起来的 width=812px，这时需要用到 -margin
①先在imagelist 下加个 div 命名为 x 包裹住image（注意加了之后 x 为image的父元素，clearfix 需要换到 x 上）

  1. <div class="imagelist">
  2.     <div class="x clearfix">
  3.       <div class="image"></div>
  4.       <div class="image"></div>
  5.       <div class="image"></div>
  6.       <div class="image"></div>
  7.       <div class="image"></div>
  8.       <div class="image"></div>
  9.       <div class="image"></div>
  10.     </div>
  11. </div>

②.x 里加个 -margin
image.png
结果如下图
image.png

2.2.flex 布局

  • 教程 （来自 CSS Tricks）

  • 完成 Flex青蛙游戏

    flex 示例代码

    2.2.1.容器 container

    image.png

    2.2.2. flex container 有哪些样式

    2.2.2.1.让一个元素变成 flex 容器.container{ display: flex;/ or inline-flex/ }

    image.png

    2.2.2.2.改变 items 流动方向（主轴）

    image.png

    2.2.2.3.改变折行

    image.png

    2.2.2.4.主轴对齐方式

    image.png

    2.2.2.5.次轴对齐

    image.png

    2.2.2.6.多行内容

    image.png

    2.2.3.flex item 有哪些属性

    2.2.3.1. item上面加 order（补充了个选择器内容）

    补充个选择器（第一个用first，中间用 nth(序号)，最后一个用 last 并且冒号左右不能有空格）

    1. item:first-child{order:1}
    2. item:nth-child(2){order:4}
    3. item:nth-child(3){order:2}
    4. item:last-child{order:3}

    image.png

    2.2.3.2. item上面加 flex-grow

    控制自己如何长胖
    image.png

    2.2.3.3. item上面加 flex-shrink

    控制自己如何变瘦
    一般写 flex-shrink:0 防止变瘦，默认是1

    2.2.3.4. item上面加 flex-basis

    控制基准宽度，默认为auto

    2.2.3.5.缩写 空格隔开

    1. flex:flex-grow flex-shrink flex-basis
    2. 其他缩写：flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow

    2.2.3.6.align-self 定制 align-items（用的很少）

    image.png

    2.2.3.7.重点需要记住的

    image.png

    2.2.3.8.经验

  • 永远不要把 width 和 height 写死，除非特殊说明

  • 用 min-width / max-width / min-height / max-height
  • flex 和 margin-xxx:auto 配合有意外效果

  • 前端戒律：必须先给设计稿；没有设计稿就自己画，老板同意再写代码

    2.2.3.9.什么叫写死

  • 写死

width：200px

  • 不写死（特点：不使用 px ，或者加前缀 min/max）

width：50%
max-width:100px
width:30vw
min-width:80%

2.2.3.10.常用草图软件

  • Balsamiq
  • Figma
  • 墨刀

  • Adobe XD

    2.3.Grid 布局

  • 功能最强大的布局，二维布局用 Grid ，一维布局用 Flex

  • 以下内容参考 CSS Tricks
  • A Complete Guide to Grid
  • Grid 也分 container 和 items

  • Grid Garden 游戏

    2.3.1.container

    2.3.1.1.成为 container

    1. .container{
    2. display: grid | inline-grid;
    3. }

    2.3.1.2.行和列

    1. .container{
    2. grid-template-columns: 40px 50px auto 50px 40px;
    3. grid-template-rows: 25% 100px auto;
    4. }

    image.png

    2.3.1.3.还可以给每条线取名字

    image.png
    image.png

    2.3.1.4.取名的作用-item 可以设置范围

    1. .item-a{
    2. grid-column-start: 2;
    3. grid-column-end: five;
    4. grid-row-start: row1-start;
    5. grid-row-end: 3;
    6. }

    根据以上内容写个简单的示例

    2.3.1.5.fr-free space 巧记：份

    image.png
    image.png
    简单示例：用到了 fr 和空隙 grap

    2.3.1.6.分区 grid-template-areas （适合衣柜式布局）

    示例
    image.png
    image.png
    示例2

    2.3.1.7.空隙 gap

    image.png

    2.3.1.8.缩写

  • grid-column: 2 / 4;相当于grid-column-start:2;grid-column-end:4;

  • grid-row: 2 / 4;相当于grid-row-start:2;grid-row-end:4;
  • grid-area属性接受4个由’/‘分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

  • grid-template是grid-template-rows和grid-template-columns的缩写形式。

    1. 比如说，grid-template: 50% 50% / 200px;将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。

  • 根据网格的开始和结束位置来定义一个网格项，你也可以用span关键词来指定你所要跨越的宽度。请注意span只能是正值。

比如：grid-column-start: 2;grid-column-end: span 2;相当于从第二列开始结束于第四列。

  • 另外 grid-column-end:可以为负数，倒着数

资料来源：饥人谷