CSS学习，常用常记（定位Position，Overflow，浮动Float）

最新推荐文章于 2022-09-04 20:21:42 发布

hhjian6666

最新推荐文章于 2022-09-04 20:21:42 发布

阅读量436

点赞数

分类专栏： ***CSS + CSS3***Study***

本文链接：https://blog.csdn.net/qq_30796379/article/details/88698057

版权

***CSS + CSS3***Study*** 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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框架的图片和标题中

让段落的第一个字母浮动到左侧（有点蒙蔽）；

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

hhjian6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习，常用常记（定位Position，Overflow，浮动Float）

position 属性指定了元素的定位类型；元素可以使用的顶部，底部，左侧和右侧属性定位；然而，这些属性无法工作，除非是先设定position属性；他们也有不同的工作方式，这取决于定位方法；static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。div.static { ...
复制链接

扫一扫