您的位置：首页 > Web前端 > CSS

css元素定位与浮动

2017-08-13 20:54 225 查看
元素定位：元素定位通常有fixed、absolute、relative三种用的较多，css元素调用position属性来进行定位操作。1、relative：相对定位，使用相对定位的元素的位置常以文档流的排版方式为基础，然后使他相对于原本的位置偏移指定的距离，相对定位的元素仍在文档流中，它后面的元素仍以文档流的方式对待它。
<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
.relative {
position: relative;
top: 20px;
left: 20px;
width: 500px;
}
</style>
</head>
<body>
<div class="relative">Position相对偏移</div>
</body>
</html>
使用position：relative时，就需要top，bottom，left和right4个属性来配合，确定元素的位置，并且紧随它的层不会在此相对定位层的下方，而是与它同一个高度出现。2、absolute：绝对定位，使用绝对定位的元素从文档流中脱离，它是以浏览器窗口为基准进行定位，它对其他元素的定位的没有任何影响，其他的元素就好像这个元素不存在一样。使用position：absolute能够很准确的将元素移动到你想要的位置，通常也需要top，bottom，left和right四个属性来配合。
<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 20px;
font-size: 12px;
}

#container {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
width: 300px;
}

#container div {
background-color: #fff0ac;
border: 1px solid #000000;
padding: 10px;
}

#item-2 {
}
</style>
</head>
<body>
<div id="container">
<div>Box-1</div>
<div id="item-2">Box-2</div>
<div>Box-3</div>
</div>
</body>
</html>
3、fixed：固定定位，它和绝对定位类似，是以浏览器窗口为基准进行定位，当拖动浏览滚动条是，依然保持对象位置不变。
 
元素浮动
1、使用float定位一个元素有float：left、float：right两种 ，这种定位只能在水平坐标内定位 ，不能再垂直坐标内定位，而且让下面的元素浮动环绕在它的左边或右边。如果让一个元素float：left、另一个元素float：right；控制好宽度，就能实现两列的布局效果  
 2、如果不想让使用了float元素的下面的元素浮动环绕在周围，那么可调用clear属性清除浮动
example：
<div id="div-1a">this is div-1a</div>
　　<div id="div-1b">this is div-1b</div>
　　<div id="div-1c">this is div-1c</div>
　　#div-1a {
　　float:left;
　　width:190px;
　　}
　　#div-1b {
　　float:left;
　　width:190px;
　　}
　　#div-1c {
　　clear:both;
　　}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航