CSS入门–元素的显示模式
一.元素的显示模式分类：块元素，行内元素，行内块元素
二.
（1）块元素：
常见的块元素有< h 1>-< h 6 >,< d i v>,< ul >,< li >,< ol>等
特点：
独占一行；
高度宽度，外边距和内边距可以控制；
宽度默认是容器的100%；
是一个盒子，里面可以放行元素或者块元素
p标签主要用来放文字，不可以放div；
（2）行内元素：
常见的行内元素有：< a >< em >< span >
特点：
相邻行内元素可以在一行显示；
高宽直接设置是无效的；
默认宽度就是他本身文字内容的宽度
行内元素只能容纳文本或者其他行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素和行内元素</title>
<style>
div {
background-color: pink;
}
a {
color: red;
}
input {
height: 20px;
}
</style>
</head>
<body>
<div>
<a href="#">我想买风衣</a>
<span>还想买新手机</span>
</div>
<input type="text">
</body>
</html>
（3）行内块元素
常见的行内块元素：< img/ >,< input/ >,< td>-----他们同时局具有行内元素和块元素的特点：
一行可以显示多个
默认宽度是本身内容的宽度
高度宽度内外边距可以控制
（4）元素显示模式的转换：
转换成块元素：display:block
转换成行元素：display:inline
转换成行内块元素：display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素模式的转换</title>
<style>
/* <!-- 把行元素a链接转化成块元素,可以设置宽度高度 --> */
a {
height: 200px;
width: 500px;
background-color: pink;
display: block;
}
/* 把块元素div转化成行元素,变成行内元素后宽度高度无效 */
div {
height: 500px;
width: 500px;
background-color: skyblue;
display: inline;
}
/* 把行内元素转换成行内快元素 */
span {
height: 200px;
width: 500px;
background-color: rgb(56, 61, 67);
display: inline-block;
}
</style>
</head>
<body>
<a href="#">榴莲披萨真好吃</a>
<div>我想吃榴莲披萨</div>
<div>我想吃榴莲披萨</div><br>
<span>可是小陈不给我吃</span>
</body>
</html>
1627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
