CSS基础学习笔记（三）排版布局

布局分类

• 正常布局流
  默认的，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致。内联元素的height width与内容一致。你无法设置内联元素的height width — 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)

• 弹性布局

• 网格布局
  网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

• 浮动

• 定位

• 多列布局

• 响应式布局

弹性布局

• 使用方式
  父容器需要添加display:flex;属性

名称	含义
flex	容器添加弹性布局后，显示为块级元素
inline-flex	容器添加弹性布局后，显示为行级元素

设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效

• flex-direction
  主轴的方向（即项目的排列方向）

名称	含义
row	主轴为水平方向，起点在左端
row-reverse	主轴在水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿
inherit	从父元素继承该属性

• flex-wrap
  一条轴线排不下，如何换行

名称	含义
nowrap	不换行，当容器宽度不够时，每个项目会被挤压宽度
wrap	换行，且第一行在容器最上方
wrap-reverse	换行，且第一行在容器最下方

• flex-flow
  flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap

• flex-grow
  属性用于设置或检索弹性盒子的扩展比率
  flex-grow:1;

• flex-shrink
  设置或检索弹性盒的收缩比率
  flex-shrink:1;

• flex-basis
  设置或检索弹性盒伸缩基准值
  flex-basis:1;

• justify-content
  项目在主轴上的对齐方式

名称	含义
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内

• order
  设置弹性盒对象元素的顺序
• align-items
  定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

名称	含义
stretch	元素被拉伸以适应容器
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效

• align-content
  在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

名称	含义
stretch	默认值。轴线占满整个交叉轴
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

• align-self
  定义flex子项单独在侧轴（纵轴）方向上的对齐方式

名称	含义
stretch	默认值。如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对
baseline:	项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)

网格布局

• 基本概念
  采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。
  容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
  
  行和列的交叉区域，称为"单元格"（cell）。划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
  
• 使用方式
  父容器需要添加display:grid;属性

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
| 名称| 含义|
|–|–|
| grid| 指定一个容器采用网格布局，容器元素都是块级元素 |
|inline-grid|指定一个容器采用网格布局，容器元素都是行级元素

指定网格布局后需要划分行、列

• 容器属性
• grid-template-columns
  定义每一列的列宽
  -使用绝对单位：grid-template-columns:100px 100px 100px;
  -使用百分比grid-template-columns: 33.33% 33.33% 33.33%;
  -简化重复值：grid-template-columns: repeat(3, 33.33%);
  -6列第1、4列的宽度为100px，第2、5列为20px，第3、6列为80px。：grid-template-columns: repeat(2, 100px 20px 80px);
  -自动填充：grid-template-columns: repeat(auto-fill, 100px);
  -fraction 的缩写，意为"片段"：grid-template-columns: 1fr 1fr;
  -fr可以与绝对长度的单位结合使用如：grid-template-columns: 150px 1fr 2fr;第一列的宽度为150像素，第二列的宽度是第三列的一半
  grid-template-rows类似
• grid-column-gap
  设置列与列的间隔（列间距），grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
  grid-gap: <grid-row-gap> <grid-column-gap>;
• grid-template-areas
  用于定义区域。网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
  划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格:

  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

将9个单元格分成a、b、c三个区域

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为：区域名-start，终止网格线自动命名为：区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

• grid-auto-flow
  容器的子元素会按照什么顺序放置在每一个网格

名称	含义
row	先行后列
column	先列后行
row dense	先行后列，并且尽可能紧密填满，尽量不出现空格
column dense	先列后行，并且尽可能紧密填满，尽量不出现空格

• justify-items
  设置单元格内容的水平位置（左中右）

名称	含义
stretch	默认值。拉伸，占满单元格的整个宽度
start	对齐单元格的起始边缘
end	对齐单元格的结束边缘
center	单元格内部居中

• align-items
  设置单元格内容的垂直位置（上中下）。

名称	含义
stretch	默认值。拉伸，占满单元格的整个宽度
start	对齐单元格的起始边缘
end	对齐单元格的结束边缘
center	单元格内部居中

place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;

• justify-content
  设置整个内容区域在容器里面的水平位置（左中右）

名称	含义
stretch	默认值。项目大小没有指定时，拉伸占据整个网格容器
start	对齐容器的起始边框
end	对齐容器的结束边框
center	容器内部居中
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content: <align-content> <justify-content>

• grid-auto-columns
  浏览器自动创建的多余网格的列宽和行高，具体同grid-template-columns
  grid-auto-rows类似

• 项目属性

• grid-column-start
  左边框所在的垂直网格线
  grid-column-start:1;
  左右边框（上下边框）之间跨越多少个网格：
  grid-column-start: span 2;=grid-column-end: span 2;

• grid-column-end
  右边框所在的垂直网格线

• grid-row-start
  上边框所在的垂直网格线

• grid-row-end
  下边框所在的垂直网格线
  grid-column属性是grid-column-start和grid-column-end的合并简写形式：
  grid-column: <start-line> / <end-line>;

• grid-area
  指定项目放在哪一个区域
  grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

• justify-self
  设置单元格内容的水平位置（左中右）

名称	含义
stretch	默认值。拉伸，占满单元格的整个宽度
start	对齐单元格的起始边缘
end	对齐单元格的结束边缘
center	单元格内部居中

• align-self
  设置单元格内容的垂直位置（上中下）
  | 名称 |含义 |
  |–|–|
  |stretch|默认值。拉伸，占满单元格的整个宽度
  |start|对齐单元格的起始边缘
  |end|对齐单元格的结束边缘
  |center|单元格内部居中

定位

locate:static

• 静态定位：static

• 相对定位：relative

• 绝对定位：absolute
  根据最近的已经定位的父标签进行定位
  在没有上下文relative时，参考当前视窗页面做偏移

• 固定定位：fixed