CSS考察

封面 pid: 80699595

水平居中

(1)对行内元素(包括inline-block，下同)
直接对块级父使用 text-align

(2)对块级元素
固定宽度，左右 margin 设置 auto（前提父宽大于子宽）

(3)绝对定位
万能绝对定位，设置 right / left 为50%，再使用 margin 或 transform 进行校正

(4)flex布局
给父设置 flex 布局并且设置主轴对齐方式justify-content为居中

垂直居中

(1)对行内元素
块级父设置height和line-height×行数相等

(2)对块级元素
父设置 table-cell 布局并设置 vertical-aligin为middle（但table-cell使自身高宽百分比和margin失效，需要祖先 table 布局）

(3)绝对定位

(4)flex布局
给父设置 flex 布局并且设置交叉轴对齐方式align-items为居中

水平垂直居中

(1)对行内元素
块级父设置 text-align，height=line-height，font-size:0，子设置 vertical-aligin为middle

(2)table-cell
父设置 table-cell 布局并设置 vertical-aligin为middle实现垂直居中，根据内容块级与否选择使用 margin/text-align实现水平居中

(3)绝对定位

(4)绝对居中
绝对定位下设置 top、right、bottom、left为0，并设置margin为 auto，自动四方扩展平分

(5)flex布局
给父设置 flex 布局并设置两个方向的对齐方式

#parent{
    display: flex;
}
#son{
    margin: auto;
}

/*或*/

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

两列布局

• 一列定宽，一列自适应
  • float（定） + margin
  • float （定）+ overflow
  • 绝对定位
  • flex 布局，一列设置 flex-glow:1
  • table-cell布局，一边自动获取剩余宽度
• 一列不定，一列自适应
  • float + overflow
  • flex 布局，一列设置 flex-glow:1

三列布局（两侧定宽，中间自适应）

• 两侧绝对定位，中间两边margin
• flex 布局，中间设置 flex-glow:1
• table-cell布局，中间自动获取剩余宽度

圣杯布局&双飞翼布局（图解）
圣杯布局（container包含left、center、right）：

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

/*容器空出两边位置*/
#container {
  padding-left: 200px; 
  padding-right: 150px;
}

.column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px;
  /*通过负边距返回第一行，与center开头对齐*/ 
  margin-left: -100%;
  /*向左偏移自身长度，到达指定左边*/
  position: relative;
  right: 200px;
}

#right {
  width: 150px;
  /*通过负边距返回第一行，右偏自身长度，到达指定右边*/
  margin-right: -150px; 
}

双飞翼布局（container只包center）：

<div id="container" class="column">
  <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

#container {
  width: 100%;
}

.column {
  float: left;
}
/*center在容器中空出两边*/
#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
/*通过负边距返回第一行，与容器开头对齐*/ 
  width: 200px; 
  margin-left: -100%;
}

#right {
/*通过负边距返回第一行，左偏自身长度，到达指定右边*/ 
  width: 150px;
  margin-left: -150px;
}

Flex 布局

忘记具体属性值意义请跳此处
设置了 display:flex 的被称为容器，容器有6个属性

flex-container{
/*第一个值为默认*/
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: <'flex-direction'> || <'flex-wrap'>;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

容器的直接子称项目，有6个属性

flex-item{
  order: 0 | <integer>;/*越小越靠前*/
  flex-grow: 0 | <number>;
  flex-shrink: 1 | <number>;
  flex-basis: auto | <length>;
  flex: 0 1 auto | <'flex-grow'> [<'flex-shrink'> <'flex-basis'> ];
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

BFC

全名 Block Formatting Context
BFC是一个css的一个布局概念，是一个独立的区域，是一个环境。它决定了其子元素（块级盒）将如何布局，并排除外界对该区域的影响。

以下情况会触发BFC：

• float的值不是none
• position的值不是static或者relative
• display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell
• overflow的值不是visible

BFC特性：

• 不会被浮动的元素覆盖（双列自适应布局）
• 计算BFC的高度时，包含浮动子元素高度（避免高度坍塌）
• 同一个BFC的子元素之间会margin重叠（反过来避免margin坍塌）

杂项

隐藏元素方式：visibility/opacity/display、宽高为0并 overflow:hidden、z-index、偏移至视线外
图标使用 css sprites 以提高性能

一些常用css属性如字体，浮动等，或是同一css属性的不同值（规格），可以作为公共类，到时候想加某一效果就将该类加到 class 属性中

.clearfix:after{
  content:'.';
  display:block;
  height:0;
  clear:both;
  visibility: hidden;
}

.clearm{margin:0}

.pointer{cursor:pointer}

.fz-12{font-size:12px}

.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*等等*/