技术文章 | Technical articles

html5源码笔记(三)——前端培训机构

一、常见的布局

1.1 固定布局(基本的布局方式)

1.2 百分比布局(流式布局)

widthheigthpaddingmargin使用百分比进行布局

widthpaddingmargin相对父元素的宽度进行百分比设置

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

面试题:

 

border不能用%

绝对定位的元素,如果用%widthheightpadding,分别参考的是自己的定位参考父元素的widthheightwidth。就是离自己最近的已经定位的父代元素


  <div id="container">

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

    </div>

 

        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.3 固比固布局

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

    <div class="content">

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

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

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

    </div>

 

        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.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>

 

        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.5 双飞翼布局

由淘宝的UED团队在页面开发时产生的灵感,来源于页面布局

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

<div class="content clear">

        <div class="main">

            <div>

                中间主要内容

            </div>

        </div>

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

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

    </div>

 

        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.6 弹性布局

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

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

弹性盒子组成:弹性盒容器 弹性子元素

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

 

 

关注微信公众号“icketang”,获取最新前端资讯,学习资料

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg




上一篇文章: html5源码笔记——前端开发培训机构
下一篇文章: html5源码笔记(四)—前端培训机构
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>