您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关CSS中普通流、浮动和绝对定位怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
CSS 定位和浮动
CSS 定位属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，可以建立列式布局，将布局的一部分与另一部分重叠。
定位允许你定义元素框相对于其正常位置、父元素、另一个元素甚至浏览器窗口本身的位置。
另一方面，CSS1 中首次提出了浮动，浮动不完全是定位，不过，它当然也不是正常流布局。
一切皆为框
div、h2 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
而 span 和 strong 等元素称为“行内元素”，因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。
通过将 display 设置为 block，可以让行内元素（比如 <a>）表现得像块级元素一样。
通过把 display 设置为 none，让该框及其所有内容都不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素，例如 div 的开头：
<div> some text <p>Some more text.</p> </div>
注释：即使没有把这些文本定义为段落，它也会被当作段落（块级元素）对待。
注释：在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
提示：无法直接对无名块或行框应用样式，因为没有可以应用样式的地方。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
通常，所有框都在普通流中定位。即普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
注意：行框与行内框是两个概念，行框（Line Box）的高度总是足以容纳它包含的所有行内框。
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static：元素框正常生成。块级元素和行内元素分别生成框，作为文档流的一部分。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位（生成一个新的块级框）。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位 relative
<html>
<head>
<style type="text/css">
h3.pos_left {
position: relative;
left: -20px
}
h3.pos_right {
position: relative;
left: 20px
}
</style>
</head>
<body>
<h3>这是位于正常位置的标题</h3>
<h3 class="pos_left">这个标题相对于其正常位置向左移动</h3>
<h3 class="pos_right">这个标题相对于其正常位置向右移动</h3>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>注释：本例演示如何相对于一个元素的正常位置来对其定位。
绝对定位 absolute
h3.pos_abs {
position: absolute;
left: 100px;
top: 150px
}注释：本例演示如何使用绝对值来对元素进行定位。
固定定位 fixed
p.pos_fix {
position: fixed;
left: 5px;
top: 5px;
}注释：本例演示如何相对于浏览器窗口来对元素进行定位。
元素内容溢出 overflow
overflow 属性定义溢出元素内容区的内容会如何处理：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
如果元素中的内容超出了给定的宽度和高度属性，将会使用到 overflow 属性。
<html>
<head>
<style type="text/css">
div {
background-color: #00FFFF;
width: 150px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
overflow 属性可以确定是否显示滚动条等行为。
这个属性定义溢出元素内容区的内容会如何处理，默认值是 visible。
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
</div>
</body>
</html>
设置元素的形状
<html>
<head>
<style type="text/css">
img {
position: absolute;
clip: rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="../book.gif" width="120" height="151"></p>
</body>
</html>注释：本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。
垂直排列图象
<html>
<head>
<style type="text/css">
img.top {vertical-align: text-top}
img.bottom {vertical-align: text-bottom}
</style>
</head>
<body>
<p>图像<img class="top" border="0" src="../cute.gif" />位于段落中。</p>
<p>图像<img class="bottom" border="0" src="../cute.gif" />位于段落中。</p>
</body>
</html>注释：本例演示如何在文本中垂直排列图象（顶部对齐、底部对齐）。
Z-index
<html>
<head>
<style type="text/css">
img.x {
position: absolute;
left: 0px;
top: 0px;
z-index: -1
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<img class="x" src="../mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>注释：Z-index可被用于将在一个元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x {
position: absolute;
left: 0px;
top: 0px;
z-index: 1
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<img class="x" src="../mouse.jpg" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>
</html>
CSS 定位 属性及描述
position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow：设置当元素的内容溢出其区域时发生的事情。
clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align：设置元素的垂直对齐方式。
z-index：设置元素的堆叠顺序。
感谢各位的阅读！关于“CSS中普通流、浮动和绝对定位怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。