简介

• 布局：把页面分成一块一块，按左中右、上中下等排列
• 分类：
  • 固定宽度布局：一般宽度为 960 / 1000 / 1024 px
  • 不固定宽度布局：主要靠文档流的原理来布局。（文档流本来就是自适应的，不需要加额外的样式）
  • 响应式布局：一种混合布局，意思就是PC上固定宽度，手机上不固定宽度
• 布局选择：

float布局

浮动布局

步骤：

1. 子元素加上 float:left 和 width
2. 父元素加上 .clearfix

• .clearfix 写法：
  • 在HTML上给父元素命名： class="clearfix"
  • 在CSS上添加样式：

.clearfix:after {
  content:'';
  display:block;
  clear:both;
}

代码实例：

• 认识float： js.jirengu.com/yipipoquki/…
• float布局实践： js.jirengu.com/nuzupisure/…

一些经验：

• 最后一个子元素不设置width， 或者设置max-width
• img 设置max-width
• 不需要做响应式（手机上无IE，这个布局是为IE准备的）
• IE6/IE7存在“双倍”margin bug。（例如写上margin-left:10px;实际 margin-left 是20px。）
  • 两个解决方法：
  • 方法一：加一句：_margin-left:5px;（假设原来设置的是10px）
  • 方法二：加一句：display:inline-block;
• 如果添加图片，加border后图片超过了边框下面，就在img样式上写 vertical-align:top或者vertical-align:middle
• 如果border干扰了布局，可以用outline代替border，outline不占用位置。例如outline: 1px solid red；
• width固定的块级元素居中的方法： 写上margin-left: auto; margin-right: auto;两句。
• 平均布局的关键点：负Margin

flex布局

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
• 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

container的样式

让一个元素变成flex容器：

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

（flex会换行；inline-flex不会换行）

flex-direction（改变intems的流动方向）：

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


row（默认值）：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

flex-wrap（改变折行）：

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

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


nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。（从下向上折）

justify-content（主轴对齐方式）：

• 主轴默认是横轴

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


flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中对齐
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔都相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly：项目与项目，项目与边框的间隔都一样

align-items（次轴对齐方式）：

• 次轴默认是纵轴

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


flex-start：上对齐。
flex-end：下对齐。
center：居中对齐。
stretch（默认值）：等高对齐。
baseline: 项目的第一行文字的基线对齐。

align-content（多行内容分布）：

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


flex-start：向上顶。
flex-end：向下顶。
center：居中。
space-between：上下顶在两端，中间的间隔平均分布。
space-around：间隔都相等。所以，中间间隔比项目与边框的间隔大一倍。
stretch（默认值）：占满整个容器。

item的样式

order（改变item的顺序）：

• 不写order，默认是0
• 数值从小到大排列，可以是负数，可以不连续

.item {
  order: <integer>;
}

flex-grow（改变item的占比）：

• 默认为0，数值越大，占比越大
• 如果项目的flex-grow属性都为1，则它们等分剩余空间。如果一个项目的flex-grow属性分别为1、2、1，则占据的剩余空间将比为1:2:1。

.item {
  flex-grow: <number>;
}

flex-shrink（控制缩小比例）：

• 赋值越大，缩的越多
• flex-shrink：0 防止缩小
• 默认值是1

.item {
  flex-shrink: <number>;
}

flex-basis（控制基准宽度）：

• 默认是auto
• 可以设为跟width或height属性一样的值，则项目将占据固定空间

.item {
  flex-basis: <length> | auto;
}

align-self（使item特立独行）：

• 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
• 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

代码实例：

• 链接：js.jirengu.com/qumedaguta/…

一些经验：

注意：不要把width和height写死，除非特别说明

• 写死：width：10px；
• 不写死：（不用px或者加上前缀）
  • width：50%;
  • min-width:10px; | max-width:10px; | min-height:10px; | max-height:10px;
  • width:10vw;

Grid布局

• 网格布局（Grid布局），它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
• Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
• 采用网格布局的区域，称为容器（container）。容器内部采用网格定位的子元素，称为项目（item）。
  • 注意：项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。

成为容器（container）

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

grid：指定一个容器采用网格布局，容器元素都是块级元素。
inline-grid：指定一个容器采用网格布局，容器元素都是内联元素。

行与列

• 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

grid-template-columns 属性与 grid-template-rows 属性

• 指定了网格布局后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

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

网格线命名

• 划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

• 行和列的交叉区域，称为"单元格"（cell）。

• 下图是一个4x4的网格，共有5根水平网格线和5根垂直网格线。

• 每个网格线都可以命名

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100% [third-line] auto [last-line];
}

• 命名作用：可以使item设置范围

.item-a {
  grid-column-start:line2;
  grid-column-end:five;
  grid-row-start:row1-start;
  grid-row-end:third-line;
}

注：
1.如果只写四句中的其中一句，默认只占一格。
2.写column的两句或者row的两句，即只设置行或者列，占多格。
3.可简写：
.item-a {
  grid-column:line2 / five;
  grid-row:row1-start / third-line;
}

或者简写成：
.item-a {
  grid-area:row1-start / line2 / third-line / five;
}
四个值的顺序是：grid-row-start / grid-column-start /grid-row-end / grid-column-end

fr : 分份划分

• 除了设置行列进行划分外，还可以直接分份划分。
• 1fr 1fr :均分为两份
• 2fr 1fr :分成三份，比例2:1
• 适用于平均布局

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

gap : 空隙

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

grid-template-gap : 分区

.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-area:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer"

代码实例：

链接：js.jirengu.com/gatizesiqu/…

「资料来源：饥人谷、阮一峰的网络日志、RUNOOB.COM」