CSS三种定位机制（详细）

最新推荐文章于 2022-04-30 18:02:53 发布

野生HelloWorld

最新推荐文章于 2022-04-30 18:02:53 发布

阅读量953

点赞数 3

文章标签： html css 定位 css3

本文链接：https://blog.csdn.net/m0_46531188/article/details/105952786

版权

1.文档流定位（默认定位）

元素分类

block
inline
inline-block

常见的block元素：< p > < div > < h1 >~< h6 > < ul > < table >等

block元素特点：独占一行，可以设置长度和高度，内外边距都可以设置。

inline元素特点：不单独占一行，长度和高度都不可以设置，所谓的宽度是它所包含的文字或图片的高度和宽度，这是不可改变的。

inline-block元素特点：不单独占一行，可以设置宽度和高度，以及内外边距。例如< img >

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS定位机制</title>
 <style type="text/css">
  a{
   width: 250px;
   height: 50px;
   background-color: #000;
   color: #fff;
   }
 </style>
</head>
<body>
 <a href="#">这是inline这是inline这是inline</a>
 <a href="#">这是inline这是inline这是inline</a>
 <a href="#">这是inline这是inline这是inline</a>
</body>
</html>

注意：这里的两个相邻的a标签之间有一段系统默认的间隔，可以利用block元素性质，然后用浮动定位消除这种情况
在这里插入图片描述显示为成block元素后

a{
   display: block;/*设置成block元素*/
   width: 250px;
   height: 50px;
   background-color: #000;
   color: #fff;
   margin: 10px;
   text-decoration: none;
  }

在这里插入图片描述

2.浮动定位

<body>
 <div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
</body>

没有浮动之前

div{
   width: 300px;
   height: 150px;
   border:2px solid #000;
   margin: 10px;
  }
  .one{
   border:2px solid #000;
  }
  .two{
   border:2px solid #f00;
  }
  .three{
   border:2px solid #0f0;
  }

在这里插入图片描述

向左浮动后

div{
   width: 300px;
   height: 150px;
   border:2px solid #000;
   margin: 10px;
   float:left;
  }

盒子一，二，三均脱离了原来文档流的位置
在这里插入图片描述

clear:清除浮动

both:清除左右两边浮动
left/right:单向清除浮动
none:默认值

第三个盒子清除左浮动

.three{
   border:2px solid #0f0;
   clear:left;
  }

在这里插入图片描述

3.层定位

对每个图层进行相应的定位

position

relative：相对定位,元素脱离正常的文档流，但在文档流中的原位置仍然存在
fixed:固定定位
absolute:绝对定位，脱离正常文档流，在文档流中的原位置不存在。

设置两个盒子

<body>
  <div class="box one"></div>
  <div class="box two"></div>
</body>

设置第二个盒子为绝对定位，并设置它的距离。

.box{
   width: 200px;
   height: 100px;
   margin: 10px;
   
  }
  .one{
   background-color: #0f0;
  }
  .two{
   background-color: #f00;
   position: absolute; 
   top:20px;
   left: 20px;
    
  }

在这里插入图片描述
设置第一个盒子为相对定位

.one{
   background-color: #0f0;
   position: relative;
   top:80px;
   left: 30px;
   }

在这里插入图片描述

野生HelloWorld

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS三种定位机制（详细）

1.文档流定位（默认定位）元素分类blockinlineinline-block常见的block元素：< p > < div > < h1 >~< h6 > < ul > < table >等block元素特点：独占一行，可以设置长度和高度，内外边距都可以设置。inline元素特点：不单独占一行，长度和高...
复制链接

扫一扫