目录
一、元素宽高的特点
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>