CSS实例【七】

最新推荐文章于 2022-07-14 09:53:51 发布

虾尾丸子

最新推荐文章于 2022-07-14 09:53:51 发布

阅读量71

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118021790

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		h1.hidden{visibility: hidden;}
		h1.none{display: none;}
		p.inline{display: inline;}
		
		span
		{
			display: block;
		}
		
		table,th,td
		{
			border: 0.0625rem  solid black;
		}
		tr.collapse
		{
			visibility: collapse;
		}
		
		p.pos_fixed
		{
			position: fixed;
			top: 1.875rem;
			right: 0.3125rem;
		}
		
		h4.pos_left
		{
			position: relative;
			left: -1.25rem;
		}
		h4.pos_right
		{
			position: relative;
			left: 1.25rem;
		}
		
		p.absolute
		{
			position: absolute;
			left: 6.25rem;
			top: 9.375rem;
		}
		div.sticky
		{
			position: -webkit-sticky;
			position: sticky;
			/* 粘性top 与bottom二选一 */
			top:0;
			/* bottom: 0; */
			padding: 0.3125rem;
			background-color: #98C133;
			border: 0.125rem solid #85A81F;
		}
		img
		{
			position: absolute;
			left: 0rem;
			top: 95rem;
			/* 因为我页面写了很多内容，所以top找了一个大概的位置可以与该题目文字重叠 */
			z-index: -1;
			/* clip:rect(95rem,4rem) */
			/* 没搞清楚怎么玩，好像我页面东西太多了，，【设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)】 */
		}
		
		div.ex1
		{
			background-color: #16B8D2;
			width: 6.875rem;
			height: 6.875rem;
			overflow: scroll;
		}
		div.ex2
		{
			background-color: #16B8D2;
			width: 6.875rem;
			height: 6.875rem;
			overflow: hidden;
		}
		div.ex3
		{
			background-color: #16B8D2;
			width: 6.875rem;
			height: 6.875rem;
			overflow:auto;
		}
		div.ex4
		{
			background-color: #16B8D2;
			width: 6.875rem;
			height: 6.875rem;
			overflow: visible;
		}
		
		</style>
	</head>
	<body>
		<h1>一、CSS显示</h1>
		<h1>1、隐藏元素：</h1>
		<h1>This is a visible head.</h1>
		<h1 class="hidden">This is a hidden head.</h1>
		<p>注意：隐藏内容也会占用空间</p>
		
		<h1>2、不显示元素：</h1>
		<h1 class="none">This is a hidden head.</h1>
		<p>注意：这个内容不显示，也不会占用空间</p>
		
		<h1>3、如何显示一个元素的内联元素：</h1>
		<p class="inline">第一个段落</p>
		<p class="inline">第二个段落</p>
		
		<h1>4、如何显示一个元素的块元素：</h1>
		<p>display 属性值为 "block" 的结果这两个元素之间的换行符。</p>
		<span>第一个内容</span><span>第二个内容</span>
		
		<h1>5、如何使用表格的collapse属性：</h1>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr class="collapse">
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
		<br>
		
		<h1>二、CSS定位</h1>
		<h2>1.元素相对浏览器窗口的位置</h2>
		<p class="pos_fixed" style="font-weight: 900;color: #FF0000;">Some more text.It's red.</p>
		
		<h2>2.元素的相对定位 relative</h2>
		<h4>这是正常位置的h4标题</h4>
		<h4 class="pos_left" style="color: #0000FF;">这个是相对于正常位置的h4标题向左移动</h4>
		<h4 class="pos_right" style="color: #0000FF;">这个是相对于正常位置的h4标题向右移动</h4>
		
		<h2>3.元素的绝对定位absolute</h2>
		<p class="absolute" style="font-weight: 700;color: #16B8D2;">这是一个被绝对定位了的元素,是蓝色的部分。用绝对定位,一个元素可以放在页面上的任何位置</p>
		
		<h2>补：粘性定位sticky</h2>
		<div class="sticky">
			我是粘性定位来的～   好玩吧
		</div>
		
		<h2>4.重叠的元素</h2>
		<p>这有一些文字重叠在图片上，z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素（文字0）总是会处于堆叠顺序较低的元素（图像-1）的前面（文字在上，图像在下）。</p>
		<img src="./img1.jpeg" width="250" height="160" />
		<br>
		<br>
		<br>
		
		<h2>5.滚动条显示元素溢出的内容:overflow属性（scroll、hidden、auto、visible）</h2>
		<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
		<h3>overflow:scroll:</h3>
		<div class="ex1">
			如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
		</div>
		<h3>overflow:hidden:</h3>
		<div class="ex2">
			如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
		</div>
		<h3>overflow:auto:</h3>
		<div class="ex3">
			如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
		</div>
		<h3>overflow:visible:</h3>
		<div class="ex4">
			如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
		</div>
		<br><br><br><br>
		
		<h1>6.改变光标样式</h1>
		<span style="cursor: auto;">auto</span>
		<span style="cursor: alias;">alias</span>
		<span style="cursor: col-resize;">col-resize</span>
		<p>...</p>
	</body>
</html>

更新下css显示与隐藏、定位、溢出显示、光标样式的内容～

虾尾丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例【七】

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> h1.hidden{visibility: hidden;} h1.none{display: none;} p.inline{display: inline;} span { display: block; }
复制链接

扫一扫