CSS定位机制——普通流、浮动、定位

最新推荐文章于 2025-06-14 07:54:03 发布

bless4everall

最新推荐文章于 2025-06-14 07:54:03 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： css 布局定位浮动 absolute

本文链接：https://blog.youkuaiyun.com/u011538158/article/details/48680541

学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS中静态、相对、绝对及浮动定位的特点与应用技巧，并解释了这些定位方式如何影响页面布局。

static/relative 保留正常文档流
float/absolute/fixed 完全脱离文档流不占空间
relative 参照父级的原始点为原始点相对本身的原本位置发生位移
absolute 找个东西相对绝对找父级的第一个position为absolute/relative的

外边距是透明的 –为了布局
内边距、边框用于装饰

虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局

<html>
  <head>
    <title>radio2.html</title>
    <style>
      .div1,.div2{
        height:20px;
        border:solid;
      }
      .div1{
        width:300px;
        //float:left;
      }
    </style>
  </head>

  <body>
    <div class="div1">normal1</div>
    <div class="div2">normal2</div>  
  </body>
</html>