CSS三种定位机制(详细)

1.文档流定位(默认定位)

元素分类

  1. block
  2. inline
  3. inline-block

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

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

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

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




 
 CSS定位机制
 


 "#">这是inline这是inline这是inline
 "#">这是inline这是inline这是inline
 "#">这是inline这是inline这是inline

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

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

CSS三种定位机制(详细)_第1张图片

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;
  }

CSS三种定位机制(详细)_第2张图片

向左浮动后

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

盒子一,二,三均脱离了原来文档流的位置
CSS三种定位机制(详细)_第3张图片

clear:清除浮动

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

第三个盒子清除左浮动

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

CSS三种定位机制(详细)_第4张图片

3.层定位

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

position

  1. relative:相对定位,元素脱离正常的文档流,但在文档流中的原位置仍然存在
  2. fixed:固定定位
  3. 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;
    
  }

CSS三种定位机制(详细)_第5张图片
设置第一个盒子为相对定位

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

CSS三种定位机制(详细)_第6张图片

CSS三种定位机制(详细)_第7张图片

你可能感兴趣的:(CSS三种定位机制(详细))