定位与浮动

lu001226

已于 2022-05-30 16:49:15 修改

阅读量110

点赞数

文章标签： css css3 html

于 2022-05-30 16:45:57 首次发布

本文链接：https://blog.csdn.net/lu001226/article/details/125049551

版权

一、定位

左右并排。定位能解决一个元素放在另外一个元素上的问题。（堆叠的效果）

所有的定位效果一般都会配套使用偏移属性和z-index属性。

语法： 
position:static(默认值)|relative|absolute|fixed

相对定位

相对于自身原有位置进行偏移
仍处于标准文档流中,它原本所占的空间仍保留
随即拥有偏移属性和z-index属性
一般用来作为绝对定位的参考物

绝对定位（最多）

完全脱离了标准文档流，就好像元素原来不存在一样（悬浮）

1.找一个父级，做相对定位
父级{
    position:relative;
}
父级可以是任意上一级，但一般指的是直接父级

2.给该元素(子元素)使用绝对定位
3.通过设置偏移量让其相对于定位父级进行偏移

元素{
    position:absolute;
    /*偏移属性*/
    left:20px;
	top:10px;
}

参考基准：
    未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素初始位置
   已设置偏移量时，无已定位祖先元素，以<html>为偏移参考基准
   已设置偏移量时，有多个已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准

固定定位（吸附）

不需要设置参考定位，直接以HTML作为参考基准，即以浏览器窗口作为参考标准（定位父级永远都是HTML）
```
元素{
	position:fixed;
    /*偏移属性*/
    left:20px;
	top:10px;
}
```

偏移属性(方向词，表示要往哪边移动)

left:数值px|百分比;
	如果是正数：则表示从左往右走
	如果是负数，则表示往反方向走（左）
right:数字px|;
top:数字px;
bottom:数字px;

浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kqC2TadV-1653900469322)(/img/06_%E6%B5%AE%E5%8A%A8-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE.png)]

清除浮动
清除浮动原因:元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开
解决办法

在父级使用height （拓展不行，不推荐）
在父级使用 overflow: hidden
clear 方法在子级最后添加

空白标签即可不一定要div标签

在css中写
.clearfix::after{
content: “”;
display:block;
clear:both;
}
将这个样式引入到浮动的父级

图文组合中为了不让边框影响盒子宽度
可以用 box-sizing:border-box;
x-sizing:border-box;

lu001226

关注

0
点赞
踩
0

收藏

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

一、定位左右并排。定位能解决一个元素放在另外一个元素上的问题。（堆叠的效果）所有的定位效果一般都会配套使用偏移属性和z-index属性。语法： position:static(默认值)|relative|absolute|fixed相对定位相对于自身原有位置进行偏移仍处于标准文档流中,它原本所占的空间仍保留随即拥有偏移属性和z-index属性一般用来作为绝对定位的参考物绝对定位（最多）完全脱离了标准文档流，就好像元素原来不存在一样（悬浮）1.找一个父级，做相对定位父级{
复制链接

扫一扫