CSS布局--超详解版

不知名网友小H
882 阅读3分钟

CSS布局

目录

  1. 布局分类
  2. 布局思路
  3. 布局需要用到哪些属性
  4. float布局
  5. flex布局
  6. grid布局（二维
  7. 平均布局

一、布局分类

  • 固定宽度布局：一般宽度设置为960、1000、1024px
  • 不固定宽度布局：依靠文档流的原理来布局
  • 响应式布局：PC上一种布局样式，手机上又是另外一种布局样式

二、布局思路

  • 从大到小(老手推荐)

    1. 先定下大局
    2. 完善每个部分的小布局

  • 从小到大(新人推荐)

    1. 先完成小布局
    2. 组合成大布局

三、布局需要使用那些属性

  • 一图流 一图流

四、float布局

  • 步骤
    1. 子元素上加float:left|right 和 width
    2. 在父元素上加.clearfix类名
      .clearfix::after {
      content:'';
      display:block;
      clear:both;
  }
  • 经验
    1. 留一些空间或最后一个不设width
    2. 不需要做响应式，手机上没有IE
    3. 手机页面不用float
    4. IE 6/7存在双倍margin BUG
        解决方案：

    1、将错就错，针对IE 6/7将margin减半
    2、再加一句：display:inline-block

五、flex布局

  • flex要素

    1. container容器 (一般做父元素)
    2. items （container的直接子元素）
    3. 弹性盒模型

  • 让一个元素变成flex容器

      .container {
    display:flex | inline-flex ;
  }

  • 代码演示用法

      <style>
    .container {
      display:flex;
      border:1px solid green;
    }
    .item {
      width:50px;
      height:50px;
      border:1px solid red;
    } 
  </style>
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
  </div>

  • container的各种样式

    1. 改变items流动方向(主轴)

        .container {
    flex-direction: row 默认值 | row-reverse | column | column-reverse
  }

    2. 主轴对齐方式

       .container {
   justify-content: flex-start 默认值 | flex-end | center | space-between | space-around | space-evenly
 }

    3. 次轴对齐方式

       .container {
   align-items:stretch 默认值 | flex-start | flex-end | center | baseline
 }

    4. 改变是否折行

       .container {
   flex-wrap: nowrap 默认值 | wrap | wrap-reverse
 }

    5. 多行内容

       .container {
   align-content: flex-start 默认值 | flex-end | center | stretch | space-between | space-around
 }

  • items的各种样式

    1. order：默认order为0，加上order后，items会按照order的大小重新排列，有负值（-1排在0前面） 
       .item:first-child {
   order:5;
 } 
 .item:nth-child(2) {
   order:4;
 }
  .item:nth-child(3) {
   order:2;
 }
  .item:nth-child(4) {
   order:1;
 }
  .item:last-child {
   order:-1;
 }
    2. flex-grow：控制自己（item）占多大面积(按比例分配)，默认flew-grow:0 
       .item:first-child {
   flex-grow:1;
 }
 .item:nth-child(2) {
   flex-grow:2;
 }
 .item:nth-child(3) {
   flex-grow:1;
 }
    3. flex-shrink：控制自己如何变瘦（item盒子的宽和高） 
       .item:first-child {
     flex-shrink:1 默认值;
 }
      • 1、什么情况下有用？
      • 答：item给定width以后，页面拉小时，控制item变瘦的那个小的更夸张。
      • 2、一般写flex-shrink:0 防止变瘦
    4. flex-basis: 控制基准宽度 
       .item {
   flex-basis: auto 默认值;
 }
    5. align-self: 控制某个item特立独行 
       .item:nth-child(3) {
   align-self: flex-end;
 }
    6. 缩写语句：flex:flex-grow flex-shrink flex-basis

六、grid布局

  • grid要素
    1. container
    2. items
  • 让一个元素成为grid容器 
      .container {
    display:grid | inline-grid;
  }
  • 代码演示用法 
      <style>
    .container {
      display:grid;
      border:1px solid green;
    }
    .a,.b,.c,.d,.e {
      border:1px solid red;
    }
  </style>
  <div class=".container">
    <div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
    <div class='d'></div>
    <div class='e'></div>
    <div class='f'></div>
  </div>
    1. 设置行和列 
       .container {
   grid-template-columns:40px 50px auto 50px 40px;
   grid-template-rows:25% 100px auto;
 }
 /* 表示创建了3行4列的矩阵形式布局 */
    2. 可以给每条线取名字 
       .container {
   grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
   grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
 }
    3. item可以设置范围(以行数和列数为基准,默认索引从1开始) 
       .a {
   grid-column-start:2;
   grid-column-end:five;
   grid-row-start:row1-start;
   grid-row-end:3;
 }
    4. fr 单位--free space 按比例分配width和height
       .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border:1px solid green;
    width: 300px;
    height: 200px;
    margin: 100px auto;
  }
  .a,.b,.c,.d,.e,.f{
    border: 1px solid red;
  }
    5. gap -- 搭配平均布局使用 
     .container {
   grid-gap: 12px; | 全局方向
   grid-column-gap: 12px; | 列方向上
   grid-row-gap: 12px; | 行方向上
 }
    1. grid-template-areas -- 分区 
       .container {
   display:grid;
   grid-template-columns:50px 50px 50px 50px;
   grid-template-rows:auto;
   grid-template-areas:
   "header header header"
   "main main . siderbar"
   "footer footer footer footer";
 }
 .a {
   grid-area:header;
 }
 .a {
   grid-area:main;
 }
 .a {
   grid-area:sidebar;
 }
 .a {
   grid-area:footer;
 }

更多内容

七、平均布局

  <div class="container clearfix">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
  </div>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .container {
      width:400px;
      border:1px solid green;
      margin-right:-20px;
    }

    .a {
      border:1px solid red;
      float:left;
      width:120px;
      height:120px;
      margin-right:20px;
      margin-bottom:15px;
    }
  </style>
avatar
文章
阅读
粉丝