Web布局（上）

 CSS布局

拾取元素，控制它们相对于普通文档流的位置。  

普通文档流的顺序：从左到右，从上到下  

块级元素，占据一行，可以设置宽高<p><div>  

行内元素，允许多个元素排在一行，宽高由行内元素撑开<img><a>  

行内块级元素，可以多个元素在一行，可以由CSS定义宽高，由<display>  定义

合理布局的作用  

使内容更加清晰，页面载入更快，有利于搜索引擎的爬取

 常用的布局方式：flex布局，弹性布局

盒模型

一维布局模型，任何一个容器都可以被定义为flex布局

属性：

flex-direction 排列方向  

flex-wrap 向下换行  

flex-flow 前面两个的简写  

flex-basis 主元素在主轴方向上的大小，定义最小空间，默认为auto，即自身本来大小  

flex-grow 剩余空间的分配，定义自身放大比例，默认为0不放大  

    flex-grow:1;

flex-shrink 溢出空间的分配，默认做等比例压缩为1

    flex-shrink:1;

 居中对齐  

align-item:center; 交叉轴的正点对齐  

justify-content:center; 水平（主轴上）对齐  

justify-content:space-between;最左边的元素对齐最左边，最右边的元素对齐最右边，中间的元素的间距相等。  

到达底部，被推到最底部

    .content{

        flex-grow:1;

    }

 定位

把一个元素把它在正常布局中的位置移动到另一个位置  

position:  

·static 静态定位，默认左上角  

·relative 相对定位，对于原来的位置进行偏移

    position:relative;

    top:20px;

    left:20px;

·absolute 绝对定位，相对于父类元素，根元素  

·fixed 固定定位  

·sticky 粘性定位，当页面滚动时，元素位置不变  

    dt{

        background-color:black;

        color:white;

        padding:10px;

        position:sticky;

        top:0;

        left:0;

        margin:lem 0;

    }

    <dl>

      <dt>A</dt>

      <dd>Apple</dd>

      <dd>Ant</dd>

      <dd>Altimeter</dd>

      <dd>Airplane</dd>

      <dt>B</dt>

      <dd>Bird</dd>

      <dd>Bee</dd>

      <dt>C</dt>

      <dd>Calculator</dd>

      <dd>Cane</dd>

      <dd>Camera</dd>

    </dl>

 浮动

其他元素在浮动元素周围

    .col{

        float:left;

    }

    .right{

        float:right;

    }

    <div class="col">我在左边</div>

    <div class="col">我在中间</div>

    <div class="col right">我在右边浮动</div>

清楚浮动则主动在元素下方，在正常布局

    .no-float{

        clear:both;

        border:1px solid #999;

    }

    .no-float-bottom{

        boredr:1px solid #999;

    }