# 定位+装饰

定位的基本介绍
定位的基本使用
- 定位初体验
- 使用定位的步骤
静态定位
相对定位
绝对定位
子绝父相
固定定位
元素的层级关系
- 更改定位元素的层级
垂直对齐方式
光标类型
overflow溢出部分显示效果

# 定位

# 定位的基本介绍

# 网页常见布局方式

# 标准流

块级元素独占一行--->垂直布局
行内元素/行内块元素一行显示多个-->水平布局

# 浮动

可以让原本垂直布局的块级元素变成水平布局

# 定位

可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况

# 定位的常见应用场景

可以解决盒子于盒子之间的层叠问题

定位之后的元素层级最高,可以层叠在其他盒子上面
可以让盒子始终固定在屏幕中的某个位置

# 定位的基本使用

# 定位初体验

针对于盒子与盒子之间的层叠问题,推荐使用定位完成

# 使用定位的步骤

# 设置位方式

属性名:position

常见属性值:

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

# 设置偏移值

偏移值设置分为两个方向,水平和竖直方向各选一个使用即可

选取的原则一般是就近原则(离哪边近用哪个)

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

# 静态定位

静态定位又称为文档流定位而且是默认的定位方式
静态定位特点: 元素以左上为基准, 块级元素从上往下依次排列, 行内元素从左向右依次排列
如何控制显示位置: 通过盒子模型中的外边距
格式: position:static;

注意:

静态定位就是之前标准流,不能通过方位属性进行移动
之后说的定位不包括静态定位,一般特指后几种:相对,绝对,固定

# 相对定位

格式: position:relative;
自恋型定位,相对于自己之前的位置进行移动
显示特点:
- 元素不脱离文档流(仍然占着原来的位置)
- 需要配合方位属性实现移动
- 在页面中占位置-->没有脱标
如何控制元素显示位置: 通过left/right/top/bottom设置元素的偏移值,坐标相对于元素的初始位置
应用场景
- 配合绝对定位组CP(子绝父相)
- 用于小范围的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkred;
        }
        div:hover{
            /*margin: 20px 0 0 20px;*/
            /*修改为相对定位*/
            position: relative;
            top:20px;
            left:20px;

        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 绝对定位

格式:position:absolute;
拼爹型定位,相对于非静态定位的父元素进行定位移动
显示特点
- 元素脱离文档流(不占原来的位置)
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置--->已经脱标
如何控制元素的显示位置: 通过left/right/top/bottom设置元素的偏移值**,坐标相对于窗口(默认)**,left=0 top=0 此时元素会显示到窗口的左上角也可以相对于某一个上级元素做偏移(需要在上级元素里面加上相对定位position:relative)
应用场景
- 配合绝对定位组CP(子绝父相)
绝对定位相对于谁移动?
- 祖先元素中没有定位-->默认相对于浏览器进行移动
- 祖先元素中有定位-->相对于最近的有定位的祖先元素进行移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            border: 1px solid darkred;
        }
        #d1{
            /*设置绝对定位*/
            position:absolute;
            right: 0;
            top:0;


        }
        #big{
            width:200px;
            height:200px;
            margin:100px 0 0 100px;
            background-color: green;

        }
        #big>div{
            width:100px;
            height:100px;
            background-color: blue;
            margin:50px 0 0 50px;
            /*做参照物*/
            position:relative;

        }
        #big>div>div{
            width:50px;
            height:50px;

            background-color: red;
            /*设置绝对定位*/
            position: absolute;
            left:0;
            top:0;

        }
    </style>
</head>
<body>
<div id="big">
    <div>
        <div></div>
    </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 子绝父相

场景:让子元素相对于父元素进行自由移动

含义:

子元素:绝对定位
父元素:相对定位

子绝父相好处:

父元素时相对定位,则对网页布局影响最小

# 固定定位

格式:position:fixed;
死心眼型定位,相对于浏览器进行定位移动
显示特点:
- 脱离文档流
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置-->已经脱标
如何控制位置: 通过left/right/top/bottom 设置元素偏移值,相对于窗口.
应用场景
- 让盒子固定在屏幕中的某个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 1000px;
      height: 100px;
      background-color: red;
        position: fixed;/*固定定位*/
    }
    #d2{
        width: 50px;
        height: 200px;
        background-color: blue;
        position: fixed;
        /*通过left/right/top/bottom相对于窗口做偏移*/
        right: 20px;
        bottom: 50px;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 元素的层级关系

不同布局方式元素的层级关系:

标准流<浮动<定位

不同定位之间的层级关系:

相对,绝对,固定默认层级相同
此时HTML中写在下面的元素层级更高,会覆盖上面的元素

# 更改定位元素的层级

场景:改变定位元素的层级

属性名:z-idnex

属性值:数字

数字越大,层级越高

# 装饰

# 垂直对齐方式

# 认识基线

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

# 文字对齐方式

场景:解决行内/行内块元素垂直对齐问题

问题:当图片和文字在一行中显示时,其实底部不是对齐的

# 垂直对齐方式

属性名:vertical-align

属性值:

属性值	效果
baseline	默认,基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            /*行内元素垂直对齐方式: top上 middle中 bottom下 baseline基线*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<input type="text"><img src="../b.jpg" style="width: 50px" alt="">
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 光标类型

场景:设置鼠标光标在元素上时显示的样式

属性名:cursor

常见属性值:

属性值	效果
default	默认值,通常是箭头
pointer	小手效果,提示用户可以点击
text	工字型,提示用户可以选择文字
move	十字光标,提示用户可以移动

# overflow溢出部分显示效果

溢出部分:指的是盒子内容部分所超出盒子范围的区域

场景:控制内容溢出部分的显示效果,如:显示,隐藏,滚动条...

属性名:overflow

常见属性值:

属性值	效果
visible	默认值,溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出,都显示滚动条
auto	根据是否溢出,自动显示或隐藏滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 50px;height: 200px;
      background-color: red;
        position: absolute;
        /*控制元素的显示层级, 值越大显示越靠前*/
        z-index: 1;
    }
    #d2{
      width: 200px;height: 50px;
      background-color: blue;
        position: absolute;
        z-index: 2;
    }
    #d3{
        width: 200px;
        height: 200px;
        /*设置超出的部分是否显示 hidden隐藏  scroll滚动显示*/
        overflow: scroll;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
    <img src="../b.jpg" alt="">
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 页面布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 1000px;
      margin: 0 auto;/*内容整体居中*/
      background-color: #0aa1ed;
    }
    #t_div>div,#b_l_div,#b_r_div>div{
      background-color: #e8e8e8;
    }
    #t_l_div{
      width: 611px;height: 376px;
      float: left;
    }
    #t_r_div{
      width: 375px;height: 376px;
      float: right;
    }
    #t_div{
      overflow: hidden;
      margin-bottom: 10px;
    }
    #b_l_div{
      width: 366px;
      height: 233px;
      float: left;
    }
    #b_r_div{
      float: right;
    }
    #b_div{
      overflow: hidden;
    }
    #b_r_div>div{
      width: 198px;
      height: 233px;
      float: left;
      margin-left: 10px;
    }
    /*左上相关样式*/
    #t_l_div>div{
      width: 245px;
      height: 232px;
      margin: 68px 0 0 36px;
    }
    .title_p{
      font-size: 32px;
      color: #333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      font-weight: bold;
      margin-bottom: 12px;
    }
    a{
      display: block;
      width: 132px;
      height: 40px;
      background-color: #0aa1ed;
      text-align: center;
      line-height: 40px;
      text-decoration: none;
      font-size: 20px;
      color: white;
      border-radius: 3px;
    }
    #t_l_div img{
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 318px;
      height: 319px;
      transition-duration: 1.25s;/*设置动画持续时间1.25秒*/
    }
    img:hover{
      transform: scale(1.1);/*缩放1.1倍*/
    }
    #t_l_div{
      position: relative;/*参照物*/
    }





  </style>
</head>
<body>
<div>
  <div id="t_div">
    <div id="t_l_div">
      <div>
        <p class="title_p">灵越 燃7000系列</p>
        <p>酷睿双核i5处理器|256GB SSD| 8GB内存
          英特尔HD显卡620含共享显卡内存</p>
        <p class="price_p">￥4999.00</p>
        <a href="">查看详情</a>
      </div>
      <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png" alt="">
    </div>
    <div id="t_r_div"></div>
  </div>
  <div id="b_div">
    <div id="b_l_div"></div>
    <div id="b_r_div">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

← 浮动 JavaScript基础 →