盖房子要先搭框架，写网页要先布局

布局分类

  • 固定宽度布局，一般为960，1000， 1024
  • 不固定宽度布局，靠文档流布局，文档流是自适应的，不需要增加格外样式
  • 响应式布局：在PC上固定宽度，手机上不固定宽度

布局方式

  • float布局：兼容IE9及以下，必要时使用负margin
  • flex布局：不兼容IE9及以下，必要时使用负margin
  • grid布局：兼容良好

float布局

  • 步骤：
    • 在子元素上加 float（一般为 float: left）和width
    • 在父元素上加 .clearfix
  • 若子元素浮动，父元素均需清除浮动，清除浮动样式写法：
  1. .clearfix::after {
  2.     content: '';
  3.     display: block;
  4.     clear: both;
  5. }
  • 父元素只设置width，不设置height，清除浮动后，高度由子元素决定
  • 一般最后一个div不设置width，使其自适应；不需要做响应式，因为手机上没有IE，float布局主要用来做IE页面
  • 需要计算宽度，不灵活
  • float常用布局
    • 两栏布局（顶部条）：一般用作header，两个子元素分别 float:left、float:right，父元素clearfix，均不需设width
    • 三栏布局（内容区），四栏布局（导航）：子元素都 float:left，父元素clearfix
    • 平均布局（产品展示区）: 在展示栏与父元素之间包一个div，设置负margin
      加上 header 和 footer 即可制作所有PC页面

flex布局

查看教程：CSS TRICKS
玩游戏学习：青蛙不会跳

  • flex属性分为container与items
    CSS布局 - 图1

  • 将一个元素变成flex容器：

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

  • container 的属性：

    • 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 | space-evenly;
      CSS布局 - 图2
    • align-items: flex-start | flex-end | center | stretch;
      CSS布局 - 图3
    • align-content: flex-start | flex-end | center | stretch| space-between | space-around;
      CSS布局 - 图4
  • items 的属性：
    • order
    • flex-grow
    • flex-shrink: 默认为1，0为防止变瘦
    • align-self: 设置单个item的align-items
  • flex常用布局
    • 两栏布局（顶部条）：
    • 三栏布局（内容区），四栏布局（导航）：
    • 平均布局（产品展示区）:

Grid布局

查看教程：CSS TRICKS
玩游戏学习：我爱种萝卜

  • 一维布局用flex，二维布局用Grid
  • Grid属性分为container与items
  • 将一个元素变为Grid容器：
  1. .container {
  2.   display: grid | inline-grid;
  3. }

  • container 的属性：

    • grid-template-columns & grid-template-rows：设置格子的行和列的个数与占用空间大小

      1. .container {
      2. grid-template-columns: 40px 50px auto 50px 40px; 
      3. grid-template-rows: 25% 100px auto;
      4. /* 还可以设置 1fr, 2fr... : The free space is calculated after any non-flexible items */
      5. }

      CSS布局 - 图5

    • grid-template-areas: 设置方格名字 ```css .item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; }

.container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: “header header header header” “main main . sidebar” “footer footer footer footer”; }

  1. ![](https://cdn.nlark.com/yuque/0/2020/png/2829118/1605588607743-7e8661da-1327-4546-a031-f78f1d1ff983.png#crop=0&crop=0&crop=1&crop=1&height=214&id=h0zw1&originHeight=326&originWidth=458&originalType=binary&ratio=1&rotation=0&showTitle=false&size=0&status=done&style=none&title=&width=300)
  3.    - gap：column-gap | row-gap<br />好累不想写了
  5. <a name="a15d9798"></a>
  6. ### 举个栗子
  8. 分别用三种布局方式完成下面的猪猪展示区（平均布局）<br />![](https://cdn.nlark.com/yuque/0/2020/png/2829118/1605588607507-0b9e07b6-533f-429d-a874-82d984a4a55f.png#crop=0&crop=0&crop=1&crop=1&height=347&id=N5UL6&originHeight=530&originWidth=794&originalType=binary&ratio=1&rotation=0&showTitle=false&size=0&status=done&style=none&title=&width=520)
  10. - float布局
  12. ```html
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.   <meta charset="utf-8">
  17.   <title>baby image</title>
  18.   <style>
  19.     .image-list {
  20.       width: 620px;
  21.       border: 1px solid blue;
  22.     }
  23.     .image-wrapper {
  24.       margin-right: -10px; /* 负margin */
  25.     } 
  26.     .image {
  27.       width: 200px;
  28.       height: 200px;
  29.       float: left;
  30.       margin-right: 10px;
  31.       margin-top: 5px;
  32.       background-color: pink;
  33.     }
  34.     .clearfix::after {
  35.       content: '';
  36.       display: block;
  37.       clear: both;
  38.     }
  39.   </style>
  40. </head>
  41. <body>
  42.   <div class="image-list">
  43.     <div class="image-wrapper clearfix">
  44.       <div class="image"> 猪胖胖 </div>
  45.       <div class="image"> 猪萌萌 </div>
  46.       <div class="image"> 猪妮妮 </div>
  47.       <div class="image"> 猪丫丫 </div>
  48.       <div class="image"> 猪崽崽 </div>
  49.       <div class="image"> 猪宝宝 </div>
  50.     </div>
  51.   </div>
  52. </body>
  53. </html>
  • flex布局
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>baby image</title>
  6.   <style>
  7.     .image-list {
  8.       width: 620px;
  9.       border: 1px solid blue;
  10.     }
  11.     .image-wrapper {
  12.       display: flex;
  13.       flex-wrap: wrap;
  14.       margin-right: -10px; 
  15.     }
  16.     .image {
  17.       width: 200px;
  18.       height: 200px;
  19.       margin-right: 10px;
  20.       margin-top: 5px;
  21.       background-color: pink;
  22.     }
  23.   </style>
  24. </head>
  25. <body>
  26.   <div class="image-list">
  27.     <div class="image-wrapper">
  28.       <div class="image"> 猪胖胖 </div>
  29.       <div class="image"> 猪萌萌 </div>
  30.       <div class="image"> 猪妮妮 </div>
  31.       <div class="image"> 猪丫丫 </div>
  32.       <div class="image"> 猪崽崽 </div>
  33.       <div class="image"> 猪宝宝 </div>
  34.     </div>
  35.   </div>
  36. </body>
  37. </html>
  • Grid布局：使用Grid实现的布局第一行格子与父元素的边框之间没有空隙，因为不需要设margin-top
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>baby image</title>
  6.   <style>
  7.     .image-list {
  8.       display: inline-grid;
  9.       border: 1px solid blue;
  10.       grid-template-rows: repeat(2,200px); 
  11.       grid-template-columns: repeat(3,200px);
  12.       grid-template-areas:
  13.         "zhu-pp zhu-mm zhu-nn"
  14.         "zhu-yy zhu-zz zhu-bb"; 
  15.       row-gap: 10px;
  16.       column-gap: 10px;
  18.     }
  19.     .image {
  20.       background-color: pink;
  21.     }
  22.       .image-list > .image:first-child{
  23.         grid-area: zhu-pp;
  24.       }
  25.       .image-list > .image:nth-child(2){
  26.         grid-area: zhu-mm;
  27.       }
  28.       .image-list > .image:nth-child(3){
  29.         grid-area: zhu-nn;
  30.       }
  31.       .image-list > .image:nth-child(4){
  32.         grid-area: zhu-yy;
  33.       }
  34.       .image-list > .image:nth-child(5){
  35.         grid-area: zhu-zz;
  36.       }
  37.       .image-list > .image:nth-child(6){
  38.         grid-area: zhu-bb;
  39.       }
  41.   </style>
  42. </head>
  43. <body>
  44.   <div class="image-list">
  45.     <div class="image"> 猪胖胖 </div>
  46.     <div class="image"> 猪萌萌 </div>
  47.     <div class="image"> 猪妮妮 </div>
  48.     <div class="image"> 猪丫丫 </div>
  49.     <div class="image"> 猪崽崽 </div>
  50.     <div class="image"> 猪宝宝 </div>
  51.   </div>
  52. </body>
  53. </html>

画图软件

Balsamiq,Figma,墨刀，Adobe XD

布局小技巧

  1. 使用border-box，border会占用位置，干扰布局，可把border改成outline,不占用位置
  1. div {
  2.     outline:1px solid black;
  3. }
  1. 设置自动居中：
  1. div {    
  2.     margin: 0 auto;
  3. }

最好设置为

  1. div {
  2.     margin-left: auto;
  3.     margin-right: auto;
  4. }

因为如果其他地方设置了margin-top就不会被覆盖。由于CSS是层叠样式表，因此写CSS的原则之一为：不需要设置的就不设置

  1. 尽量不要把宽度写死，如 width: 100px;
    最好写灵活一点： width: 10% | 10vw; max-width：100px; min-width: 100px