Web开发之CSS布局

CSS定位

margin定位、position定位、float定位。

三栏式布局

涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。

这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。

1、圣杯布局

定义：圣杯布局是一种三列布局，两边定宽，中间宽度自适应

1、 圣杯布局可以将整个div.container看做一个奖杯，div.left和div.right看做奖杯的两个耳朵
2、圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上

圣杯：父盒子包含三个子盒子（左，中，右）

• 中间盒子的宽度设置为 width: 100%; 独占一行；
• 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

.left {margin-left:-100%;} 把左边的盒子拉上去
.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去

• 父盒子设置左右的 padding 来为左右盒子留位置；
• 对左右盒子使用相对布局来占据 padding的空白，避免中间盒子的内容被左右盒子覆盖；

"container">
	
"middle">中间弹性区
	
"left">左边栏
	
"right">右边栏

2、双飞翼布局

双飞翼：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。

• 中间盒子的宽度设置为 width: 100%; 独占一行；
• 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
• 在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

"container">
	
"middle">
		
"middle-inner">中间弹性区
	
	
"left">左边栏
	
"right">右边栏

圣杯和双飞翼异同：

1、相同点

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

2、不同点

主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：

1、 圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；

2、双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

利用浮动实现

也可以使用浮动也实现了三栏式布局：

左边盒子左浮动，右边盒子右浮动，中间盒子利用 margin-left 和 margin-right 来为左右盒子留位置，同时父盒子设置
overflow: auto; 来避免子盒子溢出。

"container">
	
"left">左边栏
	
"right">右边栏
	
	
"middle">中间弹性区

总结：

三栏式布局涉及到负 magin 和 清除浮动的问题。

负magin：

1、不使用 float 的话，负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素，所有跟随的元素都会被上移(而 relative 定位的元素则不同，会保留原位置，影响文档流)。
2、当 static 元素的 margin-top/margin-left 被赋予负值时，元素将被拉进指定的方向。
3、如果你设置 margin-bottom/right 为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
4、当元素不存在 width 属性或者 width: auto的时候，负 margin 会增加元素的宽度.
5、margin-top 为负值不会增加高度，只会产生向上位移;margin-bottom 为负值不会产生位移，会减少自身的供 CSS 读取的高度，影响下方的元素位置；上下相邻的元素两者均为负时，效果不叠加，取负值更多的那个效果。

清除浮动：

清除浮动主要是为了解决高度塌陷问题。而简单的 clear: both

其一，通过在浮动元素的末尾添加一个空元素，设置 clear: both
属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者 display: table 属性来闭合浮动

顺便补充一句，clear float(例如 clear: left) 是对某个元素设置，以避免其某一边有浮动元素，即对当前元素产生约束，约束的边界为其他的浮动元素。对于已经浮动的元素，设置 clear float 是无效的。

居中布局

1、水平居中

1、对于行内元素(inline)：

• text-align: center;

2、对于一个块级元素(block)：

• 设置宽度且 marigin-left: auto 和 margin-right: auto

3、对于多个块级元素：

• 对父元素设置 text-align: center;
  对子元素设置 display: inline-block;
• 使用 flex 布局 选择方向，justify-content: center;

2、垂直居中

1、对于行内元素(inline)：

• 单行：设置上下 pandding 相等；
  或者设置 line-height和 height相等。
• 多行：设置上下 pandding 相等；
  或者设置 display: table-cell;和 vertical-align: middle；
  或者使用 flex 布局；
  或者使用伪元素。

2、对于块级元素(block) ，下面前两种方案，父元素需使用相对布局：

• 已知高度：子元素使用绝对布局 position: absolute; top: 50%，再用负的 margin-top把子元素往上拉一半的高度
• 未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
• 使用 Flexbox：选择方向 align-items: center;

3、水平垂直居中：

• 定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉
• 高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);
• 使用 Flexbox：justify-content: center; align-items: center;

Flex布局

FlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（rem伸缩布局（转））连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题），布局还是要传统布局的。

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性
+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

1、flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{display:flex;}

行内元素也可以使用Flex布局。

.box{display:inline-flex;}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{display:-webkit-flex;/* Safari */display:flex;}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、容器的属性

flex-direction属性:

flex-direction属性决定主轴的方向（即项目的排列方向）。
.box{flex-direction:row|row-reverse|column|column-reverse;}

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-warp属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{flex-wrap:nowrap|wrap|wrap-reverse;}

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

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box{flex-flow:||;}

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

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

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

align-items属性

align-items属性定义项目在交叉轴上如何对齐。
.box{align-items:flex-start|flex-end|center|baseline|stretch;}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline:项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

该属性可能取6个值。

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

4、项目的属性

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item{order:;}

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{flex-grow:;/* default 0 */}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item{flex-shrink:;/* default 1 */}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item{flex-basis:|auto;/* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

来源链接：
https://www.jianshu.com/p/5818ff8c31b8
https://www.jianshu.com/p/4290522e1560