CSS学习，常用常记（定位Position，Overflow，浮动Float）
程序员文章站
2022-04-24 22:37:31
...
- position 属性指定了元素的定位类型；
- 元素可以使用的顶部，底部，左侧和右侧属性定位；
- 然而，这些属性无法工作，除非是先设定position属性；
- 他们也有不同的工作方式，这取决于定位方法；
static 定位
- HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
- 静态定位的元素不会受到 top, bottom, left, right影响。
div.static {
position: static;
border: 3px solid #73AD21;
}fixed 定位
- 元素的位置相对于浏览器窗口是固定位置；
- 即使窗口是滚动的它也不会移动；
- Fixed定位使元素的位置与文档流无关，因此不占据空间。
- Fixed定位的元素和其他元素重叠。
p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}relative 定位
- 相对定位元素的定位是相对其正常位置。
- 相对定位元素经常被用来作为绝对定位元素的容器块。
h2.pos_left{<!--相对于其正常位置向左移动-->
position:relative;
left:-20px;
}
h2.pos_right{<!--相对于其正常位置向右移动-->
position:relative;
left:20px;
}
h2.pos_top{
position:relative;
top:-50px;
}absolute 定位
- 绝对定位的元素的位置相对于最近的已定位父元素；
- 如果元素没有已定位的父元素，那么它的位置相对于<html>；
- absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素和其他元素重叠。
h2{
position:absolute;
left:100px;
top:150px;
}sticky 定位
- sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
- position: sticky; 基于用户的滚动位置来定位。
- 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
- 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
- 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>重叠的元素
- 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素；
- z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）；
- 一个元素可以有正数或负数的堆叠顺序；
- 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面；
- 注意： 两个定位元素重叠，没有指定z - index，最后定位的元素将被显示在最前面；
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}裁剪元素；
img {
position:absolute;
top: 100px;
left: 100px;
clip:rect(10px,60px,200px,5px);
}<!--裁减掉上方10px，保留左边60px，保留上边200px，裁减掉左边5px-->
<!--裁剪出的形状为矩形，四条裁剪线（上右下左）对应在图形的原点（左上角）-->overflow 属性
元素内容超出给定宽度和高度，overflow 属性可以确定是否显示滚动条等行为；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: hidden:</h2>
<div class="ex2">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: auto:</h2>
<div class="ex3">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: visible (默认):</h2>
<div class="ex4">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
</body>
</html>更改光标；
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
- CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
- Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动，下面的文本流将环绕在它左边；
img {
float:right;
}彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻；
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}清除浮动 - 使用 clear
- 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
- clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line {
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>添加边框和边距并浮动到右侧；
img {
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}标题和图片向右侧浮动；
div{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}div元素是120像素宽,它包含了图像。 div元素会向右浮动。 Margins 被添加到div使得文本远离div。 Borders和padding被添加到div框架的图片和标题中
让段落的第一个字母浮动到左侧（有点蒙蔽）；