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

来源：互联网发布：怎样修改淘宝销量显示编辑：程序博客网时间：2024/06/05 20:04

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>

效果图：
无浮动时：

有浮动时：
加浮动时

有时我们需要用到浮动，但又不想由于浮动的某些特性影响布局，就要清除浮动
clear属性定义了元素的哪一侧不允许出现浮动

CSS通过TRBL设置元素的二维偏移量，z-index设置z轴偏移量
static：TRBL、z-index不生效
relative：可控制相对于static偏移

absolute：

块级元素的宽度在未定义时不再为100%，而是根据内容自动调整
在不定义z-index的情况下，absolute元素会覆盖在其他元素之上
父级的 padding不影响定位开始的原始点

0 0