• 中文
    • English
  • 注册
  • 查看作者
  • 5:CSS定位和位置

    一.  display

    行级标签不能设置width和height,可以通过display属性来修改元素的性质。可选值:

    • block:设置为块级标签

    • inline:设置为行级标签

    • inline-block:设置为行内块级标签(不会单独占一行,但是可以设置宽高)

    • none:隐藏元素,所占据的位置也会消失

    二.  visibility

    visibility属性可以设置元素是否可见,和display不同,使用visibility隐藏一个元素,隐藏后其在文档所占的位置会依然保持,不会被其他元素覆盖。可选值:

    • visible:可见

    • hidden:隐藏

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			#zj{
    				visibility:hidden;
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字
    		</div>
    
    		<div id="zj"> 
    			div中的文字
    		</div>
    		<div> 
    			div中的文字
    		</div>
    	</body>
    </html>

    三.  overflow

    当标签中的内容超出了样式的大小时,浏览器会让内容溢出盒子,通过overflow来控制内容溢出的情况,可选值:

    • visible:默认值

    • scroll:添加滚动条

    • auto:根据需求添加滚动条

    • hidden:隐藏溢出盒子的内容

    比如div如果不设置宽高,宽高的大小就根据内容自动增加,可以给div设置一个固定的大小,这样内容超出这个固定大小后,就可以使用overflow来控制。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div{
    				width:300px;
    				height:100px;
    				overflow:auto;
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字div中的文字div中的文字div中的文字div中的文字div中的文字div中的文字
    			div中的文字div中的文字div中的文字div中的文字div中的文字div中的文字div中的文字
    			div中的文字div中的文字div中的文字div中的文字div中的文字
    		</div>
    
    	</body>
    </html>

    四.  文档流

    将浏览器窗体自上而下分成一行一行,并在每行中按照从左到右的顺序排放元素,也就是说文档流中的元素默认会紧贴到上一个元素的右边,如果右边不足以放下元素,则会另起一行,在新行继续从左到右摆放。这样一来每一个块级元素都会另起一行,由于文档流的限制,导致布局比较麻烦

    五.  浮动

    浮动就是使元素脱离原来的文档流,在父元素中浮动起来。使用float属性可以设置浮动,块级标签和行级标签都可以浮动

    当一个行级标签浮动以后就变成了块级标签

    当一个块级标签浮动后,宽度会被内容撑开,所以当浮动一个块级标签时一般会指定一个宽度。可选值:

    • none:不浮动

    • left:左浮动 (从左到右依次排列:| 1-2-3-4               |)

    • right:右浮动(从右到左依次排列:|              4 3 2 1 |)

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div{
    				width:300px;
    				height:100px;
    				float:left;
    				background-color:green;
    				margin:10px;
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字1
    		</div>
    		<div> 
    			div中的文字2
    		</div>
    		<div> 
    			div中的文字3
    		</div>
    	</body>
    </html>

    另外一般情况下,浮动的元素,会用一个标签包起来,为了防止高度塌陷,一般会给这标签页设置高度。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			#zj1{
    				width:1000px;
    				height:150px;
    				border:2px solid purple;
    				float:left;
    			}
    			div{
    				height:150px;
    			}
    			
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			
    			</div>
    					
    		</div>
    		<span> 哈哈哈</span>
    	</body>
    </html>

    六.  定位

    position属性可以控制浏览器如何以及在何处显示元素,可以使用position属性将元素放置到网页的任意位置。可选值:

    • static:静态定位

    • relative :相对定位

    • absolute :绝对定位

    • fixed:固定定位

    1.  static:静态定位

    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

    2.  relative :相对定位

    每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。不会影响到周围元素。开启了相对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。特点:

    • 如果不设置元素的偏移量,元素的位置不会发生改变

    • 相对定位不会使元素脱离文档流。

    • 相对定位不会改变元素原来的特性

    • 相对定位会使元素层级提升,使元素可以覆盖文档流中的元素

    • top、right、bottom、left意为将该元素距离上、右、下、左所少px,可以使用负数,负数则进行反方向的偏移。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:200px;
    				margin:5px;
    			}
    		
    			#zj1{	
    				height:150px;
    				background-color:yellow;
    			
    			}
    			#zj2{
    				height:150px;
    				background-color:red;
    				position:relative;
    				top:-20px;
    				left:30px;
    			}
    			#zj3{
    				height:150px;
    				background-color:blue;
    				position:relative;
    				top:20px;
    				left:30px;
    			}
    			#zj4{
    				height:150px;
    				background-color:green;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			
    			</div>
    			<div id="zj2"> 
    			
    			</div>
    			<div id="zj3"> 
    			
    			</div>
    			<div id="zj4"> 
    			
    			</div>
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    3.  absolute :绝对定位

    将position属性设置为absolute时,开启元素的绝对定位,开启绝对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。绝对定位特点:

    • 绝对定位会使元素脱离文档流

    • 绝对定位的块级元素的宽度和高度会被内容撑开

    • 绝对定位会使行级元素变成块级元素

    • 一般在使用绝对定位时,会同时为其父元素开启相对定位,以确保元素可以相对于父元素进行定位

    下面针对上面的提到的几个特点,分别举例说明:

    绝对定位会使元素脱离文档流

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    				position:absolute;
    			}
    			#zj3{
    				background-color:blue;
    			}
    			#zj4{
    				background-color:green;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			
    			</div>
    			<div id="zj2"> 
    			
    			</div>
    			<div id="zj3"> 
    			
    			</div>
    			<div id="zj4"> 
    			
    			</div>
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    绝对定位的块级元素的宽度和高度会被内容撑开

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    			}
    			#zj3{
    				background-color:blue;
    			}
    			#zj4{
    				background-color:green;
    				position:absolute;
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			11
    			</div>
    			<div id="zj2"> 
    			22
    			</div>
    			<div id="zj3"> 
    			33
    			</div>
    			<div id="zj4"> 
    			44
    			</div>
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    绝对定位会使行级元素变成块级元素,首先先看一下不加任何定位的效果:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			span {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    
    
    			}
    			#zj3{
    				background-color:blue;
    
    			}
    			#zj4{
    				background-color:green;
    				
    			}
    		</style>	
    	</head>
    	<body>
    		<span>
    			<span id="zj1"> 
    			11
    			</span>
    			<span id="zj2"> 
    			22
    			</span>
    			<span id="zj3"> 
    			33
    			</span>
    			<span id="zj4"> 
    			44
    			</span>
    		<span>
    	</body>
    </html>

    5:CSS定位和位置

    可以看到,因为span是行级标签,所以即使加了width和height,也不会生效,但是如果将其设置为绝对定位,width和height便会生效,但是因为绝对定位会使元素脱离文档流,所以并不是一行显示一个:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			span {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    
    
    			}
    			#zj3{
    				background-color:blue;
    			}
    			#zj4{
    				background-color:green;
    				position:absolute;
    			}
    		</style>	
    	</head>
    	<body>
    		<span>
    			<span id="zj1"> 
    			11
    			</span>
    			<span id="zj2"> 
    			22
    			</span>
    			<span id="zj3"> 
    			33
    			</span>
    			<span id="zj4"> 
    			44
    			</span>
    		<span>
    	</body>
    </html>

    5:CSS定位和位置

    绝对定位指使元素相对于HTML元素或离他最近的开启定位的祖先元素进行定位。下面是相对于HTML的元素(或者说是相对于浏览器、相对于body标签、相对于html标签)进行定位:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    				position:absolute;
    				top:0;
    				left:0;
    			}
    			#zj3{
    				background-color:blue;
    			}
    			#zj4{
    				background-color:green;
    				
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			11
    			</div>
    			<div id="zj2"> 
    			22
    			</div>
    			<div id="zj3"> 
    			33
    			</div>
    			<div id="zj4"> 
    			44
    			</div>
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    下面的例子是相对于他最近的开启定位的祖先元素进行定位。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;			
    			}
    			#zj2{				
    				background-color:red;	
    				position:absolute;
    				top:0;
    				left:0;
    			}
    			#zj3{
    				background-color:blue;
    				position:relative; /*如果不加的话,还是在浏览器左上角*/
    			}
    			#zj4{
    				background-color:green;
    				
    			}
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			11
    			</div>
    
    			<div id="zj3"> 
    				<div id="zj2"> 
    					22
    				</div>
    			</div>
    			<div id="zj4"> 
    			44
    			</div>
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    一般在使用绝对定位时,会同时为其父元素开启相对定位,以确保元素可以相对于父元素进行定位

    4.  fixed:固定定位

    固定定位的元素或被锁定在屏幕的某个位置上,当用户滚动页面时,固定元素会在屏幕上保持不动。将position属性设置fixed时,则开启元素的固定定位,开启固定定位以后,可以使用top、right、bottom、left四个属性为元素进行定位。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:20px;
    				height:20px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;		
    				position:fixed;
    				bottom:20px;
    				right:20px;
    			}
    			#zj2{				
    				background-color:red;	
    				height:2000px;
    
    			}
    			
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			11
    			</div>
    			<div id="zj2"> 
    			22
    			</div>
    
    		<div>
    	</body>
    </html>

    5.  z-index

    当元素开启定位以后就可以设置z-index这个属性,这个属性可以提升定位元素所在的层级。z-index可以指定一个整数作为值,数值越大显示的优先级越高,也就是z-index值较大的元素会显示在网页的最上层。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:200px;
    				height:200px;
    				margin:5px;
    			}
    		
    			#zj1{					
    				background-color:yellow;		
    				position:relative;
    				top:50px;
    				left:50px;
    				z-index:1;
    				/*z-index:2;*/
    			}
    			#zj2{				
    				background-color:red;	
    				position:relative;
    			        z-index:2;
    			        /*z-index:1;*/
    			}
    
    		</style>	
    	</head>
    	<body>
    		<div>
    			<div id="zj1"> 
    			11
    			</div>
    			<div id="zj2"> 
    			22
    			</div>
    
    
    		<div>
    	</body>
    </html>

    5:CSS定位和位置

    山东省·济南市
  • 0
  • 0
  • 0
  • 1.8k
  • 十二

    请登录之后再进行评论

    登录
    单栏布局 侧栏位置: