css布局与居中

默认情况下，元素是如何布局的？

• 独立元素布局
  默认的，一个块级元素的内容宽度是其父元素的100%，高度与其内容高度一致。行内元素的宽高与内容一致，且无法设置行内元素的宽高，行内元素放置与块级元素的内容里，如果要控制行内元素的的尺寸，可设置display: block;或display: inline-block;
• 元素之间相互影响
  • 正常布局流，块级元素按照在文档中出现的顺序放置，每个块级元素在上一个元素下面另起一行，它们会被设置好到margin分隔，在水平书写，自上而下模式里，块级元素是垂直组织的。
  • 行内元素不会另起一行，只要在父级块元素的宽度内有足够的空间，它们与其他行内元素，被安排在同一行，如果空间不够，溢出的文本或元素将移到新的一行。
• margin叠加与重合
  两个相邻的元素都设置了margin并且重叠，大的设置会被保留，小的则会消失。

1.左右布局

1.1 利用float

  
left
  
right

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

1.2利用flex

body {
  display: flex;
}
div {
  flex: 1 100px;
/*给出可用空间后，分配剩余空间*/
}

2. 左中右布局

2.1 利用float

  
1
  
2
  
3

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

2.2 利用flex

body {
  display: flex;
}
div {
 flex: 1;
}

3.水平居中

3.1 使用inline-block+text-align

先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

  
Demo

3.2将该块级元素左右外边距margin-left和margin-right设置为auto

.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

3.3 使用table+margin

先将子元素设置为块级表格来显示（类似），再将其设置水平居中
display:table在表现上类似block元素，但是宽度为内容宽。

  
Demo

3.4使用absolute+transform

先将父元素相对定位，再将子元素设置为绝对定位，向右推子元素为父容器的一半，最后通过向左移动子元素的一半宽度达到水平居中。

  
Demo

3.5 flex+justify-content

主轴方向为row

  
Demo

3.6 使用flex+margin

通过flex将父容器设置为flex布局，在设置子元素居中。

  
Demo

4. 垂直居中

4.1 内联元素居中

     单行内联元素垂直居中。。

4.2使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并且设置margin-top向上偏移元素高度的一半，就可以实现了。

    
固定高度的块级元素垂直居中。

4.3 使用absolute+transform

当垂直居中的元素的高度和宽度不知时，可以利用transform属性向y轴反向偏移50%实现垂直居中

    
未知高度的块级元素垂直居中。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

4.4 使用absolute+margin:auto

不需要知道尺寸，兼容性好 注意 top right bottom left的设置

.container {
   position: relative;
   height: 300px;
}
.item {
   width: 100px;
   height: 50px;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

4.5 使用flex+align-items

通过设置flex布局中的属性align-items使子元素垂直居中

    
未知高度的块级元素垂直居中。

.parent {
    display:flex;
    align-items:center;
}

5. 外边距合并

块级元素的上外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠或外边距合并。
注意浮动元素和绝对定位元素的外边距不会折叠

5.1出现外边距合并的三种情况

• 相邻元素之间
  相邻元素之间的外边距会折叠（除非后一个元素需要清楚之前的浮动）
• 父元素与其第一个或者最后一个子元素之间
  1.在父元素和其第一个子元素之间不存在border padding行内 内容，也没有创建*BFC,或者clearfix将两者margin-top分开。
  2. 或者在父元素与其最后一个子元素之间不存在border padding 行内内容 height 将两者的margin-bottom分开，那么两对外边距之间会产生折叠，此时子元素的外边距会溢出到父元素的外面
• 空的块级元素
  一个块级元素不包含任何内容，并且在其margin-top与margin-bottom之间没有border padding 行内内容 height min-height将两者分开，则上下外边距会合并

5.2合并的结果

• 两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值
• 两个相邻的外边距都是负数时，合并的结果时绝对值的较大值
• 两个外边距一正一负时，合并结果是两者想加的和

5.3 消除边距合并

• 父子边距合并父容器加border或者padding：1px；
• 兄弟边距合并：float或者display：inline-block;
• 不同父容器中的相邻外边距合并：overflow
• 自身上下外边距合并：加border：transparent；或者padding：1px；或者overflow：auto

6.BFC

• 定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-block，table-sell，table-caption），以及overflow值不为''visiable"的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
  在BFC中，每一个盒子的外边边缘（margin-left）会触碰到容器的左边缘（对于从右到左的格式来说，则触碰到右边缘）
• 理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子，箱子里面的物品是不受外界印象的。
• BFC理解：BFC中的元素的布局是不受外界的影响的。往往可以利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响

6.1 父容器使用overflow：auto|hidden撑开高度的原理是什么

父容器行成了一个BFC

6.2 浮动导致的父容器高度塌陷是什么？

• 指元素浮动以后脱离了文档流，无法撑开父容器的空间
• 解决办法
  使用为类或者clear清楚浮动

.clearfix:after {
content: ' '; /*伪类的内容为空*/
display: block; /*作为块级元素显示*/
clear: both; /*清楚浮动*/
}