Python HTML和CSS 9：定位布局

2019-03-01 本文已影响12人 IIronMan

总体内容
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：定位布局

猜你喜欢

热点阅读