CSS

定位

position 值

  • static 默认值，表示没有定位，此时left、right、bottom、top、z-index的设置无效
  • relative 相对定位，总会覆盖正常文档流中的元素
  • absolute 绝对定位，脱离文档流，绝对定位的元素的位置相对于最近的已定位祖先元素来定位
  • fixed 固定定位，脱离文档流

position的一些总结

  • 对于position值为absolute、fixed或者float值为left或者right的元素，它们的宽度会尽可能地小
    static、relative、float:none不变
  • 对于position值为absolute、fixed或者float值为left或者right的元素，即使它们原来是行内元素也会变成块级元素
    static、relative、float:none不变
  • con 通过position或者float脱离文档流时，会变成块级元素，但是并不会像一般块级元素那样宽度会尽可能的大，反而它们会尽可能地小

position 与 float

  • relative + float:非none
    float优先，元素会尽可能地小，同时如果是行内元素也会变成块级元素
    设置left、right、top、bottom时，是相对于float后的位置进行移动，但是注意：
    第一个div左右上下移动之后后面的div并不会补上去，因为relative的移动还会占据本来的位置，如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			div{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: goldenrod;
				position: relative;
				float: left;
				
				
			}
			.one{
				right: 50px;
			}
		</style>
	</head>
	<body>
		<div class="one">
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
	</body>
</html>
  • absolute + float:非none
    float的文字围绕效果会失效 ，但是relative + float:非none文字围绕效果依然会存在
    float浮动效果也失效
    如下，div并没有float:right，而是全部重叠在了左边
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			div{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: goldenrod;
				position: absolute;
				float: right;
				
				
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
	</body>
</html>

  • fixed + float:非none
    同absolute + float:非none

  • absolute和float为兄弟元素时并不会相互影响到它们的位置

  • 不论在前在后，absolute元素总会遮住float元素，可以通过在absolute元素将z-index的值设置为负来改变着一状况
    css

*{
	margin: 0;
	padding: 0;
}
div{		
	width: 300px;
	height: 300px;
	border: 1px solid black;
}
.r{
	position: absolute;	
	background-color: brown;
}
.f{
	float: left;
	background-color: yellow;
}

html

<div class="r">
	1111111111
</div>
<div class="f">
	aaaa
</div>
  • relative不一定会遮住float元素
    relative的z-index<0时不会遮住float，如果不设置，或者>0时则会遮住。注意：z-index属性在float元素中并不会起任何效果

响应式

对于position值为absolute或者fixed的元素，如果没有设置它的高度和宽度，并且top,bottom,left,rigth
都设置了值的话，该元素四边则会缩进到top,bottom,left,right对应的距离。注意relative是没有这个效果的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>absolute</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100%;
				heigth: 100%;			
				border: 1px solid black;
			}
			.r{
				position: absolute;	
				left: 50px;
				right: 50px;
				top: 50px;
				bottom: 50px;
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div class="r">
			
		</div>
	</body>
</html>

图像与文字垂直居中对齐问题

  • 方法
    html
<div>
	我是文字<img src = "url">
</div>

css

img{
	vertical-align: middle;
}
posted @ 2020-04-14 23:49  Mrzhozho  阅读(50)  评论(0)    收藏  举报