在CSS中遇到的好玩儿之处01

最新推荐文章于 2023-07-22 17:13:11 发布

西小贝先森

最新推荐文章于 2023-07-22 17:13:11 发布

阅读量110

点赞数 2

分类专栏：趣玩CSS 文章标签：常见css面试题定位的方法外边距合并问题伪类链接问题

本文链接：https://blog.csdn.net/luckyht/article/details/101025126

版权

趣玩CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. text-transform 可设置字体转换

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title> Document</title>
	<style>
		p{color:red; font:18px ; font-weight:700;}
		.uppercase{
			text-transform: uppercase;
		}
		.lowercase{
			text-transform: lowercase;
		}
		.capitalize{
			text-transform:capitalize;
		}
	</style>
</head>
<body>
	<p class='uppercase'>you are my superstar</p>
	<p class='lowercase'>you are my superstar</p>
	<p class='capitalize'>you are my superstar</p>
</body>
</html>

显示结果如下：

2.伪类：hover link active visit 问题

hover 是鼠标悬停时所显示的样式

link 未访问时元素的状态

active 是选定的链接的状态（鼠标按下未松开时的颜色）

visited 是已访问的链接

focus 是元素获取光标时所使用的颜色（鼠标按下离开时的颜色）

防止被点击访问过的超链接样式不再具有hover和active 解决方法

执行顺序：link visited hover active

3.字体变形问题：font-variant

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。形如：

3.外边距合并问题

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当然外边距合并最初看起来比较奇怪，但是实际上，它是有具体意义的。外边距合并可以使得块级元素的上下文各处的距离保持一致，减少了不必要的空间浪费。
需要注意的是，只有普通文档流中块框的垂直外边距才会发生外边距合并。如果是行内框，浮动框或绝对定位之间的外边距是不能进行合并的

4.css的三种定位机制：普通流，浮动，绝对定位

普通流：元素没有专门特定的位置指定，在普通流中的元素的位置是有元素在（X）HTML中的位置决定的

一般我们将HTML元素分为三类块级元素行内元素行内块元素

定位 css的position属性

xu值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。设置为相对定位的元素框会偏移某个距离，元素仍然保持其未稳定之前的状态，他原本所占的空间任保留因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

需要注意的是：相对定位是相对于元素在文档中的最初始位置，而绝对定位是相对于最近的已定位祖先元素，如果不存在最近的祖先元素那么就相对于最初的包含块

具体代码演示如下：

正常无定位的情况：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{margin:0;padding:0;}
		#div1{
			width: 200px;
			height: 200px;
			background-color: #f40;
		}
		#div2{
			width:300px;
			height: 200px;
			background-color: #000;
		}
    </style>
</head>
<body>
	 <!-- 无定位的情况  -->
	<div id="div1"></div>
	<div id="div2"></div2>
</body>
</html>

绝对定位：相对于已定位的祖先元素进行定位，如果不存在这样的祖先元素就相对于自己的初始位置进行定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{margin:0;padding:0;}
	    #father{
	    	border:1px solid blue;
	    	position:static;
	    }
		#div1{
			width: 200px;
			height: 200px;
			background-color: #f40;
			position:absolute;
			left:30px;
			top:10px;
		
		}
		#div2{
			width:300px;
			height: 200px;
			background-color: #000;

    </style>
</head>
<body>
		<!--  绝对定位  -->
		<div id="father">
			<div id="div1"></div>
			<div id="div2"></div2>
		</div>
	
</body>
</html>

相对定位：是相对于自己的位置进行定位的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{margin:0;padding:0;}
	    #father{
	    	border:1px solid blue;
	    }
		#div1{
			width: 200px;
			height: 200px;
			background-color: #f40;
			position:relative;
			left:30px;
			top:20px;
		}
		#div2{
			width:300px;
			height: 200px;
			background-color: #000;
			

    </style>
</head>
<body>
		
		<div id="father">
			<div id="div1"></div>
			<div id="div2"></div2>
		</div>
	
</body>
</html>

子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{margin:0;padding:0;}
	    #brother{
	    	width: 500px;
	    	height: 500px;
	    	background-color: #666;
	    }
	    #father{
	    	border:1px solid blue;
	        position: absolute;
	    }
		#div1{
			width: 200px;
			height: 200px;
			background-color: #f40;
			position:relative;
			left:30px;
			top:10px;
		
		}
		#div2{
			width:300px;
			height: 200px;
			background-color: #000;

    </style>
</head>
<body>
        <div id="brother"></div>
		  子绝父相
		<div id="father">
			<div id="div1"></div>
			<div id="div2"></div2>
		</div>
	
</body>
</html>

西小贝先森

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在CSS中遇到的好玩儿之处01

1. text-transform 可设置字体转换<!DOCTYPE html><html lang='en'><head> <meta charset='utf-8'> <title> Document</title> <style> p{color:red; font:18px ; font...
复制链接

扫一扫