css浮动与定位

最新推荐文章于 2024-07-12 20:49:16 发布

十一️

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量79

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_46389094/article/details/104463373

版权

1、文档流

文档流是文档中可显示对象在排列时所占用的位置。

2、元素的定位

定位：解决叠加排列的问题。

position取值

static（默认）

relative : 相对定位

       如果没有定位偏移量，对元素本身没有任何影响
       不使元素脱离文档流，空间是会被保留。
       不影响其他元素布局
       left、top、right、bottom是相对于当前元素自身进行偏移的

absolute : 绝对定位

       使元素完全脱离文档流
       使内联元素支持宽高 （让内联具备块特性）
       使块元素默认宽根据内容决定（让块具备内联的特性）
       如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

fixed : 固定定位

       使元素完全脱离文档流
       使内联元素支持宽高 （让内联具备块特性）
       使块元素默认宽根据内容决定（让块具备内联的特性）
       相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
       不会受到祖先元素的影响。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{ position: relative; border:1px black solid;}
    #box1{ width:300px; height:300px; border:1px black solid; margin:200px;
        position: relative;}
    #box2{ width:100px; height:100px; background:red;
        position: fixed; left:0px; top:0px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

3、浮动

特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
取值：

none（默认没浮动）
left（浮动方向左边）
right（浮动方向右边）
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:100px; height:100px; background:red; float:right;}
    #box2{ width:200px; height:200px; background:blue; float:left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

执行结果：box1向右浮动，box2向左浮动。
HTML5逆战班2002期----css浮动与定位总结

十一️

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动与定位

1、文档流文档流是文档中可显示对象在排列时所占用的位置。2、元素的定位定位：解决叠加排列的问题。position取值static（默认）relative : 相对定位如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流，空间是会被保留。不影响其他元素布局 left、top、right、bottom是相对于当前...
复制链接

扫一扫