【Web前端笔记09】浮动与定位

最新推荐文章于 2023-04-27 23:59:13 发布

Ａsix_ren

最新推荐文章于 2023-04-27 23:59:13 发布

阅读量300

点赞数 2

本文链接：https://blog.csdn.net/qq_30281065/article/details/96713942

版权

1.元素的浮动属性float

元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。格式为：

选择器{float:属性值;}

常用属性值为：

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

具体表现为：
1.不设置盒子浮动时候：

 <style>
    .box{
        background: #cccccc;
        border: 1px dashed #cccccc;
    }
    .box01,.box02,.box03{
        height: 50px;
        line-height: 10px;
        margin: 10px;
        padding: 20px;
        background: #aaccee;
        border:4px solid  #aaa;
    }
    .wz{
        margin: 20px;
        padding:  15px;
        height: 50px;
        background: #fff;
        border: 1px dashed #aa5555;
    }
   </style>
</head>
   <body>
    <div class="box">
    <div class="box01">box01</div>
    <div class="box02">box02</div>
    <div class="box03">box03</div>
    <div class="wz">浮动文字</div>
     </div>
</body>

加入浮动后：

.box01{
       float: left;
    }
    .box02{
        float: left;
    }
    .box03{
        float: left;
    }

在这里插入图片描述

2.清除浮动

最常用的方法为：

使用after伪对象清除浮动

在使用after时需注意：
1.必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比实际高出若干像素。
2.必须在伪对象中设置content属性，属性值可以为空，比如：“content：“”；”

.box::after{
        height: 0px;
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
    }

3.定位

在制作网页时候，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包括定位模式和边偏移两部分，对他们的具体介绍为：

选择器{position:属性值;}

值	描述
static	自动定位
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

Ａsix_ren

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记09】浮动与定位

1.元素的浮动属性float元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。格式为：选择器{float:属性值;}常用属性值为：属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）具体表现为：1.不设置盒子浮动时候： <style> .box{ ...
复制链接

扫一扫