前端-浮动与定位

最新推荐文章于 2023-09-24 01:51:21 发布

WhenXuan

最新推荐文章于 2023-09-24 01:51:21 发布

阅读量956

点赞数 2

文章标签：前端 html css

本文链接：https://blog.csdn.net/wwx1239021388/article/details/126451743

版权

浮动与定位

1. 浮动

要讲块级盒子变为行内属性需要用display 解析空格：display: inline-block

行内块的本质：就是行内元素

行内元素的对齐方式：基线对齐

xhgf: x下面两个脚形成的线就是基线

盒子里面没有内容的时候，最底部就是基线
盒子里面有内容的时候，以盒子内容最下面的一行文字的基线为准

这种布局就太麻烦了可以设置 vertical-align: bottom; 水平对齐盒子，所以做水平布局就不使用 display 来做

选择使用浮动来做最开始用于做图文环绕的效果

浮动可以使一个元素脱离自己原本的位置，脱离原本的排列规则（浏览器默认的排序规则），并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。主要用于设置块元素的水平排列。

属性：float

值	描述
left	元素向左浮动
right	元素向右浮动

元素设置浮动会从原始位置脱流，在文档中不再占位
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动但是两个浮动的盒子按理说是不会相互重叠或覆盖遮挡
任何标签都可以添加浮动属性，浮动后的标签有行内块的特点，可以在一行显示，可以设置宽高。但是比行内块高级，标签换行没有空格的
浮动元素会遮挡正常元素的位置,无法遮挡正常内容的显示。内容围绕在浮动元素周围显示只会遮挡盒子的背景，合理里的内容和文字会浮动溢出（文字的层级比较高）

清除浮动：

清除浮动带来的影响：

当父级元素没有设置高度时，高度会由文档流内容撑开。而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，会被非浮动的元素给挤开导致其脱离了我们想要的位置，这对我们后续的布局结构会造成很多困扰。

对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
- 有些布局当中
在父元素的末尾添加空的块元素。设置clear:both;清除浮动
为父元素设置overflow:hidden;解决高度为0

2. 定位

宏观上调整元素的位置用定位和浮动，调整盒子与盒子之间的关系用外边距 margin

CSS中的position 属性用来设置元素在页面中的位置，您可以把任何属性放置在任何您认为合适的位置。position 属性分别对应不同的定位方式

一种方式是设置: 但是会使页面更加复杂

可以先设置定位，然后通过 left right top bottom 来设置定位元素具体的位置

可以想 left 等传入具体的数值表示移动了多少个像素，也可以传入一个百分比（left：50%表示矩形盒子左上方的圆点移动到了页面一半的位置）

<style>
    .clearfix {
        clear : both;
    }
</style>

relative相对定位：元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
- 元素开启相对定位后，不设置偏移量不会又任何变化
- 相对定位参照自己自身位置进行定位
- 不会脱离文档流相对移动后不会影响页面的布局只是盒子的表现在页面上的位置发生了变化
- 不会影响改变元素本身的性质，块级还是块级，行内还是行内
- 不适于去做很大位置的调整，适合小范围的移动
absolute绝对定位：绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移，以浏览器窗口作为参照物。
- 绝对定位的元素会脱流，不保留位置，会盖住文字（定位的层级比文字要高）
- 在文档中不占位,可以手动设置宽高
- 这就会产生堆叠次序
“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移
**fixed固定定位：**参照窗口进行定位,不跟随网页滚动而滚动。脱离文档流参考物是浏览器本身，参考与导航栏

设置定位的元素可以使用偏移属性调整距离参照物的位置

单纯的设置定位方式在我们页面看不到任何的效果，想要元素移动的话还需要设置四个属性

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照HTML代码的书写顺序，后来者居上

通过定位将一个盒子居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过定位将盒子居中</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 500px;
            height: 500px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>