当前位置：首页 > news >正文

今日CSS学习浮动-＞定位

news 来源：原创 2025/7/1 23:11:31

-------------------------------------------------------------------------------------------------------
CSS的浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float 属性定义元素在哪个方向浮动。
可能的值：
none - 默认值。元素不浮动。
left - 元素向左浮动。
right - 元素向右浮动。
inherit - 规定应该从父元素继承 float 属性的值。
-------------------------------------------------------------------------------------------------------浮动的原理 浮动以后脱离了文档流，不占据文档流的位置，只有左右浮动，没有上下浮动。
浮动的元素会生成一个块级框，而不论它本身是什么类型的元素。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当容器不够时，会另起一行。
在两个行内块元素之间通常存在空隙，当这两个元素浮动起来便可以消除这个空隙.
-------------------------------------------------------------------------------------------------------
浮动元素还会造成父元素的高度塌陷，解决办法：任选其一
1. 给父元素设置高度
2. 给父元素设置overflow:hidden;
(搭配clear:both;使用清除浮动)
3. 给父元素设置浮动
4. 给父元素设置display:inline-block;
5. 给父元素设置伪元素：.clearfix::after{content: "";display: block;clear: both;}6, 给父元素设置display:flex;7,受影响的元素设置clear:both;
clear :left;清除左侧浮动
clear :right;清除右侧浮动
clear :both;清除左右两侧的浮动所以浮动在特殊情况时会出现一些问题，所以我们要尽量避免使用浮动。
将浮动应用到列表的<li></li>标签上，会使<li></li>标签变成行内块元素，横向排列，例如导航栏。
-------------------------------------------------------------------------------------------------------
CSS的定位
position 属性指定元素的定位类型。
可能的值：
static - 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。relative - 生成相对定位的元素，相对于其正常位置进行定位。
相对定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
注意：相对定位元素的位置是相对于其正常位置进行定位的，所以即使元素的位置发生了变化，但是它的相对位置是不变的,还是处于标准流。absolute - 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位,与相对定位不同的是脱离了文档流。
脱离文档流的元素不会占据文档流的位置，不会影响文档流的布局。与浮动类似，会浮在文档流的上方。
与普通浮动不同的是，每次绝对定位都创建一个浮动层，所以会造成层叠问题。
元素的位置也是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。上述两种定位方式的区别在于，相对定位是相对于上一个具有定位的父元素进行定位。如果父级元素没有定位，则继续向上查找。
如果所有的父元素都没有定位，则相对于浏览器窗口进行定位。
-------------------------------------------------------------------------------------------------------
fixed - 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed元素的位置是相对于浏览器窗口进行定位的,所以即使元素的位置发生了变化,但是它的相对位置是不变的。
鼠标滑动时，元素不会随着鼠标的移动而移动。
-------------------------------------------------------------------------------------------------------
z-index 属性指定一个元素的堆叠顺序（哪个元素在前，哪个元素在后）。
z-index 只对定位元素有效(position:absolute, position:relative, position:fixed)。
z-index 的值可以是负数。
z-index 的值越大，元素就会越靠前。大的值覆盖小的值。
-------------------------------------------------------------------------------------------------------
CSS的动画
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name - 规定需要绑定到选择器的 keyframe 名称。
animation-duration - 规定完成动画所花费的时间，以秒或毫秒计。
例如：
animation: myfirst 5s;
animation: myfirst 5s linear;
animation: myfirst 5s linear 2s;animation-timing-function - 规定动画的速度曲线。
例如：
animation-timing-function: linear;匀速
animation-timing-function: ease;逐渐变慢
animation-timing-function: ease-in;加速
animation-timing-function: ease-out;减速
animation-timing-function: ease-in-out;先加速后减速
animation-timing-function: cubic-bezier(n,n,n,n);自定义速度曲线
animation-timing-function: step-start;animation-delay - 规定在动画开始之前的延迟。
animation-iteration-count - 规定动画应该播放的次数。
animation-direction - 规定是否应该轮流反向播放动画。
例如：
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse; 
animation-play-state - 规定动画是否正在运行或暂停。
例如：
animation-play-state: running;
animation-play-state: paused;animation-fill-mode - 规定对象动画时间之外的状态。
例如：
animation-fill-mode: none;
animation-fill-mode: forwards;@keyframes 规则
@keyframes 规则用于创建动画。
@keyframes 规则是 CSS3 中新增的功能。
@keyframes 规则由 @keyframes 关键字开始，后面跟着动画名称和动画内容。
动画名称可以是任何名称，但是必须以 @keyframes 关键字开始。
动画内容是由一个或多个百分比值和 CSS 样式组成的。
-------------------------------------------------------------------------------------------------------

1. 浮动属性（float）

定义：float 属性用于创建浮动框，将元素移动到一边，直至其左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

.element {float: left; /* 也可以是 right、none、inherit */
}

属性值：

none：默认值，元素不浮动。
left：元素向左浮动。
right：元素向右浮动。
inherit：规定从父元素继承 float 属性的值。

2. 浮动原理

浮动元素脱离文档流，不占据文档流的位置，仅有左右浮动，无上下浮动。
浮动的元素会生成一个块级框，不论其原本的元素类型是什么。
浮动框可向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框。
文档普通流中的块框表现得如同浮动框不存在。
当容器空间不足时，浮动元素会另起一行。
两个行内块元素浮动后可消除它们之间通常存在的空隙。

3. 浮动导致的父元素高度塌陷及解决办法

问题：浮动元素会使父元素的高度塌陷，因为浮动元素脱离了文档流，父元素无法感知其高度。
解决办法：

给父元素设置固定高度：

.parent {height: 200px;
}

使用 overflow:hidden（搭配 clear:both 使用清除浮动）：

.parent {overflow: hidden;
}
.clear {clear: both;
}

给父元素设置浮动：

.parent {float: left; /* 或 right */
}

给父元素设置 display:inline-block：

.parent {display: inline-block;
}

给父元素设置伪元素清除浮动：

.clearfix::after{content: "";display: block;clear: both;
}

给父元素设置 display:flex：

.parent {display: flex;
}

给受影响的元素设置 clear 属性：

.clear-left {clear: left; /* 清除左侧浮动 */
}
.clear-right {clear: right; /* 清除右侧浮动 */
}
.clear-both {clear: both; /* 清除左右两侧的浮动 */
}

注意：浮动在特殊情况时会引发一些问题，应尽量避免过度使用浮动。

4. 浮动在列表中的应用

将浮动应用到列表的 <li> 标签上，会使 <li> 标签变成行内块元素，横向排列，常用于制作导航栏。

html

<ul class="nav"><li>首页</li><li>产品</li><li>关于我们</li>
</ul>

.nav li {float: left;list-style: none;margin-right: 10px;
}

九、CSS 的定位

1. 定位属性（position）

定义：position 属性指定元素的定位类型。
语法：

.element {position: relative; /* 也可以是 static、absolute、fixed */
}

属性值：

static：默认值，没有定位，元素出现在正常的流中，忽略 top, bottom, left, right, z-index 声明。
relative：生成相对定位的元素，相对于其正常位置进行定位，通过 left, top, right, bottom 属性规定位置，且元素仍处于标准流中。

.relative-element {position: relative;left: 20px;top: 10px;
}

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，脱离文档流，不占据文档流位置，会浮在文档流上方，可能造成层叠问题，通过 left, top, right, bottom 属性规定位置。

.absolute-element {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

fixed：生成固定定位的元素，相对于浏览器窗口进行定位，位置通过 left, top, right, bottom 属性规定，元素相对位置不变，鼠标滑动时元素不会随之移动。

.fixed-element {position: fixed;right: 10px;bottom: 10px;
}

2. 堆叠顺序属性（z-index）

定义：z-index 属性指定一个元素的堆叠顺序，确定哪个元素在前，哪个元素在后。
适用范围：只对定位元素（position:absolute, position:relative, position:fixed）有效。
属性值：可以是负数，值越大，元素越靠前，大的值会覆盖小的值。

.element1 {position: relative;z-index: 1;
}
.element2 {position: relative;z-index: 2; /* 会覆盖 element1 */
}

十、CSS 的动画

1. 动画属性（animation）

定义：animation 是一个简写属性，用于设置六个动画属性。
语法示例：

.element {animation: myfirst 5s linear 2s infinite alternate paused forwards;
}

具体属性及解释：

animation-name：规定需要绑定到选择器的 keyframe 名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计，如 5s 或 5000ms。
animation-timing-function：规定动画的速度曲线。
- linear：匀速。
- ease：逐渐变慢。
- ease-in：加速。
- ease-out：减速。
- ease-in-out：先加速后减速。
- cubic-bezier(n,n,n,n)：自定义速度曲线。
- step-start：动画开始即达到最终状态。

.element {animation-timing-function: ease-in-out;
}

animation-delay：规定在动画开始之前的延迟时间，如 2s 表示延迟 2 秒开始动画。
animation-iteration-count：规定动画应该播放的次数，可以是具体数字，也可以是 infinite（无限循环）。

.element {animation-iteration-count: 3; /* 播放 3 次 */
}

animation-direction：规定是否应该轮流反向播放动画。
- normal：正常播放。
- reverse：反向播放。
- alternate：在奇数次（1、3、5 等）正向播放，在偶数次（2、4、6 等）反向播放。
- alternate-reverse：在奇数次（1、3、5 等）反向播放，在偶数次（2、4、6 等）正向播放。

.element {animation-direction: alternate;
}

animation-play-state：规定动画是否正在运行或暂停。
- running：运行。
- paused：暂停。

.element {animation-play-state: paused;
}

animation-fill-mode：规定对象动画时间之外的状态。
- none：默认值，动画结束后，元素回到原来的状态。
- forwards：动画结束后，元素停留在动画的最终状态。

.element {animation-fill-mode: forwards;
}

2. `@keyframes` 规则

定义：@keyframes 规则用于创建动画，是 CSS3 中新增的功能。
语法：由 @keyframes 关键字开始，后面跟着动画名称和动画内容，动画内容由一个或多个百分比值和 CSS 样式组成。

@keyframes myAnimation {0% {opacity: 0;transform: translateX(0);}50% {opacity: 0.5;transform: translateX(50px);}100% {opacity: 1;transform: translateX(100px);}
}

上述 @keyframes 定义了名为 myAnimation 的动画，在动画的 0%、50%、100% 阶段分别设置了不同的 opacity（透明度）和 transform（变换）样式。