css基础篇 06 定位 定位案例 网页布局总结 元素的显示和隐藏_display种类

08 定位 定位案例 网页布局总结 元素的显示和隐藏

定位

种类

静态定位

不定位，满足标准流的规定
和标准流的元素完全一致，可以认为其没有定位

例子

<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="static">
    <div class="example">
        静态定位
    </div>
</div>
1
2
3
4
5
6

定位.css

.example{
	background-color: aqua;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 1px;
}
#static {
	position: static;
}
1
2
3
4
5
6
7
8
9
10
11

相对定位

边偏移是相对于本身的位置的
不脱离标准流
会保留原来的位置
可以单独使用

特点

• 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
• 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
  因此，相对定位并没有脱标。它最典型的应用是给绝对定位当父标签。

例子

<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="relative">
    <div class="example">
        相对定位
    </div>
</div>
1
2
3
4
5
6

定位.css

.example{
	background-color: aqua;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 1px;
}
#relative{
	position: relative;
	top: 10px;
	left: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

绝对定位

边偏移是相对于它有定位的祖先元素来说的（如果他没有有定位的祖先元素，则以DOM为准定位）
脱离标准流
不会保留原来的位置
一般情况下需要和有定位的祖先元素搭配使用（一般子绝父相）

特点

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
• 绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

例子

<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="absolute">
    <div class="example">
        绝对定位
    </div>
</div>
1
2
3
4
5
6

定位.css

.example{
	background-color: aqua;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 1px;
}
#absolute{
	position: absolute;
	top: 10px;
	left: 110px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

固定定位

边偏移是相对于浏览器的可视窗口来说的
脱离标准流
不会保留原来的位置
可以单独使用

例子

<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="fixed">
    <div class="example">
        固定定位
    </div>
</div>
1
2
3
4
5
6

定位.css

.example{
	background-color: aqua;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 1px;
}
#fixed {
	position: fixed;
	top: 10px;
	right: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

粘性定位

边偏移是相对于浏览器的可视窗口来说的（具体作用建议运行代码，语言上有点难以描述）
不脱离标准流
会保留原来的位置
兼容性较低

例子

<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="sticky">
    <div class="example">
        粘性定位
    </div>
</div>
1
2
3
4
5
6

定位.css

.example{
	background-color: aqua;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 1px;
}
#sticky {
	position: sticky;
	top: 10px;
	right: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

总结

定位案例

在07温习的学成在线项目中加入定位的元素

加入前

新增后

hot/new标签

加入前

index.html

<div class="box-content-li">
    <div class="box-content-li-image">
        <a href="#"><img src="images/图层133.png" ></a>
    </div>
    <div class="box-content-li-text">
        Think PHP 5.0 博客系统实战项目演练  
        <div class="box-content-li-text-supplement">
            <div class="box-content-li-text-level">
                高级      	
            </div>
            <div class="box-content-li-text-people">
                &nbsp;·&nbsp;1125人在学习      
            </div>
        </div>
    </div>
</div>
<div class="box-content-li">
    <div class="box-content-li-image">
        <a href="#"><img src="images/图层135.png" ></a>
    </div>
    <div class="box-content-li-text">
        Android 网络图片加载框架详解 
        <div class="box-content-li-text-supplement">
            <div class="box-content-li-text-level">
                高级      	
            </div>
            <div class="box-content-li-text-people">
                &nbsp;·&nbsp;1125人在学习      
            </div>
        </div>
    </div>
</div>
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

style .css

.box-content-li{
	float:left;
	width: 226.8px;
	height: 270px;
	margin:15px 8.5px 0px 8.5px;
	background-color: white;
	box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3); 
}
1
2
3
4
5
6
7
8

新增后

index.html

<div class="box-content-li">
    <div class="box-content-li-tip">
        <img src="images/hot.png" >
    </div>
    <div class="box-content-li-image">
        <a href="#"><img src="images/图层133.png" ></a>
    </div>
    <div class="box-content-li-text">
        Think PHP 5.0 博客系统实战项目演练  
        <div class="box-content-li-text-supplement">
            <div class="box-content-li-text-level">
                高级      	
            </div>
            <div class="box-content-li-text-people">
                &nbsp;·&nbsp;1125人在学习      
            </div>
        </div>
    </div>
</div>
<div class="box-content-li">
    <div class="box-content-li-tip">
        <img src="images/new.png" >
    </div>
    <div class="box-content-li-image">
        <a href="#"><img src="images/图层135.png" ></a>
    </div>
    <div class="box-content-li-text">
        Android 网络图片加载框架详解 
        <div class="box-content-li-text-supplement">
            <div class="box-content-li-text-level">
                高级      	
            </div>
            <div class="box-content-li-text-people">
                &nbsp;·&nbsp;1125人在学习      
            </div>
        </div>
    </div>
</div>
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

style .css

.box-content-li{
	position: relative;
	float:left;
	width: 226.8px;
	height: 270px;
	margin:15px 8.5px 0px 8.5px;
	background-color: white;
	box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3); 
}
.box-content-li-tip {
	width: 40px;
	height: 25px;
	position: absolute;
	top: 4px;
	right: -4px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

侧边栏的添加

加入前

index.html

<div class="box">
    ...
</div>
1
2
3

新增后

index.html

<div class="box">
    <div class="box-sidebar">
        <div class="box-sidebar-li">
            <a href="#">编程入门</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">数据分析师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">机器学习工程师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">前端开发工程师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">人工智能工程师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#"> 全栈工程师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">iOS工程师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">VR开发者</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">深度学习</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">商业预测分析师</a>
        </div>
        <div class="box-sidebar-li">
            <a href="#">Android开发工程师</a>
        </div>
    </div>
    ...
</div>
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

style .css

.box-sidebar{
	position: fixed;
	right: 50%;
	margin-right: 625px;
	top: 50%;
	margin-top: -212.5px;
	z-index:5;
	width: 150px;
	height: 385px;
	padding:20px 17.5px;
	background-color: white;
	font-size: 14px;
	line-height: 35px;
	color: rgb(66,66,66);
}

.box-sidebar-li {
	width: 150px;
	height: 35px;
	padding-left: 15px;	
}
.box-sidebar-li>a:hover{
	color: rgb(0,164,255);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

网页布局总结

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

元素的显示和隐藏

种类

display

display: none 隐藏对象
display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景

例子

<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="display">
    display
</div>
<div>
    div
</div>
1
2
3
4
5
6
7

元素的显示与隐藏.css

*{
	margin: 0px;
	padding:0px;
}
div{
	width: 100px;
	height: 100px;
	background-color: pink;
}

#display{
	display:block;
	background-color: red;
	
}
#display:hover{
	display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

visibility

visibility : hidden; 隐藏对象
visibility 隐藏元素后，继续占有原来的位置

例子

<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="visibility">
    visibility
</div>
<div>
    div
</div>
1
2
3
4
5
6
7

元素的显示与隐藏.css

*{
	margin: 0px;
	padding:0px;
}
div{
	width: 100px;
	height: 100px;
	background-color: pink;
}
#visibility {
	visibility:visible ;
	background-color: orange;
}
#visibility:hover{
	visibility:hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

display和visibility总结

• 如果隐藏元素想要原来位置， 就用 visibility ：hidden

• 如果隐藏元素不想要原来位置， 就用 display ：none (用处更多 重点）

overflow

属性

visible

当内容过多，溢出元素方块的内容也会显示出来

hidden

当内容过多，溢出元素方块的内容不会显示出来

scroll

会有滑动条

auto

当内容过多，会有滑动条

例子

<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="overflow">
    <div id="overflow-visible" class="overflow">
        overflow-visible<br/>
        overflow-visible<br/>
        overflow-visible<br/>
        overflow-visible<br/>
        overflow-visible
    </div>
    <div id="overflow-hidden" class="overflow">
        overflow-hidden<br/>
        overflow-hidden<br/>
        overflow-hidden<br/>
        overflow-hidden<br/>
        overflow-hidden
    </div>
    <div id="overflow-scroll" class="overflow">
        overflow-scroll<br/>
        overflow-scroll<br/>
        overflow-scroll<br/>
        overflow-scroll<br/>
        overflow-scroll
    </div>
    <div id="overflow-auto" class="overflow">
        overflow-auto<br/>
        overflow-auto<br/>
        overflow-auto<br/>
        overflow-auto<br/>
        overflow-auto
    </div>
    <div id="overflow-auto" class="overflow">
        overflow-auto<br/>
        overflow-auto
    </div>
</div>
<div>
    div
</div>
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

元素的显示与隐藏.css

*{
	margin: 0px;
	padding:0px;
}
div{
	width: 100px;
	height: 100px;
	background-color: pink;
}
#overflow{
	width: 500px;
	height: 60px;
}
.overflow{
	float: left;
	height: 100px;
	background-color: yellow;
}
#overflow-visible{
	overflow: visible;
}
#overflow-hidden{
	overflow: hidden;
}
#overflow-scroll{
	overflow: scroll;
}
#overflow-auto{
	overflow: auto;
}
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

总结