<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<!--定位的特殊性-->
<!--绝对定位和固定定位也和浮动类似-->
<!--1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度-->
<!--2.块级元素添加绝对或者固定定位，如果不给快读或者高度，默认的是内容的大小-->
<!--3.脱标的盒子不会出发外边距塌陷：浮动元素、绝对定位（固定元素）元素的都不会触发外边距合并的问题-->
<!--4.绝对定位（固定定位）会完全压住盒子：浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），-->
<!--但是绝对定位（固定定位）会压住下面标准流所有的内容-->
<style>
.box {
/*1.浮动的元素不会压着下面标准流的文字*/
/*float：left；*/
/*2.绝对定位（固定定位）会压住下面标准流所有的内容*/
position: absolute;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>阁下何不同风起，扶摇直上九万里</p>
</body>
</html>
本文深入探讨了CSS中的浮动和绝对定位特性，解释了它们如何影响元素的布局和尺寸。通过示例展示了行内元素和块级元素在添加浮动或定位后的变化，以及这些定位方式如何避免外边距塌陷并覆盖内容。此外，还讨论了绝对定位如何不同于浮动，如何完全覆盖标准流内容。
4212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
