前端盒子布局

前端盒子布局

方法一 position

分别使用 position：absolute|| fixed,脱离文档流，相对父级一级一级查找，第一次出现position的容器进行定位自身位置会被后面的元素占用，
    或者是relative，相对自身定位，自身的位置依然保留在文档流中，使用top,left,bottom,right进行定位

方法二 浮动

分别对需要浮动的元素添加float，同时，浮动的元素脱离文档流。 css样式，且为了不影响后面的文档流的预期位置，需要对浮动元素进行清除浮动。

清除浮动

方法一：向父元素添加能包裹改浮动元素固定的高宽。

方法二：

添加 <div style="clear:both"></div>

方法三：

添加向浮动元素的第一父类的伪元素增加浮动清除类

.clearfix:before,.clearfix:after{
    content:"";
    display:block;
    height:0;
    width:0;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1;
}

方法三：利用盒子边距布局

.box{
    margin-top:-30px;
    margin-left:-30px;
}
.box1{
    margin-bottom:-30px;
    margin-right:-30px;
}

方法四：弹性布局

• 使用对象需要弹性布局，给它的第一个父类添加弹性布局样式。由文档流变为弹性布局规则的容器。
• 使用后，原来对子元素的浮动布局没有效果
• 子元素div 变成了行内块元素
• 简洁改版子元素的属性

小问题测试：

1. 主轴 竖直，交叉轴方向？
   交叉轴在水平方向上。
2. 弹性布局改变的是什么？
   改变的是父类容器为弹性规则布局，子元素变为行内块特性。
3. 父容器为弹性布局，请问子元素全部是否全是行内块元素？
   可以包含行内块元素，块元素，但是改过后标签全部为行内块元素。
4. 弹性布局以什么轴排列？
   主轴和交叉轴

弹性布局样式

• flex-direction:row row-reverse column column; 主轴方向

    /* 
        row-reverse 类似对子元素添加往右的浮动，但不用清除浮动,
        column 类似对子元素进行 display:inline-block; + 竖直排列,默认顺序不变
        column-reverse 类似对子元素进行 display:inline-block; + 竖直排列，默认顺序从左下角往左上角顺序排列
     */
      /* 
       使用弹性布局后，span 和 div 都会变成行内块元素，可以设置内容大小,
           而在图片中，会将图片修改后的宽度依然保存着。
  	  */

• flex-wrap:no-wrap wrap-reverse wrap;是否换行

    /* 允许弹性换行，换列
        flex-wrap: wrap;
            换行顺序：允许换行，并且从右上角开始，往下击沉，当这一行内容足够，且还有余下的兄弟行内块元素，换行继续排列
        flex-wrap: wrap-reverse：
            换行顺序：允许换行，并且从右下角开始，往上冒泡，当这一行内容足够时，往上继续排列
            排列顺序由右下角开始，从 右 水平往 左移动，
     */
    /* flex-wrap: wrap-reverse; */

• justify-content:center flex-start flex-end space-between space-around ;主轴排列顺序

    	flex-start：与主轴的起点对齐。
        flex-end：与主轴的终点对齐。
        center：与交叉轴的中点对齐。
        space-between：与主轴两端对齐，轴线之间的间隔平均分布，且子元素靠父元素边上。
        space-around：主轴线两侧的间隔都相等，就相当于给子元素每个都添加 margin,
        magin-left = margin-right;
        所以，它会距离父元素在主轴方向上有一定的距离。

• align-items:center flex-end flex-start baseline stretch;

 /* 
     交叉轴：
         align-items: center;
         flex-start：与交叉轴的起点对齐。
         flex-end：与交叉轴的终点对齐。
         center：与交叉轴的中点对齐。
         align-items: stretch（默认值）：轴线占满整个交叉轴。
         align-items:baseline; 
         baseline:以第一行文字的基线（水平线）对齐， 第一行文字的水平位置对齐，但是，有时候效果不是你想要的那样，
         比如在文字前面加上图片，就会出现不一样的部分 意外 布局
         
         注意：IE9 及IE9以下不兼容，效果破坏
  */

• flex-flow:参数一（主轴方向） 参数二（ 是否换行）; 默认为row no-wrap;
  • 是flex-direction + flex-wrap 的快捷表达方式；

.box{
        flex-flow: column;
        flex-direction:row;
        flex-direction  和flex-foow 效果重复，后面的会进行覆盖前面的,
 }

如何脱离弹性布局规则流

        <div style="position: absolute;top:0px;right: 0;">

留个小练习，分别写 二

正二 倒二 左侧边最大竖立的二 右侧边是最大竖立的二

css 部分

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .wraper{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: flex-end;
            flex-wrap: wrap-reverse;
        }
        .box{
            width: 150px;
            height: 150px;
            /* margin: 0 14px; */
            /* margin-right: 37px; */
            background-color: yellowgreen;
            border: 1px solid black;
        }    
        .wraper-1{
            flex-wrap: wrap;
        }
        .wraper-2{
            flex-direction: column;
        }
        .wraper-3{
            flex-direction: column;
            flex-wrap: wrap;
        }
        .wraper-4{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .wraper-4 .box{
            width:166px;
            height:150px;
        }
        .wraper-5{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap-reverse;
        }
        .wraper-5 .box{
            width:166px;
            height:150px;
        }
    </style>

html 部分

<body>
    <!-- 正二 -->
    <div class="wraper">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
    <!-- 倒二 -->
    <div class="wraper wraper-1">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
    <!-- | < | -->
    <div class="wraper wraper-2">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
    <!-- | > | -->
    <div class="wraper wraper-3">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
    <div class=" wraper-4">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
    <div class=" wraper-5">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
    </div>
</body>

结果效果

标题 写二