盒模型及定位

发表于 | 分类于 ， ，

一、盒模型

概述
盒模型，其实任意标签都有这个概念，可以让标签向外扩展。【padding、border、margin】

盒模型中，padding【内边距】和border可【外边框】以让元素向外扩展。

margin是用来设置元素与元素之间距离的。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒模型</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			/*外边框：可以让元素向外拓展*/
			border: 2px solid red;/*实线向外拓展2px*/
			/*文字到边框的距离*/
			padding: 100px;

		}
		.box1{
			width: 200px;
			height: 200px;
			background: red;
			/*设置标签与标签的距离*/
			margin: 10px;
		}
	</style>
</head>
<body>
	<div class="box">文字文字</div>
	<div class="box1"></div>
</html>

在这里插入图片描述

注：前端所谓的盒模型，是下面这些属性：
margin、padding、border、width、height

二、定位

在前端web开发中，所谓文档流【页面中标签排列方式】：如果想打破文档流让标签可以在任意地方显示，需要定位

块元素：从上到下排列【独占一行】
行内元素：从左到右排列【不独占一行】

2.1 固定定位

fixed

如果你想给某一个标签固定在网页中某一个位置，可以利用固定定位，哪怕页面上下滑动也不影响。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		/*页面默认样式【上、左带有空格】*/
		/*清除全部默认样式*/
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 400px;
			height: 200px;
		}
		body{
			height: 10000px;
		}
		.box1{
			/*固定定位：固定定位的元素不占起始的位置*/
			position: fixed;
			left: 500px;
			top: 200px;
			background: red;
		}
		.box2{
			background: green;
		}
		.box3{
			background: purple;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

注意：

  1. 只有定位元素才有这四个属性：left、top、right、bottom
  2. 固定定位是以网页为参照物，固定在某一个位置不动
  3. 固定定位元素不占起始位置，比如上面例子中，如果只设置position: fixed;，那么下面的元素块会顶上来，把红色块覆盖住

2.2 相对定位

relative

相对定位也可以让元素脱离文档流，元素在进行相对定位的时候，其实相对的是起始的位置进行偏离。
而且要注意：

  1. 相对定位的元素起始位置是占用的，别的元素用不了。也就是起始位置处留空。
  2. 相对定位的left和top等属性是结束位置相对于自己的起始位置的距离，而绝对定位则是相对于整个网页的绝对距离。
    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>相对定位</title>
    	<style type="text/css">
    		/*清除默认样式：默认情况下有缝隙*/
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		div{
    			width: 400px;
    			height: 200px;
    		}
    		.box1{
    			position: relative;
    			left: 500px;
    			top: 200px;
    			background: red;
    		}
    		.box2{
    			background: green;
    		}
    		.box3{
    			background: purple;
    		}
    	</style>

    </head>
    <body>
    	<div class="box1"></div>
    	<div class="box2"></div>
    	<div class="box3"></div>
    </body>
    </html>

2.3绝对定位

absolute

绝对定位也可以让元素脱离文档流

  1. 绝对定位元素，如果没有定位父元素，绝对定位参照页面进行偏移
  2. 绝对定位元素，如果有定位父元素，绝对定位参照定位父元素进行偏移

子绝父相：儿子是绝对定位，参照父亲的相对定位进行偏移
注：绝对定位元素不占起始位置（别的元素可以占起始位置）

没有定位父元素

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位(没有定位父元素)</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 1000px;
		}
		div{
			width: 400px;
			height: 200px;
		}
		.box1{
			position: absolute;
			left: 100px;
			top: 100px;
			background: red;
		}
		.box2{
			background: green;
		}
		.box3{
			background: purple;
		}
	</style>

</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位(有定位父元素)</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
		}

		.outer{
			/*父元素*/
			width: 400px;
			height: 400px;
			margin: 200px;
			background: red;
		}
		.inner{
			width: 200px;
			height: 200px;
			background: green;
		}
	</style>

</head>
<body>
	<div class="outer">
		<div class="inner"></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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位(有定位父元素)</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
		}

		.outer{
			/*父元素*/
			position: relative;
			width: 400px;
			height: 400px;
			margin: 200px;
			background: red;
		}
		.inner{
			width: 200px;
			height: 200px;
			background: green;
		}
	</style>

</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

如果父元素没有进行定位，子元素进行绝对定位，那么inner的参照物还是**网页** 


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>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
		}

		.outer{
			/*父元素*/
			width: 400px;
			height: 400px;
			margin: 200px;
			background: red;
		}
		.inner{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 200px;
			height: 200px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>