复习

1. 文档流
2. 元素
   1.行内元素：行内显示，不能设置宽高，只能嵌套航标签
   2. 块元素：元素独占一行，可以设置宽高，和嵌套任何标签除了h和p标签
   3. 行内块元素：input textarea img 等标签。可以设置宽高，行内显示
3. display:none和visibility:hidden
   1. display:none不占空间，vivsibility:hidden占空间
   2. display:none将元素及元素以内的所有元素全部隐藏，无继承性
      3.visibility:hidden有继承性，会遗传给子元素，使元素也隐藏
4. 盒模型
   1. 把html中的元素当成一个盒子，有盒子的平面外形
   2. 盒模型拥有，宽高，padding，margin
   3. 标准盒模型：文档总占宽=内容+padding+border+margin
   4. 怪异盒模型：文档总占宽=内容（padding+内容宽+border）+外边距
5. padding
   1. 可显示背景图
   2. 不可负值
   3. 用来撑开内容与边框的距离
   4. 背景图和背景颜色的原点位置为，padding的左上角，border下也有颜色和图
6. margin
   1.上元素的下margin，下元素的上margin会重合，值取大值
   2. 使用margin：0 auto；需要给元素设置宽，左右自动平分margin
   3. 可是设置负margin，左和上会移动自己，右和下会印象其他元素

元素的水平垂直居中

1. 已知宽高
   1.position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
   2. position:absolute;top:50%;left:50%;transfrom:translate(-50%,-50%);

元素的浮动

1. 行元素浮动后可以设置宽高和margin
2. 清除浮动
   1. 开启BFC（overflow:hidden）
   2. 在浮动元素的最后写一个空标签，display:block;clear:both
   3. 在浮动元素后面书写
      再书写clear=“all”<br clear="all">
   4. 给父元素设置浮动（开启了BFC）
   5. 使用:after伪类father:after{ content:"\200B"; clear:both; display:block; height:0; }
      低版本IE不支持：after
   6. 给父元素设置高度（不使用）
   7. 在低版本IE中给父元素开启haslayout，与BFC一致
      *zoom:1;（css hack）

定位

1. 相对定位
   1. 相对自身定位
   2. 不脱离文档流
   3. left,top具有优先性
   4. 设置相对定位不影响该元素的其他属性
   5. 用来属性包含块，和给其他元素设置堆叠顺序，因为只有定位元素可以使用z-index
2. 绝对定位
   1. 相对包含块定位
   2. 脱离文档流
   3. left和top具有优先性
   4. 改变元素属性
      1. 行标签可以设置宽高，margin
      2. 块元素不再独占一行
   5. 当浮动无法满足需求时使用
3. 固定定位
   1.与绝对定位基本一致
   2. 固定在当前窗口的固定位置
   3. IE678不支持

包含块

1. 初始包含块：当定位的元素找不到包含块则，相对于初始包含块定位（html根元素）。当html和body使用overflow:hidden禁止滚动条时，fied相当于相对于初始包含块定位，本来应相对窗口定位
2. 当一个元素没有定位属性时，默认为position:static,包含块为自身的父级
3. 当一个元素为相对定位，包含块是自身父级
4. 当一个元素为绝对定位，沿着父级元素一直向上找含有定位属性的祖辈元素，若无则包含块为初始包含块（html）
5. 当一个元素为fied定位，官方说法包含块为初始包含块，但实际按照浏览器窗口定位。

overflow

1. overflow:hidden 超出隐藏，且不显示滚动条，但任然可以使用js的scrollTop和scrollLeft控制
2. overflow:scroll 生成滚动条
3. overflow:auto 内容超出生成滚动条，否则没有
4. 默认值为overflow:visible，文本超出真正常显示

系统滚动条

1. 当只有html有overflow属性时，html的滚动条会传递到系统滚动条
2. 当只有body有overflow属性时，body的滚动条会传递到系统滚动条
3. 当body和html都有overflow属性时，html的滚动条传递到系统滚动条，body的滚动条为自己的滚动条
4. 将body和html的滚动条禁止，需要将两个标签设置为overflow：hidden。height为100%

绝对定位模拟固定定位（fixed在IE8以下不兼容）

1. 让绝对定位和固定定位的参照元素一致
2. 绝对定位写在body的子元素中，html和body的height设置为100%，并禁止系统滚动条，给内容部分书写overflow：scroll，此时滚动条为内容部分的滚动条，不会将定位元素拖走。

text-transform

1.text-ransform:uppercase/lowercase/capitalize，转大写/小写/首字母大写

三列布局

1. 当一个块元素未设置宽度，则内容+padding+border+margin和父元素一样宽

2.实现方法

1. 左块左浮动，右块右浮动，中间块会上来，但是内容会被左右块覆盖，所以需要设置左右margin，不能设置中间内容的宽度。（有BUG，左右块不能太宽，若设置太宽，屏幕宽度小时，结构打乱）

2. 左块左定位，右块右定位，中间块会上来，但是内容会被左右块覆盖，所以需要设置左右margin，不能设置中间内容的宽度。（有BUG，左右块不能太宽，若设置太宽，屏幕宽度小时，中间块被压缩，在一定的屏幕宽度上，中间块消失）

3. 圣杯布局

   1. 一个父级套三个div，左中右，padding为左和右的宽度，再使用margin负值将左和右移动上去，再realtive

4. 双飞翼布局

   1. 左右各一个盒子，中间的盒子外层套一个盒子，center的margin左和右为左右盒子的宽，center外层盒子padding为左右盒子宽，给左盒子，右盒子，center的外层盒子float:left，再使左右盒子定位到同一行的左右侧

5. 等高布局

   1. 并列的盒子高度始终相等，无论有无内容。
   2. 给多列块设置一个极大的padding-bottom，再使用等值的负外边距将padding撑开的父级高度恢复，外层盒子的高度由最大的内容撑开，设置overflow：hidden，将无内容的区域截除，当最大的盒子内容增加时盒子撑开，显示被截的部分其他列背景

BFC(块级格式化上下文)

1. 构成BFC后自身相对独立于外界，类似沙盒
2. 构成BFC的条件
   1. 浮动
   2. 定位，除了相对定位
   3. display：inline-block，table-cells，flex
   4. overflow：只要不为visible
   5. 根元素
3. BFC解决的问题
   1.清除浮动
   2. 解决父级塌陷