html常见的三种页面布局方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html常见的三种页面布局方法相关的知识,希望对你有一定的参考价值。

    流动布局

    流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列
    html中我们按照标签的排列特性可以将它们分成三类:
    1.行级元素:不独占一行,不能设置元素的高度、宽度和底边边距,它的宽度和高度是由他的内容撑起来的。
    2.行内块元素:不独占一行,可以设置元素的宽度、高度和底边边距。
    3.块级元素:独占一行,元素的宽度、高度、上下边的边距都可以设置。
    常用的行级元素有:<span> <a>
    常用的行内块元素:<img><input> <textarea>
    常用的块级元素:<div> <h1> <p> <table> <tr><td><form> <ul> <ol> <li> <dl> <dt> <dd>

    浮动布局

    在默认情况下,块级元素会独占一行,但是当我们想让两个块级元素在同一行排列时,我们就可以用到浮动布局

    层模型

    设置层模型属性会将标签从原来的文本流中上升到浮动层中来,然后调整他在浮动层中的位置,文本层中的标签会覆盖在下面文本层中的标签上面。有相对定位、绝对定位和固定定位三种属性。

参考技术A

    流动布局

    流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列
    在HTML中我们按照标签的排列特性可以将它们分成三类:
    1.行级元素:不独占一行,不能设置元素的高度、宽度和底边边距,它的宽度和高度是由他的内容撑起来的。
    2.行内块元素:不独占一行,可以设置元素的宽度、高度和底边边距。
    3.块级元素:独占一行,元素的宽度、高度、上下边的边距都可以设置。
    常用的行级元素有:<span> <a>
    常用的行内块元素:<img><input> <textarea>
    常用的块级元素:<div> <h1> <p> <table> <tr><td><form> <ul> <ol> <li> <dl> <dt> <dd>

    浮动布局

    在默认情况下,块级元素会独占一行,但是当我们想让两个块级元素在同一行排列时,我们就可以用到浮动布局

    层模型

    设置层模型属性会将标签从原来的文本流中上升到浮动层中来,然后调整他在浮动层中的位置,文本层中的标签会覆盖在下面文本层中的标签上面。有相对定位、绝对定位和固定定位三种属性。

参考技术B 流动布局

流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列
在HTML中我们按照标签的排列特性可以将它们分成三类:
1.行级元素:不独占一行,不能设置元素的高度、宽度和底边边距,它的宽度和高度是由他的内容撑起来的。

中间定宽,两边自适应布局的三种实现方法

中间定宽,两边自适应布局的三种实现方法

1. 浮动加定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽,两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        position: relative;
        overflow: hidden;
    }
    .left{
        float: left;
        width: 50%; 
        margin-left: -150px;
        background-color: red;
    }
    .right{
         float: right;
        width: 50%; 
        margin-right: -150px;
        background-color: yellow;
    }
    .center{
        position: absolute;
        left:50%;
        transform:translateX(-50%);
        width: 300px;
        background-color: green;
    }
    .left .item{
        margin-left: 150px;
    }   
    .right .item{
        margin-right: 150px;
    }   
    </style>

</head>
<body>
    <div class="parent">
    <div class="left">
        <div class="item"></div>
    </div>
    <div class="right">
        <div class="item"></div>
    </div>
    <div class="center">
        <div class="item"></div>
    </div>

    </div>
</body>
</html>

2. calc计算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽,两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .left{
        width: calc(50% - 150px);
        float: left;
        background-color: red;
    }
    .right{
        width: calc(50% - 150px);
        float: right;
        background-color: yellow;
    }
    .center{
        width: 300px;
        float: left;
        background-color: green;
    }
/*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

3. 弹性盒子法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽,两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        display: flex;
    }
    .left{
        flex:1;
        background-color: red;
    }
    .right{
        flex:1;
        background-color: yellow;
    }
    .center{
       
        width: 300px;
        background-color: green;
    }

    </style>
</head>
<body>
    <div class="parent">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    </div>
</body>
</html>

以上是关于html常见的三种页面布局方法的主要内容,如果未能解决你的问题,请参考以下文章

将网页内容转化为PDF的三种方法

android一个页面可以有几种布局方法吗

前端常见的布局方式

前端几种常见的布局方式

我熟知的三种三栏网页宽度自适应布局方法

网页布局方法