html5源码笔记（三）【爱创课堂专业前端培训】

一、常见的布局
1.1 固定布局(基本的布局方式)
1.2 百分比布局(流式布局)
width、heigth、padding、margin使用百分比进行布局

width、padding、margin相对父元素的宽度进行百分比设置

height相对父元素的高度进行百分比设置

面试题：

border不能用%写

绝对定位的元素，如果用%写width、height、padding，分别参考的是自己的定位参考父元素的width、height、width。就是离自己最近的已经定位的父代元素

    <!-- <div></div> -->

</div>

1

    body{

        margin: 0;

    }

    #container{

        /* height: 200px;

        width: 200px; */

        width: 50%;

        padding-top:50%;

        /* padding: 100px; */

        /* margin: 200px auto; */

        border: solid 1px;

    }



    #container div{

        height: 50%;

        width: 50%;/*这里指的是内容盒子的宽度的50%*/

        border: solid 1px;

    }

1

1.3 固比固布局
左边边栏固定，中间百分比布局

<div class="content">

    <aside class="left"></aside>

    <aside class="right"></aside>

    <div class="main"></div>

</div>

1

    body{

        margin: 0;

    }



    aside,.main{

        /* 设置盒子的最小高度 */

        min-height: 200px;

    }



    aside.left{

        float: left;

        width: 270px;

        background: yellow;

    }



    aside.right{

        float:right;

        width: 300px;

        background: red;

    }



    .main{

        /* 设置最小宽度 */

        min-width: 800px;

        width: 100%;

        background: orange;;

    }

1

思考？

两边固定，中间自适应，且中间栏优先渲染。

1.4 圣杯布局
出自外国a list of part 上的一篇文章，圣杯外文的意思是渴求之物的意思

思想：利用float 然后结合margin 用父元素padding挤出中间被遮盖的内容 最后用相对定位调节左右边栏进行填充

<div class="content clear">

    <div class="main">中间主要内容</div>

    <aside class="left">左边栏</aside>

    <aside class="right">右边栏</aside>

</div>

1

    body{ margin: 0; }



    .clear::after{

        display: block;

        height: 0;

        content: '';

        clear: both;

        visibility: hidden;

    }



    .content{

        padding:  0 300px 0 270px;

        border: solid 1px;

    }

    

    aside,.main{

        /* 设置盒子的最小高度 */

        min-height: 200px;

    }



    .main{

        /* box-sizing: border-box; */

        float: left;

        /* 设置最小宽度 */

        min-width: 800px;

        width: 100%;

        /* padding: 0 300px 0 270px; */

        background: orange;;

    }



    aside.left{

        float: left;

        width: 270px;

        margin-left: -100%;

        background: yellow;



        position: relative;

        left: -270px;

    }



    aside.right{

        float: left;

        width: 300px;

        margin-left: -300px;

        background: red;



        position: relative;

        right: -300px;

    }

1

1.5 双飞翼布局
由淘宝的UED团队在页面开发时产生的灵感，来源于页面布局

大体思路和圣杯布局相同，不同之处 在中间主要内容上套了一层盒子，然后使用的是margin来解决中间栏文字显示的问题，不再需要定位

    <div class="main">

        <div>

            中间主要内容

        </div>

    </div>

    <aside class="left">左边栏</aside>

    <aside class="right">右边栏</aside>

</div>

1

    body{ margin: 0; min-width: 900px;}



    .clear::after{

        display: block;

        height: 0;

        content: '';

        clear: both;

        visibility: hidden;

    }



    .content{

        border: solid 1px;

    }

    

    aside,.main{

        /* 设置盒子的最小高度 */

        min-height: 200px;

    }



    .main{

        float: left;

        min-width: 300px;

        width: 100%;

        background: orange;;

    }



    .main div{

        margin: 0 320px 0 290px;

        background: pink;

    }



    aside.left{

        float: left;

        width: 270px;

        margin-left: -100%;

        background: yellow;

    }



    aside.right{

        float: left;

        width: 300px;

        margin-left: -300px;

        background: red;

    }

1

1.6 弹性布局
Display:flex || inline-flex; 可以设置盒子为弹性盒容器

弹性盒子可以用来进行空白空间的分配和子元素的排列方式

弹性盒子组成：弹性盒容器 与 弹性子元素

弹性盒子不会影响子元素和盒容器其他属性的渲染

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <!-- <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div> -->

</div>

1

    .flex-box{

        /* 设置容器为弹性盒容器 */

        display: flex;

        /* 设置排列顺序 row  row-reverse  column column-reverse*/

        /* flex-direction:column-reverse; */

        /* 设置是否强制换行 no-wrap wrap wrap-reverse*/

        /* flex-wrap: wrap; */

        /* 设置主轴方向空白空间的分配 flex-start flex-end center space-between space-around*/

        justify-content: space-around;



        border: solid 1px;

        /* overflow: hidden; */

    }



    .flex-box div{

        height: 100px;

        width: 200px;

        /* margin-left: 60px; */

        /* float: left; */

    }



    .flex-box div.box1{

        background: red;

    }



    .flex-box div.box2{

        background: yellow;

    }



    .flex-box div.box3{

        background: green;

    }



    .flex-box div.box4{

        background: blue;

    }

1

1.7 设置文本垂直居中的方式
Line-height 设置单行文本垂直居中

Padding 挤

表格 v-align

1.8 设置容器垂直居中方式
Padding 挤

Marin 配合 translateY

定位 translateY

Align-items