前端基础通过《扑克牌阵型》实战定位属性

最新推荐文章于 2023-02-08 13:51:31 发布

play_big_knife

最新推荐文章于 2023-02-08 13:51:31 发布

阅读量427

点赞数 1

分类专栏：前端文章标签：前端前端布局 HTML+CSS html css

本文链接：https://blog.csdn.net/play_big_knife/article/details/116795985

版权

前端专栏收录该内容

18 篇文章 6 订阅

订阅专栏

前端基础：通过《扑克牌阵型》实战定位属性

在网站显示的页面中，除了规规矩矩的页面元素之外，还有一些比较特殊的元素存在，比如某网站中的悬浮广告。如下图所示。

图中的卡通小人“杜绝广告”是一个悬浮窗。

一、项目说明

该项目是对CSS定位属性的使用，将一个浏览器网页窗体中的页面自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。但有一些元素在页面中脱离了文档流的存在，悬浮在网页窗体的上面。CSS定位中的属性作用就是实现了这些脱离文档流的元素在页面中得到处理的。

二、项目效果图展示

一般对CSS样式使用之前，也需要使用HTML技术对页面进行布局，实现了HTML页面的基本结构，继而更好的修饰页面中的元素，对于《扑克牌阵型》来说，布局实现了左右两堆扑克牌图片的竖向排列，最上面一行的中间标题显示的是“善用纸牌，远离赌博”。效果图如下图所示。

三、项目说明

《扑克牌阵型》页面从结构上看，可以总体理解为上下，下面又分为左右结构，上面的就是一个网站的文字，下面左右结构的两幅图片的叠加，先把元素和谐的进行布局上的调整。这样HTML初步布局的代码如下。

<html>
    <head>
        <title>扑克牌堆叠</title>
    </head>
    <body>
        <center><h1>善用纸牌，远离赌博</h1></center>
        <div>
            <div><img src="bg_h1.gif"/></div>
            <div><img src="bg_h10.gif"/></div>
            <div><img src="bg_h11.gif"/></div>
            <div><img src="bg_h12.gif"/></div>
            <div><img src="bg_h13.gif"/></div>
            <div><img src="bg_h2.gif"/></div>
            <div><img src="bg_h3.gif"/></div>
            <div><img src="bg_h4.gif"/></div>
            <div><img src="bg_h5.gif"/></div>
            <div><img src="bg_h6.gif"/></div>
            <div><img src="bg_h7.gif"/></div>
            <div><img src="bg_h8.gif"/></div>
            <div><img src="bg_h9.gif"/></div>
            <div><img src="bg_h1.gif"/></div>
            <div><img src="bg_h10.gif"/></div>
        </div>
        <div>
            div><img src="bg_h11.gif"/></div>
            <div><img src="bg_h12.gif"/></div>
            <div><img src="bg_h13.gif"/></div>
            <div><img src="bg_h2.gif"/></div>
            <div><img src="bg_h3.gif"/></div>
            <div><img src="bg_h4.gif"/></div>
            <div><img src="bg_h5.gif"/></div>
            <div><img src="bg_h6.gif"/></div>
            <div><img src="bg_h7.gif"/></div>
            <div><img src="bg_h8.gif"/></div>
            <div><img src="bg_h9.gif"/></div>
        </div>
    </body>
</html>

这段代码中图片套在div中，原因在于这些图片未来在成型的网页布局中是堆叠存放的，直使用img元素不是不可以，是需要向块级元素进行转化，这里直接把img标签放置在块级元素div标签中，又因为分为左右两部分的堆叠，用两个div再把这些包裹img标签的div分别包裹起来。最上面一层的文字是很容易理解的，使用了h1标签做为一级标题，并使用center标签将h1包裹起来，实现居中的效果。

这样的代码最终是浏览器中的初步效果如下图所示。

四、文档流的认识

正常的文档流布局。一个一个挨着的，到头了，另起一行，接着排布。如下图所示。

每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。内联元素也不会独占一行。它们之间的关系可以用如下图示来表示。

如图所示，浮动元素在块级子元素上，内联子元素是浮动元素或者块级子元素中的元素。也就是浮动元素可以脱离了文档流的存在，即float:left可以脱离文档流。

除了浮动的技术脱离了文档流以外，定位也是脱离文档流进行布局的技术之一。

五、CSS定位属性

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

static
relative
fixed
absolute
sticky

1、Static

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。其决定的页面为正常文档流页面，每个块级元素占据自己的区块（block），元素与元素之间不产生重叠。如下图示各元素的position属性值是默认的static。

从图中所示的结果上看，每个元素不脱离文档流的形式存在着。

2、relative

relative表示相对位置，相对于默认位置static进行偏移,也就是不脱离文档流的条件下实现偏移。如下图所示。

图中中间的紫色元素块使用relative的定位，其位置对原static设置的浅蓝色定位有横向距离left和纵向距离top值。也就是说，relative必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

top指偏移上面的距离
bottom指偏移下面的距离
left指偏移左面的距离
right指偏移右面的距离

距离指向如下图所示。

根据这样的方位指示图，实现div从正常文档流中上部偏移30px，右面偏移50px的语句如下。

{
    position:relative;
    top:30px;
    right:50px;
}

3、absolute 属性值

absolute表示，相对于父级元素进行偏移，这个属性值可以脱离当前的文档流。

它有一个重要的限制条件：一般父级元素使用relative属性值，使其不脱离文档流，absolute可以脱离文档流，但也会在relative限制的父级元素中调整位置，如果父级元素的position属性值为默认的static，absolute调整的位置就会变成整个网页的距离，脱离了文档流。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

如果把父级元素的position属性值设置为relative定位，子元素position属性值是absolute定位，所以子元素的定位是对父元素而言，相对于父元素的顶部向下偏移20px，向右偏移30px。代码如下。

<html>
    <head>
        <style>
            #outer{
                position:relative;
            }
            #inner{
                position:absolute;
                bottom:20px;
                right:30px;
            }
        </style>
    </head>
    <body>
        <div id=“outer”>
            <div id=“inner”>
            </div>
        </div>
    </body>
</html>

4、fixed

fixed表示相对于浏览器窗口进行偏移。元素不随页面滚动而变化。

如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于浏览器窗口计算的，否则初始位置就是元素的默认位置。

5、sticky

stickey跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）这里要谈的是div块状元素的浮动。

在实际布局中，relative和absolute使用比较广泛，这里sticky做一点了解。

六、《扑克牌阵型》布局实现

扑克牌的阵形分为左右两部分，把左右两部分的div的CSS样式设定宽度各占屏幕的50%，高度为800px，具备左浮动的效果，由于这样的CSS样式需要使用到两个div中，这里可以使用class选择器。因为扑克牌背景是白色的，为了使扑克牌看起来比较明显，整个页面的背景使用黑色的色调，这样，显示到页面上的字体颜色为白色，将整个页面设置宽度为1024px。代码如下。

<html>
    <head>
        <title>扑克牌堆叠</title>
        <style>
            body{
                width:1024px;
                background:black;
                color:white;
            }
            .half_div{
                width:50%;
                float:left;
                height:800px;
            }
        </style>
    </head>
    <body>
        <center><h1>善用纸牌，远离赌博</h1></center>
        <div class="half_div">
            <div><img src="bg_h1.gif"/></div>
            <div><img src="bg_h10.gif"/></div>
            <div><img src="bg_h11.gif"/></div>
            <div><img src="bg_h12.gif"/></div>
            <div><img src="bg_h13.gif"/></div>
            <div><img src="bg_h2.gif"/></div>
            <div><img src="bg_h3.gif"/></div>
            <div><img src="bg_h4.gif"/></div>
            <div><img src="bg_h5.gif"/></div>
            <div><img src="bg_h6.gif"/></div>
            <div><img src="bg_h7.gif"/></div>
            <div><img src="bg_h8.gif"/></div>
            <div><img src="bg_h9.gif"/></div>
            <div><img src="bg_h1.gif"/></div>
            <div><img src="bg_h10.gif"/></div>
        </div>
        <div class="half_div">
            <div><img src="bg_h11.gif"/></div>
            <div><img src="bg_h12.gif"/></div>
            <div><img src="bg_h13.gif"/></div>
            <div><img src="bg_h2.gif"/></div>
            <div><img src="bg_h3.gif"/></div>
            <div><img src="bg_h4.gif"/></div>
            <div><img src="bg_h5.gif"/></div>
            <div><img src="bg_h6.gif"/></div>
            <div><img src="bg_h7.gif"/></div>
            <div><img src="bg_h8.gif"/></div>
            <div><img src="bg_h9.gif"/></div>
        </div>
    </body>
</html>

代码实现了纸牌左右两个屏幕窗口的摆放，运行结果如下图所示。

现在可以把包括纸牌内容两个大div设置其CSS属性的position定位属性值为relative，其中的包括的每一个纸牌div的position定位position的属性值为absolute，再通过left和top的具体像素值来确定纸牌的位置。具体代码如下。

<html>
    <head>
        <title>扑克牌堆叠</title>
        <style type="text/css">
                body{
                    width:1024px;
                    background:black;
                    color:white;
                }
                .half_div{
                    width:50%;
                    float:left;
                    position:relative;
                    height:800px;
                }

                #z1{
                    position:absolute;
                    left:100px;
                    top:100px;
                }
                #z2{
                    position:absolute;
                    left:120px;
                    top:120px;

                }
                #z3{
                    position:absolute;
                    left:140px;
                    top:140px;

                }
                #z4{
                    position:absolute;
                    left:160px;
                    top:160px;

                }
                #z5{
                    position:absolute;
                    left:180px;
                    top:180px;

                }
                #z6{
                    position:absolute;
                    left:200px;
                    top:200px;

                }
                #z7{
                    position:absolute;
                    left:220px;
                    top:220px;

                }
                #z8{
                    position:absolute;
                    left:240px;
                    top:240px;

                }
                #z9{
                    position:absolute;
                    left:260px;
                    top:260px;

                }
                #z10{
                    position:absolute;
                    left:280px;
                    top:280px;
                }
                #z11{
                    position:absolute;
                    left:300px;
                    top:300px;
                }
                #z12{
                    position:absolute;
                    left:320px;
                    top:320px;
                }
                #z13{
                    position:absolute;
                    left:340px;
                    top:340px;
                }
                #z14{
                    position:absolute;
                    left:100px;
                    top:100px;
                }
                #z15{
                    position:absolute;
                    left:120px;
                    top:120px;
                }
                #z16{
                    position:absolute;
                    right:140px;
                    top:140px;
                }
                #z17{
                    position:absolute;
                    right:160px;
                    top:160px;
                }
                #z18{
                    position:absolute;
                    right:180px;
                    top:180px;
                }
                #z19{
                    position:absolute;
                    right:200px;
                    top:200px;
                }
                #z20{
                    position:absolute;
                    right:220px;
                    top:220px;
                }
                #z21{
                    position:absolute;
                    right:240px;
                    top:240px;
                }
                #z22{
                    position:absolute;
                    right:260px;
                    top:260px;
                }
                #z23{
                    position:absolute;
                    right:280px;
                    top:280px;
                }
                #z24{
                    position:absolute;
                    right:300px;
                    top:300px;
                }
                #z25{
                    position:absolute;
                    right:320px;
                    top:320px;
                }
                #z26{
                    position:absolute;
                    right:340px;
                    top:340px;
                }
        </style>
    </head>
    <body>
        <center><h1>善用纸牌，远离赌博</h1></center>
        <div class="half_div">
            <div id="z1"><img src="bg_h1.gif"/></div>
            <div id="z2"><img src="bg_h10.gif"/></div>
            <div id="z3"><img src="bg_h11.gif"/></div>
            <div id="z4"><img src="bg_h12.gif"/></div>
            <div id="z5"><img src="bg_h13.gif"/></div>
            <div id="z6"><img src="bg_h2.gif"/></div>
            <div id="z7"><img src="bg_h3.gif"/></div>
            <div id="z8"><img src="bg_h4.gif"/></div>
            <div id="z9"><img src="bg_h5.gif"/></div>
            <div id="z10"><img src="bg_h6.gif"/></div>
            <div id="z11"><img src="bg_h7.gif"/></div>
            <div id="z12"><img src="bg_h8.gif"/></div>
            <div id="z13"><img src="bg_h9.gif"/></div>
            <div id="z14"><img src="bg_h1.gif"/></div>
            <div id="z15"><img src="bg_h10.gif"/></div>
        </div>
        <div class="half_div">
            <div id="z16"><img src="bg_h11.gif"/></div>
            <div id="z17"><img src="bg_h12.gif"/></div>
            <div id="z18"><img src="bg_h13.gif"/></div>
            <div id="z19"><img src="bg_h2.gif"/></div>
            <div id="z20"><img src="bg_h3.gif"/></div>
            <div id="z21"><img src="bg_h4.gif"/></div>
            <div id="z22"><img src="bg_h5.gif"/></div>
            <div id="z23"><img src="bg_h6.gif"/></div>
            <div id="z24"><img src="bg_h7.gif"/></div>
            <div id="z25"><img src="bg_h8.gif"/></div>
            <div id="z26"><img src="bg_h9.gif"/></div>

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

代码中每一个含有图片的div都设置了id值，其值对应的CSS样子都是在调整position定位属性为absolute绝对定位，left值或right值是左右两面纸牌图片的横向位置定义，top值是左右两面纸牌图片的竖向位置定位，其定位采用了层级的覆盖关系。代码对应的效果图如图所示。

在《扑克牌阵型》页面中，定位position的属性是非常重要的功能，在DIV+CSS的前端布局中也是非常有用的属性。

github地址:https://github.com/wawacode/puke_card

play_big_knife

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
前端基础通过《扑克牌阵型》实战定位属性

前端基础：通过《扑克牌阵型》实战定位属性在网站显示的页面中，除了规规矩矩的页面元素之外，还有一些比较特殊的元素存在，比如某网站中的悬浮广告。如下图所示。图中的卡通小人“杜绝广告”是一个悬浮窗。一、项目说明该项目是对CSS定位属性的使用，将一个浏览器网页窗体中的页面自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。但有一些元素在页面中脱离了文档流的存在，悬浮在网页窗体的上面。CSS定位中的属性作用就是实现了这些脱离文档流的元素在页面中得到处理的。二、项目效果图展示
复制链接

扫一扫