学习记录 --【零基础CSS学习】14.元素的属性

最新推荐文章于 2024-06-14 08:47:36 发布

钟情于山海

最新推荐文章于 2024-06-14 08:47:36 发布

阅读量255

点赞数

文章标签： css 学习 html 前端

本文链接：https://blog.csdn.net/m0_37612107/article/details/125634666

版权

1.元素隐藏————display: none;

2.元素的显示

一、元素宽高的特点

1. 块级元素

（1）可以设置宽高

（2）不能和其他元素呆在一行

（3）当没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定

（4）当设置有宽高时，元素的宽高就是设置的值，不会因元素内容的宽高而改变已经设置好的宽高

2. 行级元素

（1）不可以设置宽高

（2）不可以和其他元素呆在一行

3. 行内块级元素

（1）可以设置宽高

（2）可以和其他元素呆在一行

例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素宽高特点（1）</title>
	<style type="text/css">
		body{padding: 0;margin: 0;}
	</style>
</head>
<body>
    <div style="background: red;width: 200px;height: 40px;">我想打游戏<br>好想打游戏</div>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素宽高特点（2）</title>
</head>
<body>
	<span style="background: red;width: 200px;height: 20px;">我想打游戏</span><!-- 宽高设置了也没用 -->
	<br><br><br><br>
	<img src="../img/g1.jpg" alt="" style="background: red;style="width: 200px;height: 20px;">
</body>
</html>
</body>
</html>

二、元素的类型转换

任何元素都可以进行类型转换

1.转块级元素--display：block;

2.转行内元素--display：inline;

3.转行内块级元素--display: inline-block;

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素类型转换</title>
	<style type="text/css">
		div{
			background: green;
			display: inline;
			width: 200px;
			height: 80px;
		}
	</style>
</head>
<body>
	<div>我要打游戏</div>
</body>
</html>

三、元素的显示和隐藏

1.元素隐藏————display: none;

（1）页面结构仍然存在

（2）元素所占的空间同时被隐藏

2.元素的显示

（1）display: block;（块级元素显示）

（2）display: inline;（行级元素显示）

（3）display: inline-block;（行内块级元素显示）

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素的显示和隐藏</title>
	<style type="text/css">
		div{
			background: green;
			width: 200px;
			height: 80px;
			display: none;/*隐藏了元素*/
		}
		.one{
			display: block;/*又显示出了元素*/
		}
		span{
			background: red;
		}
	</style>
</head>
<body>
	<div class="one">我想打游戏</div>
	<span>我好想打游戏</span>
</body>
</html>