【CSS】定位

最新推荐文章于 2024-12-04 20:36:57 发布

原创最新推荐文章于 2024-12-04 20:36:57 发布 · 175 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

2 篇文章

订阅专栏

（参考w3school）

定位机制：

CSS的三种定位机制：普通流、浮动和绝对定位。
默认普通流，元素的位置由它们在html中的位置决定

position属性：

position有4种属性：static, relative, absolute和fixed

static：

元素框正常生成。块级元素形成矩形框，行内元素会创建行框，置于父元素中

relative：

元素框偏移某个距离，元素保持未定位前的形状，它原本所占的空间仍然保留。
比如下面两个样式，style1将元素从它原来应该在的位置左移了20px，style2将元素从它原来该在的位置右移了20px。

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>正常位置的标题</h2>
<h2 class="pos_left">左移位置的标题</h2>
<h2 class="pos_right">右移位置的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

在这里插入图片描述

absolute：

元素框从文档流中完全删除，相对其包含的块定位。
比如下面这段代码：

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

显示的效果为：
在这里插入图片描述

fixed：

表现类似absolute，不过包含块是视窗本身。
例如对于下面的定位：

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>

</body>
</html>

显示的效果为：
在这里插入图片描述

元素溢出处理

元素溢出指的是元素的大小超过了它的容器的大小。例如我们有一段文本需要占据500px * 500px的大小，但是如果我们当前浏览器的窗口人为缩小到400px * 400px时，不同的处理方式会有不同的效果。
元素溢出的三种处理方式是：hidden、scroll、auto

hidden：

使用hidden模式时，如果元素的大小超过了容器的大小，溢出的部分会被隐藏，不可以通过滚动条来滑动显示。例如对于下面的设置：

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

overflow设置为hidden，显示的效果为：
在这里插入图片描述
可以看到文本溢出的不同直接隐藏不显示了。

scroll:

设置溢出应对模式为scroll时，不管元素的大小是否超过了容器的大小，都会设置滚动条。例如对于下面的设置：

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

显示的效果为：
在这里插入图片描述
可以看到文本元素的左右是没有超过容器的，但是容器的最底下还是设置了滚动条。

auto：

溢出处理设置为auto的话，容器会根据元素的溢出情况自动设置是否需要滚动条，例如：

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: auto
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

显示效果为：
在这里插入图片描述