盒模型

组成：margin（外边距）、border（边框）、padding（内边距）、content（内容）
W3C标准盒模型：元素width/height仅为content部分的宽高（box-sizing：content-box）
IE盒模型：元素width/height为content + padding + border（box-sizing：border-box）

文档流和文本流

文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。
但是绝对定位后，不仅元素盒子会脱离文档流，文字也脱离文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

BFC

BFC（Block formatting context）即块级格式化上下文。
它是页面中一块独立的渲染区域，有自己的渲染规则，且和外部区域互不影响。

如何触发BFC

float不为none
position为absolute、fixed
overflow不为visible
display 为 inline-block、table-cells、flex

BFC应用场景

解决外边距重叠（BFC不与外部互相影响）
清除浮动（BFC计算高度时，浮动元素也参与计算）
自适应两栏布局（BFC不与浮动元素重叠）

居中

水平居中

元素定宽情况下

设置 margin: 0 auto
设置定位属性

.father {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}
.son {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background: green;
}

元素不定宽情况下

设置transform属性

.father {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}
.son {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: green;
}

使用flex

.father {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: red;
}

垂直居中

元素定高情况下

行内元素，设置line-height与容器元素height相等
设置定位属性

.father {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}
.son {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background: green;
}

元素不定高情况下

设置transform属性

.father {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}
.son {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: green;
}

使用flex，参考水平居中

.father {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  background: red;
}

布局

三栏布局

左右两栏定宽，中间区域自适应。

方案一：浮动

<div class="left">左</div>
<div class="right">右</div>
<div class="center">
    <p>中间自适应区域</p>
</div>

.left {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
}
.right {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}
.center {
  height: 200px;
  background: yellow;
  margin-left: 100px;
  margin-right: 100px;
}

方案二：定位

<div class="parent">
<div class="left">左</div>
<div class="center">
  <p>中间自适应区域</p>
</div>
<div class="right">右</div>
</div>

.parent {
  position: relative;
}
.left {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left: 0;
  top: 0;
}
.right {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  right: 0;
  top: 0;
}
.center {
  height: 200px;
  background: yellow;
  position: absolute;
  left: 100px;
  top: 0;
  right: 100px;
}

方案三：flex

.parent {
  position: relative;
  display: flex;
}
.left {
  width: 100px;
  height: 100px;
  background: green;
}
.right {
  width: 100px;
  height: 100px;
  background: red;
}
.center {
  height: 200px;
  background: yellow;
  flex: 1;
}

方案四：圣杯布局

<div class="parent">
  <div class="center">
    <p>中间自适应区域</p>
  </div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.parent {
  padding: 0 100px;
  overflow: hidden;
}
.left {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
  position: relative;
  margin-left: -100%;
  left: -100px;
}
.right {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  position: relative;
  margin-left: -100px;
  right: -100px;
}
.center {
  height: 200px;
  background: yellow;
  width: 100%;
  float: left;
}

方案五：双飞翼布局（推荐）

<div class="parent">
  <div class="center">
    <div class="content">中间自适应区域</div>
  </div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.parent {
  overflow: hidden;
}
.left {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
  margin-left: -100%;
}
.right {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  margin-left: -100px;
}
.center {
  height: 200px;
  background: yellow;
  width: 100%;
  float: left;
}
.content {
  margin: 0 100px
}

Flex布局

Flex布局即弹性盒子布局，提供了简便、快捷、响应式的布局方法。

容器元素属性

flex-direction（主轴项目排列方向）
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap（如何换行）
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow（flex-direction属性和flex-wrap属性的简写形式）
flex-flow: <flex-direction> || <flex-wrap>;
justify-content（项目在主轴对齐方式）
justify-content: flex-start | flex-end | center | space-between | space-around;'
align-items（项目在交叉轴对齐方式）
align-items: flex-start | flex-end | center | baseline | stretch;
align-content（多根轴线时的对齐方式）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目元素属性

order（项目的排列顺序，默认0）
flex-grow（项目的放大比例，默认0）
flex-shrink（项目的缩小比例，默认0）
flex-basis（分配多余空间之前，项目占据的主轴空间）
flex（flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）
align-self（单个项目的对齐方式）
align-self: auto | flex-start | flex-end | center | baseline | stretch;

CSS优先级

CSS选择器权重

分为四个等级：

第一等级：内联样式。（权值为：1,0,0,0）
第二等级：ID选择器。（权值为：0,1,0,0）
第三等级：类选择器、伪类选择器、属性选择器。（权值为：0,0,1,0）
第四等级：标签选择器、伪元素选择器。（权值为：0,0,0,1）权值计算公式：
权值 = 第一等级选择器 * 个数，第二等级选择器 * 个数，第三等级选择器 * 个数，第四等级选择器 * 个数；

权值比较规则

先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
完全相同的话，就采用后者优先原则（也就是样式覆盖）；
css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；

CSS基础汇总

盒模型