CSS-CSS布局

CSS布局

v1&v2

常见布局（PC）

• 固定宽度布局
• 弹性（fluid）布局
• 响应式布局 —— 多终端（PC、Pad、Phone）

布局实例

• 单栏布局

  

  单栏布局
  • 一栏布局 demo
  • 一栏布局(通栏) demo

• 内部元素水平居中

  

  内部元素水平居中
  • 一块居中demo
  • 多块居中demo
  • 多块居中(无间隙)
    • 用flex demo
    • 不用flex demo

• 双列布局

  • 一列宽度固定，一列宽度自适应
  • demo
    
    

    双列布局.png

• 三列布局

  • 两侧两列固定宽度，中间列自适应宽度
  • demo
    
    

    三列布局.png

v3

css学习方法(CRM大法)

• copy from mdn/CSS Tricks
• 到jsbin运行(Run in jsbin)
• 在开发者工具中调试(Modify in Chrome Developer ToolS)

学习心态

• CSS属性太多，我们无法一次记全，只能一个一个记住(即看一个记一个)。
• 每遇到一个陌生的CSS属性，就去记住它
• 如果真的要看所有属性，可以搜索MDN CSS

一些属性

• transparent:background-color的值，表示透明的

一些技巧

• inline-block尽量不要用

• 只要用了浮动，那么一定要清除浮动

• 只要用了浮动，那么一定要清除浮动

v5

• normal flow(正常流，也叫文档流)，即块级元素从上到下排列，内联元素从左到右排列

Flex布局

一种全新的布局方式-Flex布局

• 特点
  1. 块级布局侧重于垂直方向，行内布局侧重于水平方向，flex布局是与方向无关的
  2. flex布局可以实现空间自动分配，自动对齐(flexible:弹性，灵活)
  3. flex适用于简单的线性布局，更复杂的布局应交给grid布局(还没发布)
• 基本概念

  • 共10个知识点，具体见下图

    
    
    

    flex布局基本概念.PNG

• Flex Container属性
  • 如下图所示，主要记四个(1 2 4 5)

flex container的属性.png

• Flex iteam属性

  • 如下图所示，主要记（1,2,3,5,6）

    
    
    

    Flex item属性.png

• 阮一峰博客
  • flex布局语法
  • flex布局实例

圣杯布局和双飞翼布局现在不重要