CSS总结(3)

最新推荐文章于 2024-10-04 13:52:58 发布

WildKingxue

最新推荐文章于 2024-10-04 13:52:58 发布

阅读量176

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/WildKingxue/article/details/119830918

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

一.CSS尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

width属性设置元素的宽度。

height属性设置元素的高度。

line-height 属性设置行高。

二.CSS Display(显示) 与 Visibility(可见性)

1.Display显示

display属性设置一个元素应如何显示。

display:none--隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS Display(显示)</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				display: none;/* 不显示图片 */
			}
		</style>
	</head>
	<body>
		<img src="img/avatar4.png" >
		<span id="">
			使用Display设置图片
		</span>
		<h3>当不显示图片时,而且该元素原本占用的空间也会从页面布局中消失。</h3>
	</body>
</html>

display:block--显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS Display(显示)</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				display: block;/* 显示图片 */
			}
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		<img src="img/avatar3.png" ><span>使用Display设置图片</span>
		<h3>当显示图片时自动换行,使图片元素变化为块级元素</h3>
	</body>
</html>

2.Visibility可见性

visibility属性指定一个元素应可见还是隐藏。

visibility:hidden--隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Visibility（可见性）</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				visibility: hidden;/* 不显示图片 */
			}
		</style>
	</head>
	<body>
		<img src="img/avatar4.png" >
		<span>使用visibility设置图片</span>
		<h3>当不显示图片时，span元素的内容紧跟随照片，但是该元素原本占用的空间不会从页面布局中消失</h3>
	</body>
</html>

visibility:visible--显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Visibility（可见性）</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				visibility: visible;/* 显示图片 */
			}
		</style>
	</head>
	<body>
		<img src="img/avatar3.png" >
		<span>使用visibility设置图片</span>
		<h3>当显示图片时，span元素的内容紧跟随照片</h3>
	</body>
</html>

3.Display和Visibility隐藏区别：

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。【注意，实例中隐藏的标题不占用空间】

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。【注意，实例中隐藏的标题任然占用空间】

三.CSS Position(定位)

position 属性指定了元素的定位类型。

元素可以使用的顶部 top，底部bottom，左侧left和右侧right属性定位。前提是：先设定position属性。

不同的工作方式，这取决于定位方法。

position 属性的五个值：

1.static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

2.absolute 定位【绝对定位】

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

absolute 定位使元素的位置与文档流无关，因此不占据空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>absolute定位</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#div1{
				width: 400px;
				height: 400px;
				background-color: #FF0000;
				position: absolute;/* 没有定位的父元素，为body定位方式定义的。 */
				top: 30px;/* 离网页的距离为30px */
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: aqua;
				position: absolute;/* 有定位，他定位的父元素为div1，div1有定义 */
				top: 10px;/* 离网页的距离为40px */
			}
			img{
				width: 200px;
				height: 200px;
				position: absolute;/* 有定位，他定位最近的父元素为div2，div2有定义 */
				top: 30px;/* 离顶部网页的距离为70px */
				left: 30px;/* 离左侧网页的距离为30px */
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<img src="img/2048387.jpg" >
			</div>
		</div>
	</body>
</html>

3.relative 定位【相对定位】

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>relative定位</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				width: 200px;
				height: 200px;
				position: relative;
				top: 100px;/* 定位为离上一个块级元素100px */
				left: 20px;/* 定位为离左边span元素20px */
			}
		</style>
	</head>
	<body>
		<h3>遵循默认网页中的定位方式，相对于其他元素的位置而确定</h3>
		<span>relative定位</span>
		<img src="img/2048559.jpg" >
		<span>relative定位</span>
	</body>
</html>

4.fixed定位【固定定位】

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

fixed定位使元素的位置与文档流无关，因此不占据空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fixed定位</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			span{
				position: fixed;
				right: 30px;
				color: #FF0000;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>不遵循默认网页中的定位方式,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>
		<span>life is for fun</span>
		<div style="height: 2000px;">
			<h1>MINISO</h1>
		</div>
	</body>
</html>

滑动滑轮红色字体不会随着页面的滚动而滚动

5.sticky 定位【粘性定位】

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

粘性定位的元素是依赖于用户的滚动。

粘性定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sticky定位</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				position: sticky;
				top: 0px;
				width: 300px;
				height: 100px;
				border: 10px double yellow;
				right: 30px;
				float: right;
			}
		</style>
	</head>
	<body>
		<img src="img/2048374.jpg" >
		<div style="height: 2000px;">
			<h1>MINISO</h1>
		</div>
	</body>
</html>

当黄色边框到达距离顶部为0时(top:0px;),他不会随着页面的滚动而滚动。

四.重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

当图片1再图片2下面时：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素重叠</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#img1{
				position: absolute;
				top: 30px;
				left: 40px;
				border: 5px solid #0000FF;
				z-index: 1;
			}
			#img2{
				position: absolute;
				top: 60px;
				left: 20px;
				border: 5px solid red;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="img/avatar.png" ><br>
		<img id="img2" src="img/avatar2.png" >
	</body>
</html>

当图片1再图片2上面时：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素重叠</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#img1{
				position: absolute;
				top: 30px;
				left: 40px;
				border: 5px solid #0000FF;
				z-index: 1;
			}
			#img2{
				position: absolute;
				top: 60px;
				left: 20px;
				border: 5px solid red;
				z-index: 0;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="img/avatar.png" ><br>
		<img id="img2" src="img/avatar2.png" >
	</body>
</html>

相比只是z-index属性值变了。

五.CSS 布局

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

Overflow属性
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
visible	默认值。内容不会被修剪，会呈现在元素框之外。

注意:overflow 属性只工作于指定高度的块元素上。

1.visible元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Overflow</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			div{
				position: absolute;/* 跟随相邻定义的父元素*/
				border: 30px solid #FF0000;/* 图片把边框覆盖住了 */
				width: 150px;
				height: 150px;
				top: 30px;
				left: 30px;
				overflow:visible; /* 默认值。内容不会被修剪，会呈现在元素框之外。不写也可以 */
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/avatar2.png" >
		</div>
	</body>
</html>

2.scroll元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Overflow</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			div{
				border: 30px solid #FF0000;
				width: 400px;
				height: 400px;
				overflow: scroll;/* 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/2048378.jpg" >
		</div>
	</body>
</html>

3.hidden元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Overflow</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			div{
				border: 30px solid #FF0000;
				width: 400px;
				height: 400px;
				overflow: hidden;/* 内容会被修剪，并且其余内容是不可见的。 */
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/2048378.jpg" >
		</div>
	</body>
</html>

六.CSS Float(浮动)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

浮动的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS Float(浮动)</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				font-size: 1.875rem;
				float: right;
			}
			img{
				float: left;
			}
			span{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h3>CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。</h3>
		<div id="">
			<b>向右靠齐</b>
		</div>
		<img src="img/avatar4.png" >
		<span>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</span>
	</body>
</html>