css元素定位与浮动

最新推荐文章于 2024-06-19 19:16:24 发布

TJ_step

最新推荐文章于 2024-06-19 19:16:24 发布

阅读量355

点赞数

分类专栏： java 文章标签： css java

本文链接：https://blog.csdn.net/TJ_step/article/details/77149978

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

元素定位：元素定位通常有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;
　　}