前端学习笔记之——创建布局

最新推荐文章于 2023-08-21 09:15:19 发布

前丨尘忆·梦

最新推荐文章于 2023-08-21 09:15:19 发布

阅读量284

点赞数 1

分类专栏：前端文章标签： css3 css

本文链接：https://blog.csdn.net/qq_36879493/article/details/118279306

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

创建布局

1、定位内容

控制内容最简单的方式就是通过定位，这允许你使用浏览器改变元素的布局方式。

属性	说明	值
position	设置定位方法
left right top bottom	为定位元素设置偏移量	<长度> <百分数> zuto
z-index	设置定位元素的层叠顺序	数字

1.1、设置定位类型

position 属性设置了元素的定位方法。

值	说明
static	元素为普通布局，默认值
relative	元素位置相对于普通位置定位
absolute	元素相对于 position 值不为 static 的第一位祖先元素来定位
fixed	元素相对于浏览器窗口来定位

position 属性的不同值指定了元素定位所针对的不同元素。使用 top、bottom、left 和 right 属性设置元素的偏移量的时候，值的是相对于 position 属性指定的元素的偏移量。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            img {
                top: 5px;
                left:150px;
                border: medium double black;
            }
        </style>
    </head>
    <body>       
        <p>
            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices. 
        </p>
        <p>
            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples.

        </p>
        <img id="banana" src="banana-small.png" alt="small banana"/>
        <p>
            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.
        </p>
        <p>        
            <button>Static</button>
            <button>Relative</button>
            <button>Absolute</button>
            <button>Fixed</button>
        </p>
        <script>
            var buttons = document.getElementsByTagName("BUTTON");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("banana").style.position = 
                        e.target.innerHTML;
                };
            }
        </script>
    </body>
</html>

添加了一个小脚本，它可以基于被按下的按钮改变 img 元素的 position 属性的值。注意代码中 left 属性设置为 150px，将 top 设置为 5px，意思是只要 position 值不设为 static，img 元素就将沿水平轴偏移 150 像素，沿垂直轴偏移 5 像素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cJOENbVZ-1624796525593)(素材/position属性取static和relative值.png)]

relative 值为元素应用 top、bottom、left 和 right 属性，相对于 static 值确定的位置重新定位元素。从图中可以看到，left 属性和 top 属性的取值引起 img 元素向右、向下移动。

absolute 值会根据 position 值不是 static 的最近的祖先元素的位置来定位元素。上面例子中，相对于 body 元素定位。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FQFPj7Ze-1624796525595)(素材/position属性取absolute值.png)]

注意一下，如果我们滚动浏览器，img 元素会跟剩余的内容一起移动。可以跟 fixed 比较一下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vT7Ty8Xi-1624796525596)(素材/position属性取fixed值.png)]

使用 fixed 值，元素是相对于浏览器窗口定位的。也就是说元素始终占据同样的位置，无论剩余内容是否向上向下滚动。

1.2、设置元素的层叠顺序

z-index 属性指定元素显示的层叠顺序。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            img {
                border: medium double black;;
                background-color: lightgrey;
                position: fixed;
            }
            
            #banana {
                z-index: 1;
                top: 15px;
                left:150px;
            }
            
            #apple {
                z-index: 2;
                top: 25px;
                left:120px;                
            }
        </style>
    </head>
    <body>       
        <p>
            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices. 
        </p>
        <p>
            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples.

        </p>
        <img id="banana" src="banana-small.png" alt="small banana"/>
        <img id="apple" src="apple.png" alt="small banana"/>
        <p>
            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.
        </p>
    </body>
</html>

创建了两个固定位置的 img 元素，设置了它们 top 和 left 值使两者部分图像重叠。id 值为 apple 的 img 元素的 z-index 值（2）比 id 值为 banana 的 img 元素的 z-index 值（1）要大，因此苹果图像显示在香蕉图像上面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-od1nIEuX-1624796525596)(素材/使用z-index属性.png)]

z-index 属性的默认值为 0，因此浏览器默认将图像显示在 p 元素上。

2、创建多列布局

多列特性允许在多个垂直列中布局内容，跟报纸的排版方式类似。

属性	说明	值
column-count	指定列数	<数值>
column-fill	指定内容在列与列之间的分布方式，balance 指浏览器确保不同列之间的长度差异尽可能小。如果取 auto 值，则按照顺序填充列	balance auto
column-gap	指定列之间的距离	<长度值>
column-rule	在一条声明中设置 column-rule-* 的简写属性	<宽度值> <样式> <颜色>
column-rule-color	设置列之间的颜色规则	<颜色>
column-rule-style	设置列之间的样式规则	跟 border-style 属性的值相同
column-rule-width	设置列之间的宽度	<长度值>
columns	设置 column-span 和 column-width 的简写属性	<长度值> <数值>
column-span	指定元素横向能跨多少列	None all
column-width	指定列宽	<长度值>

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {
                column-count: 3;
                column-fill: balance;
                column-rule: medium solid black;
                column-gap: 1.5em;
            }
            
            img {
                float: left;
                border: medium double black;
                background-color: lightgrey;
                padding: 2px;
                margin: 2px;
            }
        </style>
    </head>
    <body>       
        <p>
            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
            <img src="apple.png" alt="apple"/>
            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples. 
            <img src="banana-small.png" alt="banana"/>            
            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.

            And, of course, there are fruits which are truely unique - I am put in mind
            of the durian, which is widely consumed in SE Asia and is known as the
            "king of fruits". The durian is largely unknown in Europe and the USA - if
            it is known at all, it is for the overwhelming smell, which is compared
            to a combination of almonds, rotten onions and gym socks.
        </p>
    </body>
</html>

代码为 p 元素应用了几个多列属性。p 元素中混合了 text 元素和 img 元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MLXazHSP-1624796525597)(素材/多列布局.png)]

从图中可以看出，p 元素中的内容从一列流向另一列，跟报纸中的排版一样。代码中，我为 img 元素应用了 float 属性，这样 p 元素中的文本内容就可以流畅地环绕在图像周围。

上面的代码使用了 column-count 属性将页面布局分为三列。如果窗口大小调整，浏览器会自行调整列宽度，从而保留布局中的列数。另一种方法是指定列宽。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {
                /*column-count: 3;*/
				column-width: 10em;
                column-fill: balance;
                column-rule: medium solid black;
                column-gap: 1.5em;
            }
            
            img {
                float: left;
                border: medium double black;
                background-color: lightgrey;
                padding: 2px;
                margin: 2px;
            }
        </style>
    </head>
    <body>       
        <p>
            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
            <img src="apple.png" alt="apple"/>
            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples. 
            <img src="banana-small.png" alt="banana"/>            
            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.

            And, of course, there are fruits which are truely unique - I am put in mind
            of the durian, which is widely consumed in SE Asia and is known as the
            "king of fruits". The durian is largely unknown in Europe and the USA - if
            it is known at all, it is for the overwhelming smell, which is compared
            to a combination of almonds, rotten onions and gym socks.
        </p>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pmGIbgfp-1624796525598)(素材/使用列宽.png)]

3、创建弹性盒布局

弹性盒布局（也称为伸缩盒），为 display 属性添加了一个新值（flexbox），并定义了其他几个属性。使用弹性布局可以创建堆浏览器窗口调整响应良好的流动界面。这是通过在包含元素之间分配容器块中未使用的空间来实现。新属性如下：

flex-align；
flex-direction；
flex-order；
flex-pack。

定义一个弹性盒要解决的问题：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {
                float:left;
                width: 150px;
                border: medium double black;
                background-color: lightgrey;
            }
    </style>
    </head>
    <body>
        <div id="container">
            <p id="first">
                There are lots of different kinds of fruit - there are over 500 varieties
                of banana alone. By the time we add the countless types of apples,
                oranges, and other well-known fruit, we are faced with thousands
                of choices.
            </p>
            <p id="second">
                One of the most interesting aspects of fruit is the variety available in
                each country. I live near London, in an area which is known for
                its apples. 
            </p>
            <p id="third">
                When travelling in Asia, I was struck by how many different kinds of
                banana were available - many of which had unique flavours and which
                were only avaiable within a small region.   
            </p>
        </div>
    </body>
</html>

div 元素包含三个 p 元素，想将 p 元素显示在水平行中，用 float 属性很容易做到这一点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rxr51E7z-1624796525599)(素材/具有未分布的空空间的元素.png)]

这里我们使用弹性盒解决的问题是处理页面上 p 元素右边的空空间块。在这个例子中，可以使用百分比宽度，但弹性盒解决方案要更优雅，页面看起来流动性也会好很多。下表实现弹性盒功能的三个 -webkit 属性。

属性	说明	值
box-align	如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间	start end center baseline stretch
box-flex	指定元素的可伸缩性，应用于弹性盒容器内的元素	<数值>
box-pack	如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间	start end center justify

3.1、创建简单的弹性盒

可以使用 display 属性创建弹性盒。标准值是 flexbox，不过在标准完成和实现之前，必须使用 -webkit-box。使用 box-flex 属性告诉浏览器如何分配元素之间的未使用空间。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {
                width: 150px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
            }
            #container {
                display: -webkit-box;
            }
            #second {
               -webkit-box-flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <p id="first">
                There are lots of different kinds of fruit - there are over 500 varieties
                of banana alone. By the time we add the countless types of apples,
                oranges, and other well-known fruit, we are faced with thousands
                of choices.
            </p>
            <p id="second">
                One of the most interesting aspects of fruit is the variety available in
                each country. I live near London, in an area which is known for
                its apples. 
            </p>
            <p id="third">
                When travelling in Asia, I was struck by how many different kinds of
                banana were available - many of which had unique flavours and which
                were only avaiable within a small region.   
            </p>
        </div>
    </body>
</html>

display 属性会应用到弹性盒容器。弹性盒容器是具有多余空间，且我们想对其中的内容应用弹性布局的元素。box-flex 属性会应用到弹性盒容器内的元素，告诉浏览器当容器大小改变时哪些元素的尺寸是弹性的。在这个例子中，选择了 id 值为 second 的 p 元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPoON5SA-1624796525600)(素材/可伸缩元素.png)]

放大浏览器窗口，这导致 div 容器扩大以及第二个段落伸长，从而占据多余空间。伸缩不仅是对多余空间来说的，如果缩小浏览器窗口，可伸缩元素同样会被调整尺寸以适应空间损失。

3.2、伸缩多个元素

应用 box-flex 属性告诉浏览器伸缩多少个元素的尺寸。你设置的值决定了浏览器分配空间的比例。

<style>
            p {
                width: 150px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
            }
            #container {
                display: -webkit-box;
            }
            #first {
               -webkit-box-flex: 3;
            }
            #second {
               -webkit-box-flex: 1;
            }
</style>

这里将 box-flex 属性应用到了 id 值为 first 的 p 元素。此处 box-flex 属性的值为 3，意思是浏览器为其分配的多余空间是为 id 值为 second 的 p 元素的三倍。当你创建此类比例时，你指的是元素的可伸缩性。你只是使用这个比例来分配多余的空间，或者减少元素的尺寸，而不是改变它的首选尺寸。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g1Udcany-1624796525601)(素材/创建可伸缩比例.png)]

3.3、处理垂直空间

box-align 属性告诉浏览器如何处理多余的垂直空间。

默认情况下垂直拉伸元素以填充多余空间。上图就是这种情况，前两个 p 元素的尺寸是调整过的，内容下面多出了空的空间。

值	说明
start	元素沿容器的顶边放置，任何空空间都在其下方显示
end	元素沿容器的底边放置，任何空空间都在其上方显示
center	多余的空间被平分为两部分，分别显示在元素的上方和下方
stretch	调整元素的高度，以填充可用空间

<style>
            p {
                width: 150px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
            }
            #container {
                display: -webkit-box;
                -webkit-box-direction: reverse;
                -webkit-box-align: end;
            }
            #first {
               -webkit-box-flex: 3;
            }
            #second {
               -webkit-box-flex: 1;
            }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-USEISW0A-1624796525602)(素材/应用box-align属性.png)]

使用了 end 属性，这代表内容元素会沿着容器元素的底边放置，垂直方向任何多余的空间都会显示到内容元素上方。

3.4、处理最大尺寸

弹性盒模型伸缩时不会超过内容元素的最大尺寸值。如果存在多余空间，浏览器会伸缩元素，直到达到最大允许尺寸。box-pack 属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间仍未分配完毕时应该如何处理。

值	说明
start	元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边
end	元素从右边界开始放置，任何未分配的空间显示到最后一个元素的左边
center	多余的空间平均分配到第一个元素的左边和最后一个元素的右边
justify	多余空间均匀分配到各个元素之间

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
    p {
        width: 150px;
        max-width: 250px;
        border: medium double black;
        background-color: lightgrey;
        margin: 2px;
    }
    #container {
        display: -webkit-box;
        -webkit-box-direction: reverse;
        -webkit-box-align: end;
        -webkit-box-pack: justify;
    }
    #first {
        -webkit-box-flex: 3;
    }        
    #second {
       -webkit-box-flex: 1;
    }
</style>
    </head>
    <body>
        <div id="container">
            <p id="first">
                There are lots of different kinds of fruit - there are over 500 varieties
                of banana alone. By the time we add the countless types of apples,
                oranges, and other well-known fruit, we are faced with thousands
                of choices.
            </p>
            <p id="second">
                One of the most interesting aspects of fruit is the variety available in
                each country. I live near London, in an area which is known for
                its apples. 
            </p>
            <p id="third">
                When travelling in Asia, I was struck by how many different kinds of
                banana were available - many of which had unique flavours and which
                were only avaiable within a small region.   
            </p>
        </div>
    </body>
</html>

在可伸缩 p 元素达到最大宽度后，浏览器开始在元素之间分配多余空间。注意，多余空间只是分配到元素与元素之间，第一个元素之前或最后一个元素之后都没分配。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKyNhBA5-1624796525603)(素材/使用box-pack属性.png)]

4、创建表格布局

跟表格布局相关的 display 属性的值：

值	说明
table	类似 table 元素
inline-table	类似 table 元素，但是创建一个行内元素
table-caption	类似 caption 元素
table-column	类似 col 元素
table-column-group	类似 colgroup 元素
table-header-group	类似 thead 元素
table-row-group	类似 group 元素
table-footer-group	类似 tfoot 元素
table-row	类似 tr 元素
table-cell	类似 td 元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
        
            #table {
                display: table;
            }            
            div.row {
                display: table-row;
                background-color: lightgrey;
            }
        
            p {
                display: table-cell;
                border: thin solid black;
                padding: 15px;
                margin: 15px;
            }
            
            img {
                float:left;
            }
        
        </style>
    </head>
    <body>
        <div id="table">
            <div class="row">
                <p>
                    There are lots of different kinds of fruit - there are over 500
                    varieties of banana alone. By the time we add the countless types of
                    apples, oranges, and other well-known fruit, we are faced with
                    thousands of choices.
                </p>
                <p>
                    One of the most interesting aspects of fruit is the variety available
                    in each country. I live near London, in an area which is known for
                    its apples. 
                </p>
                <p>
                    When travelling in Asia, I was struck by how many different kinds of
                    banana were available - many of which had unique flavours and which
                    were only avaiable within a small region.   
                </p>
            </div>
            <div class="row">
                <p>
                    This is an apple. <img src="apple.png" alt="apple"/>
                </p>
                <p>
                    This is a banana. <img src="banana-small.png" alt="banana"/>
                </p>
                <p>
                    No picture here
                </p>
            </div>
        </div>
    </body>
</html>