html中的css—浮动和定位

最新推荐文章于 2022-10-22 19:22:36 发布

夜·封尘

最新推荐文章于 2022-10-22 19:22:36 发布

阅读量388

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/qq_49032349/article/details/117535366

版权

浮动

简介

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧，float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。

float 属性的常用值包括:left（靠左浮动）、right（靠右浮动）、none（不浮动）

因为，div是块级元素，会独占网页中的一行，因此，html正常文档流会让不同的div按行排列在网页中，如下实例：

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;        
}
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>

运行结果：

而float浮动会让元素脱离正常文档流，相当于浮在页面之上，就像盖了俩层楼的房子，楼上和楼下的同一位置处可以摆放不同的物品，因此块级元素就可以放置在同一行的不同位置。实例如下：

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;        
}
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>

运行结果：

如果想要利用浮动来实现不同元素的排布，还可以搭配上清除浮动来使用，以便于不同元素在网页中实现排布。

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;
    clear:both;         
}
</style>

运行结果：

定位

简介

CSS 中 position 规定了元素的定位方式，CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置。ps：float属性与position属性会相互影响，使用时要小心。

position主要包括相对定位、绝对定位、固定位置和默认值，平常的使用中使用较多的是前两个。

相对定位

相对定位不脱离文档流布局，只改变自身位置遗留空白区域，定位的起始位置为此元素原文档流中的位置，如：

<style type="text/css">
…    
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;
    position: relative;  {！--设置相对位置--}          
    top:20px;            
    left:30px;        
}    
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>

运行结果：

绝对定位

而绝对定位与相对定位不同的是，其定位的起始位置是最近的父元素，重点是这个父元素也需要是设置position属性。如果没有，则为body文档本身。如：

<style type="text/css">
…
.box-2 {            
    border: 3px solid blue;
    position: absolute; {!--设置绝对位置--}           
    top:40px;            
    left:50px;        
}
…
</style>
<body>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div> 
</body>

运行结果：

问：如果要问绝对定位好还是用相对定位好?
答：因为绝对定位(和文档流没关系)如无申明，则其是对与body而言的，处理不好的话。如显示器尺寸变了，可能就会变型。
相对定位的元素属文档流，所以稳定的，相对定位是相对他该出现的位置，如无设top left之类，和普通div基本一样。一般来说，绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位。

夜·封尘

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html中的css—浮动和定位

浮动简介CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧，float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。float 属性的常用值包括:left（靠左浮动）、right（靠右浮动）、none（不浮动）因为，div是块级元素，会独占网页中的一行，因此，html正常文档流会让不同的div按行排列在网页中，如下实例：<style type="text/css"> div{ ..
复制链接

扫一扫