第五章 css 定位布局

第五章 css 定位布局

    定位(position)
        规定元素的定位类型，绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。
        属性值
        static：默认值，没有定位，元素出现在正常的文档流中，这时给这个元素设置的left、right、bottom、top这些偏移属性都没有效果的。
        relative：相对定位。占用标准流（文档流），它会出现在文档应该的位置，可以设置偏移值移动，但原有位置依然被占用。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
        absolute：绝对定位。元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素(譬如body)的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。绝对定位一般与相对定位结合使用，这时它的父级就是relative定义的元素。
        fixed：固定定位。元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。一般用于开发固定导航栏
        sticky：粘性定位。一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为
    z-index： 仅能在定位元素上奏效（static无效），元素可拥有负的z-index属性值，普通流的z-index默认为0.脱离了普通流，在普通流之上（定位、浮动）z-index为0-1之间，如果将z-index值设置为大于或等于1，元素将会在定位或者浮动流之上。
    网站整体布局：先整体再局部，从上至下，逐步细化
         1）双飞翼布局：两端固定、中间自适应
         ```
          <!-- 双飞翼布局 -->
          <style>
            body {
              margin: 0;
              padding: 0;
            }
            .container {
              width: 100%;
            }
            .column {
              float: left;
              height: 100vh;
            }
            .left {
              width: 300px;
              background-color: #f00;
              /* 这个是覆盖上边center的宽度，所以用100% */
              margin-left: -100%;
            }
            .center {
              width: 100%;
              background-color: #0f0;
            }
            .right {
              width: 300px;
              background-color: #00f;
              /* 这个是要覆盖上边一个 .right本身的宽度，所以用-300px */
              margin-left: -300px;
            }
          </style>
          <div class="contaner">
            <div class="column center">center</div>
            <div class="column left">left</div>

            <div class="column right">right</div>
          </div>
         ```
         2)圣杯布局:也是三列布局，两边定宽，中间自适应布局。布局时 与双飞翼相比，增加了定位和偏移值。
          ```
          <!-- 圣杯布局 -->
            <!-- 一个网页通常由上中下三部分组成 -->
            <!-- header头部 -->
            <!-- 主体内容区 -->
            <!-- 尾部 -->
            <style>
              * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
              }

              .header,
              .footer {
                width: 100%;
                height: 100px;
                background-color: #2fff99;
                text-align: center;
                font-size: 30px;
                line-height: 100px;
              }
              .container {
                min-width: 600px;
                padding: 0 200px;
              }
              .container::after {
                display: block;
                content: '';
                clear: both;
              }
              .column {
                float: left;
                height: 200px;
                position: relative;
              }
              .left {
                width: 200px;
                background-color: #f00;
                margin-left: -100%;
                left: -200px;
              }
              .right {
                width: 200px;
                background-color: #00f;
                margin-left: -200px;
                left: 200px;
              }
              .center {
                width: 100%;
                background-color: #0f0;
              }
            </style>

            <div class="header">header</div>

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

            <div class="footer">foot</div>
          ```

          3)侧边栏固定布局
               两栏布局
                  a) 左侧固定,右侧自适应
                  b）右侧固定，左侧自适应
                  c）左右都固定
                三栏布局
                   a)左侧固定，右侧固定，中间自适应
                   b）左侧自适应，中间、右侧固定
                   c）左侧和中间都固定，右侧自适应
    BFC&IFC：BFC(block Formatting Context) ， IFC（Inline Formatting Context） 块级格式化上下文。是css2.1的规范，决定子元素如何定位和与其他元素的关系和相互作用。
        BFC形成的条件：float除了none以外的值；定位元素position（absolute/fixed）;display(inline-block\table-cell\table-caption);overflow(值为hidden、auto、scroll时)

        BFC特性：内部的盒子会在垂直方向上一个接一个的放置；垂直方向上的距离由最大的margin值决定（因为会有塌陷，如果两个盒子不要叠加，就需要把盒子变成一个独立的容器），BFC的区域不会与float元素区域重叠；计算BFC的高度时，浮动元素也参与计算；

        BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素。

        BFC的作用，解决margin重叠的问题（添加独立bfc）；解决浮动高度塌陷的问题（父级添加样式触发bfc）；解决侵占浮动元素的问题（即清除浮动的方法）

        IFC：行内格式上下文
        IFC形成条件 font-size line-height height vertacal-align
        IFC特性规则：
            a）IFC的元素会在一行中从左到右排列；
            b）在一行上的所有元素会在该区域形成一个行框；
            c）行宽的高度为包含框的高度，高度为行框中最高元素的高度；
            d）浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度；
            e）行框的宽度容纳不下子元素时，子元素会自动换到下一行显示，并且会产生新行框；
            f）行框的元素内遵循text-align和vertical-align。
                    行内标签不识别宽高，如果要让行内标签识别宽高，必须用display把它设置成块级标签