您的位置: 首页  >  文章  >  前端笔记五（定位法）

前端笔记五（定位法）

分类: 文章 • 2024-05-09 11:55:46

一、display（显示）

作用：当内联元素，比如span、a、 br 等，他们只能在同一行显示，不能换行，设置宽高，但是用了display：inline-block后可以。
1）、如图，是没有display：inline-block的时候：从图可以看见，没有display:inline-block;时，span对于设置的宽高没有任何反应。
前端笔记五（定位法）
2)、如下图，是设置了display:inline-block;后，span对设置的宽高有了反应：

前端笔记五（定位法）

二、nth-child 和 last-child的用法

1）、nth-child

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
	span:nth-child(2n){ /*表示只选取排在偶数的有以下样式效果*/

	border:2px solid red;
	width: 50px;
	height: 60px;
	display:inline-block;





}
</style>
</head>
<body>
		<span>星期一</span>
		<span>星期一</span>
		<span>星期一</span>
		<span>星期一</span>
		<span>星期一</span>	
</body>
</html>

如图，nth-child表示只选取排在偶数的有以下样式效果：

前端笔记五（定位法）

2)、last-child(表示只选取排在最后一个有以下样式效果)

如图：
前端笔记五（定位法）

相关推荐