块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol><li>等,
其中<div>标签是最典型的块元素
块级元素的特点:
- 比较霸道,自己独占一行
- 高度,宽度外边距以及内边距都可以控制
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或者块级元素
注意:
- 文字类的元素内不能使用块级元素
- <p>标签主要用于存放文字,因此<p>里面不能放块级元素特别是不能放<div>
- 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
操作如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示模式之块元素</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>比较霸道,自己独占一行</div>瑟瑟发抖
<p>
<div>这里有问题</div>
</p>
</body>
</html>
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、< i><del>< <ins>.<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
- 行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高 宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素。
注意:
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
操作如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示模式之行内元素</title>
<style>
span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<span>虾米虾米</span><strong>老虎老虎</strong>
</body>
</html>
行内块元素
在行内元素中有几个特殊的标签 < img />、 <input/>、<td>,它们同时具有块元素和行内元素的特点 有些资料称它们为行内块元素
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
操作如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示模式之行内块元素(特殊情况)</title>
<style>
input {
width: 279px;
height: 100px;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
</body>
</html>
元素显示模式转换
元素模式的转换,简单理解一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围。
转换为块元素 : display:block;
转换为行内元素 : display:inline;
转换为行内块 : display:inline-block;
操作如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式转换</title>
<style>
a {
width: 300px;
height: 50px;
background-color: pink;
/* 把行内元素a转换为块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: greenyellow;
/* 把div块元素转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>