任务十

CSS浮动

• 概念：浮动模型也是一种可视化模型，浮动的框可以左右移动（根据float的属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样

• 如果包含块太窄无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间；如果浮动元素的高度不同，那么向下移动的时候可能会被卡住

• 行框：浮动会让元素脱离普通流，如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动元素不存在，但是框的文本内容会受到浮动元素的影响，会移动从而留出空间。用术语说就是浮动元素旁边的行框被缩短，从而给浮动元素流出空间，因而行框围绕浮动框

  • 如果要想阻止行框围绕在浮动元素的外边，可以使用clear属性，属性的left，right，both，none，表示框的哪些边不挨着浮动框
  • clear: both其实可以理解为这个元素左右两边都不允许出现浮动元素

• 清理浮动：解决浮动父容器高度塌陷问题

  • 三个元素全都向左浮动，父元素高度为0.如果我们想让父元素在视觉上包围浮动元素，可以在最后添加一个空的
    对他进行清理，缺点就是增加了一个无意义的标签
  • BFC(block format content)清理浮动: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
    • BFC会阻止垂直外边距(margin-top, margin-bottom）折叠
      • 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如边框，非空内容，padding等）就会发生margin的重叠
      • 因此要解决margin重叠的问题，只要让他们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给他们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
    • BFC不会重叠浮动元素
      • overflow: hidden不会重叠浮动元素，文字也不会
    • BFC可以包含浮动
    • 父子元素外边距合并
      • 加外边框border，内边框padding
      • overflow: auto 也可以
      • display: inline-block也可以，副作用是变成了小方块
    • 垂直元素外边距合并
    • 只要能生成块级上下文的东西，都可以让这个不再重叠
      • 屏幕快照 2018-07-05 下午5.23.45.png
    • 局限性：使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的

  • 一个已经过时的东西

    
    
    屏幕快照 2018-07-05 下午5.27.06.png
  • 最正规的方法

    • .clearfix{
          *zoom:1;
      }
      .clearfix: after{
           content: "";
           display: block;
           clear: left;
      }      
      

    • .clearfix{
          *zoom: 1;
      }
      .clearfix:after{
           content: "";
           display: block;
           clear: left;
      }      
      

  • 虽然我们得出了一种浏览器兼容的靠谱解决方案，但是这并不代表我们一定要用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性。总儿言之清理浮动两种方式：
    • 利用clear属性，清除浮动
    • 使父容器形成BFC

CSS定位

值	属性	备注
inherit	规定应该从父元素继承position属性的值	一般不用
static	默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）	声明无效
relative	生成相对定位的元素，相对于元素本身正常位置进行定位，因此left: 20px会向元素的left位置添加20px
absolute	生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位，元素的位置通过left top right bottom属性进行规定	以父容器作为参考点，如果父容器没有，那就再往上找，直到HTML；沿着内边框
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left top right bottom属性进行规定
sticky	CSS3新属性，表现类似position: relative position: fixed的合体，在目标区域在屏幕中可见	差兼容，一般用javascript做出来

• 普通流与相对定位（特殊的普通流元素）
  • CSS有三种基本的定位机制：普通流，相对定位和绝对定位
  • 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
  • 相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变（对于其他元素没有影响，其他元素还是按照原来的元素位置来定位）
• 绝对定位与固定定位
  • 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
  • 绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的，如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含快html来定位
  • 因为绝对定位于文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上
  • fixed是固定定位，固定定位是绝对定位的一种，固定定位的元素不包含在普通文档流中，差异是固定元素的包含块是视口（viewport）（不管文档怎么滚，就在一个位置）
  • 绝对定位宽度：绝对定位宽度是收缩的，如果要撑满父容器，可以设置width：100%=内容的宽度和父容器内容的宽度一样
  • 绝对定位和BFC：绝对定位可以形成BFC，可以用来清除浮动，可以用来阻止外边距合并
  • 绝对定位垂直水平居中：

.box{
        position: absolute;
        left: 50%;
        right: 50%;
        margin-left: -50px; (自己宽度的一半）
        margin-top: -50px;
        }

水平居中&垂直居中

• 文字在盒子里面水平居中
  text-align: center
• 按钮在盒子里水平居中：因为父元素text-align: center，它也继承居中（行内元素padding设置不占据空间，但是会从颜色上体现出来，如果希望占据空间，可以设置display: inline-block;
• 两个按钮水平居中：同上
• 块级元素水平居中：本身占满了左右的空间，所以不存在居中。如果说居中，必须有宽度

margin: 0 auto;
text-align: center;

• 文字在盒子里面垂直居中：父容器上下padding相同；
• 绝对居中：全部100%或者absolute
• 可变的盒子居中：transform: translate(-50%, -50%)