前端菜鸟打怪路：CSS布局（五）

月石子君
281 阅读3分钟

CSS布局

布局分类

  • 固定宽度布局，一般宽度为960 / 1000 / 1024 px ，pc为主
  • 不固定宽度布局，靠文档流的原理来布局，手机端为主
  • 响应式布局
    • PC上固定宽度+手机上不固定宽度=混合布局

float布局

  • 步骤
    1. 在子元素上加
    float: left
width:XX PX
    1. 在父元素上加
    .clearfix:after{
content:'' ;
display:block;
clear:both;
}

注意

  1. 有经验者会留一些空间或者最后一个不设width
  2. 不需要做响应式，因为手机上没有IE,而这个布局是 专门为IE准备的
  3. 手机页面绝对不可用float布局
  4. float程序员自己计算宽度，用针对IE

使用IE中的小bug修复

  • IE 6/7存在双倍margin bug,解决办法有两个
    • 是将错就错，针对IE 6/7把margin减半
    • 二是神来一笔，再加一个 display: inline-block

布局练习

  1. 用float做两栏布局（如顶部条）
  2. 用float做三栏布局（如内容区）
  3. 用float做四栏布局（如导航）
  4. 用float做平均布局（如产品展示区）

flex布局

  • 让一个元素变成flex容器
.container {
 display: flex;
}

container样式

改变items流动方向（主轴）

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

改变折行

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

主轴对齐方式

  • 默认主轴是横轴,除非你改变了flex-direction方向

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

次轴对齐

  • 默认次轴是纵轴

.container {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

多行内容

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

item属性

item中加order

  • 默认情况下，弹性项目按源顺序排列。但是，该order属性控制它们在flex容器中出现的顺序。
.item {
  order: 5; 
}

item中加flex-grow

  • 如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍,负数无效。
.item {
  flex-grow: 4; /* default 0 */
}

item中加flex-shrink

  • flex-shrink控制如何变瘦，一般写flex-shrink: 0防止变瘦，默认是1。
.item {
  flex-shrink: 0;
}

flex-basis

  • flex-basis控制基准宽度 默认是auto
.item {
  flex-basis: auto; 
}

flex缩写

  • flex: flex-grow flex-shrink flex-basis缩写，空格隔开

aligrvself 定制 align-items

  • 这允许align-items为单个弹性项目覆盖默认对齐方式（或由指定的对齐方式）。

flex布局重点属性

  • display: flex
  • flex-direction: row/ co山mn
  • flex-wrap: wrap
  • just-content: center/ space-between
  • aligrritems: center
  • 工作中基本只用这些

布局练习

  1. 用flex做两栏布局
  2. 用flex做三栏布局
  3. 用flex做四栏布局
  4. 用flex做平均布局
  5. 用flex组合使用，做更复杂的布局

注意

  • 永远不要把width和height写死，除非特殊说明
  • 尽量用 min-width / max-width / min-height / max-height来不写死
  • flex可以基本满足所有需求
  • flex和margin-xxx: auto配合有意外的效果

Grid布局(最新浏览器)

成为grid布局

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

grid布局分行和列

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

grid行和列可以分别取名

.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];
}

grid的item可以根据取名设置范围

•item-a { 
grid-column-stari: 2
grid-column-end: five; 
grid-row-start: rowl-start;
grid-row-end: 3;
}

grid中的份--fr

.container {
  grid-template-columns: 1fr 1fr 1fr; 或
  grid-template-columns: 1fr 50px 1fr 1fr;

}

grid中利用grid-template-areas来画框架

  .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";}

grid中控制块与块之间的间隙

.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px; 
column-gap: 10px;
row-gap: 15px;
}

资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程

avatar
文章
阅读
粉丝