Python HTML和CSS 9：定位布局-阿里云开发者社区

Python HTML和CSS 9：定位布局

2022-05-22 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Python HTML和CSS 9：定位布局

总体内容

1、文档流的介绍

2、关于定位的属性以及使用

3、案例的展示

一、文档流的介绍

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

二、关于定位的属性以及使用

2.1、用css的position属性来设置元素的定位类型，postion的设置项如下：

<1>、relative 生成 相对定位 元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

.box1{
     background-color: pink;
     position: relative;
     left: 50px;
     top: 50px;
}

提示：position 要配合 left、right、top、bottom 来使用

<2>、absolute 生成 绝对定位 元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

// 父级样式
.con{
     width: 400px;
     height: 400px;
     border: 1px solid #000;
     margin: 50px auto;
     position: relative;
 }
.box1,.box2{
     width: 300px;
     height: 100px;
     margin: 10px;
}
.box1{
    background-color: pink;
    /* 2、绝对定位 */
    position: absolute;
    left: 50px;
    top: 50px;
 }

提示：在设置为 position: relative; 后，就会相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。，上图我们对 box1的父级元素进行了定位

<3>、fixed 生成 固定定位 元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位

.box1{
     background-color: pink;
     /* 3、固定定位 */
     position: fixed;
     left: 50px;
     top: 50px;
 }

<4>、static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
<5>、inherit 从父元素继承 position 属性的值。

2.2、定位元素的偏移：定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

提示： left 是相对于左边向右偏移，right 是相对于右边向左偏移，top 是相对于上面向下偏移，bottom 是相对于下面向上偏移。

2.3、定位元素层级：定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置元素的层级

在元素设置定位后，层级的是按照标签的先后顺序来排列的，最后面的标签在显示的时候再最上面，我们可以使用 z-index 属性来改变层级顺序的问题，默认的层级是小于 10的，如下例子

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>定位的层级</title>
     <style type="text/css">
        .con{
             width: 400px;
             height: 400px;
             border: 1px solid #000;
             margin: 50px auto;
             position: relative;
         }
        .con div{
             width: 90px;
             height: 90px;
             position: absolute;
         }
         .box1{
             background-color: pink;
             left: 20px;
             top: 20px;
             z-index:10;
         }
         .box2{
             background-color: red;
             left: 40px;
             top: 40px;
         }
         .box3{
             background-color: green;
             left: 60px;
             top: 60px;
         }
         .box4{
             background-color: yellow;
             left: 80px;
             top: 80px;
         }
     </style>
</head>
<body>
      <div class="con">
          <div class="box1">box1</div>
          <div class="box2">box2</div>
          <div class="box3">box3</div>
          <div class="box4">box4</div>
      </div>
</body>
</html>

提示：我们可以个每个盒子的样式设置 z-index 来改变其展示的层级顺序

2.4、定位元素特性：绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

三、案例的展示

3.1、制作如下图的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习一</title>
    <style type="text/css">
        .con{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto;
            /* 相对定位 */
            position: relative;
            border-radius: 10px;
        }
        .box1{
            width: 28px;
            height: 28px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 28px;
            font-size: 16px;
            /* 绝对定位 */
            position: absolute;
            left: 86px;
            bottom: 86px;
            /* 圆角的设置 */
            border-radius: 14px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1">10</div>
    </div>
</body>
</html>

3.2、固定在顶部的水平居中的菜单

!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>定位练习二</title>
   <style type="text/css">
       .con{
           width: 400px;
           height: 80px;
           background-color: yellow;
           position: fixed;
           left: 50%;
           margin-left: -200px;
       }
       .con div{
           line-height: 80px;
           text-align: center;
       }
       div{
           text-align: center;
       }
   </style>
</head>
<body>
    <div class="con">
        <div>固定在顶部的水平居中的菜单</div>
    </div>
</body>
</html>

提示：上述代码要注意居中的技巧

水平居中

left: 50%;
margin-left: -盒子宽度的一半px;

垂直居中

top: 50%;
margin-top: -盒子高度的一半px;

Python HTML和CSS 9：定位布局

一、文档流的介绍

二、关于定位的属性以及使用

三、案例的展示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Python HTML和CSS 9：定位布局

一、文档流的介绍

二、关于定位的属性以及使用

三、案例的展示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像