CSS中定位实例

最新推荐文章于 2022-12-28 18:00:30 发布

shwanglp

最新推荐文章于 2022-12-28 18:00:30 发布

阅读量2.1k

点赞数

分类专栏： HTML5 CSS

本文链接：https://blog.csdn.net/shwanglp/article/details/53572368

版权

HTML5 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

1. 标准流(普通流)

代码模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>osition</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .box1{
            background: red;
        }
        .box2{
            margin-left: 20px;
            margin-top: 20px;
            background: green;
        }
        .box3{
            background: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

执行结果：

PS：除了特殊定制之外，都是标准流

2. 浮动流

2.1 浮动属性：

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

按照上一篇概念中的第一个例子来编写第一个浮动流的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>osition</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .box1{
            background: red;
            float: left;
        }
        .box2{
            background: green;
        }
        .box3{
            background: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

显示结果如下：

讲第一个格子设定为向左浮动，这设定毕之后，第一个格子脱离标准，处于浮动状态，第二个和第三个格子向上移动，然后第一个格子向左移动，覆盖了第二个格子，界面显示的结果就是第一个和第三个格子。

不设置浮动的时候显示图片和文本内容如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>osition</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

    </style>
</head>
<body>
<div>
    <img src="images/葫芦娃.jpg" alt="">
    <p class="des">吉克隽逸（Summer），汉名王隽逸，1988年05月13日出生于四川省凉山州甘洛县，毕业于四川外国语大学重庆南方翻译学院，中国大陆女歌手。
        2009年参加《快乐女声》获得广州唱区30强。2012年参加《中国好声音》获得刘欢组最终冠军和巅峰对决季军。2012年底签约天浩盛世和环球唱片，并发行首支单曲《彩色的黑》。2013年出演中美合资电影《绝命逃亡》中的女配角，与尼古拉斯凯奇、刘亦菲、海登·克里斯滕森等人合作，并演唱片尾曲《争气》。
        2014年02月26日发行个人首张同名专辑。2014年3月23日在北京工人体育馆举行首场个人演唱会。8月28日，吉克隽逸参加了南京第二届青年奥林匹克运动会，演唱歌曲《光环》。2015年2月19日其主演的《钟馗伏魔：雪妖魔灵》在中国大陆上映，并与刘欢合唱主题曲《奋不顾身》。2015年5月27日，由吉克隽逸演唱的《呼唤爱》入选北京申办冬奥会优秀音乐作品。[1]  同年9月为第24届中国金鸡百花电影节献唱主题曲《三十而立》。[2]  2016年10月20日，吉克隽逸获得2016网易时尚跨界盛典年度最具实力女歌手大奖。</p>
</div>
</body>
</html>

显示结果如下：