1、行内,块级(含义)
行内元素:
- 行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素。
举例:
<a>
标签可定义锚
<b>
字体bai加粗
<br>
换行
<em>
定义为强调的内容
<i>
斜体文本效果
<img>
向网页中嵌入一幅图像输入框
<input>
元素定义标注(标记)
<span>
组合文档中的行内元素
<label>
标签为
块级元素:
- 块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。
举例:
<div>
定义文档中的分区或节
<dl>
定义列表
<dt>
定义列表中的项目
<form>
创建 HTML 表单
<h1>
定义最大的标题
<h2><h3><h4><h5>
<h6>
定义最小的标题
块级元素和行内元素的区别
-
块级元素会独占一行,其宽度自动填满其父元素宽度
行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,
-
一般情况下,块级元素可以设置
width,height
属性,行内元素设置width,height
无效
(注意,块级元素设置了width
宽度属性后仍然是独占一行的) -
块级元素可以设置
margin,padding
属性
行内元素:对margin
仅设置左右方向有效,上下无效;padding
设置上下左右都有效,即会撑大空间
<div class="con1"></div>
<span>123</span>
.con1{
width: 100px;
height: 100px;
background: darkcyan;
margin: 10px 10px;
padding:10px 10px;
}
span{
width: 100px;
height: 100px;
margin: 20px 20px;
/* margin改变上下没有用,左右可以改变 */
padding:20px 20px;
/* padding改变上下左右都有用 */
background: darkorange;
}
这里还有一个需要注意的是,input
框和img
便签,这些t属于行内替换元素,因为上面上到:行内元素对margin
仅设置左右方向有效,上下无效,但看下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素设置外边距</title>
<style>
body{
margin: 0;
padding: 0;
}
span{
width: 100px;
height: 100px;
margin: 20px 20px;
/* margin的上下没有用,左右可以改变 */
padding:20px 20px;
/* padding的上下左右都有yong */
background: darkorange;
}
input{
background: cornflowerblue;
border: 1px solid #dddddd;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
margin-top: 10px;
margin-bottom:10px;
margin-left:10px;
margin-right: 10px;
}
</style>
</head>
<body>
<input type="text" class="con">
<input type="text" class="con">
<span>123</span>
<span>234</span>
</body>
</html>
input,span
标签元素,都是并排在一行,它们都属于行内元素,但是加input
便签的元素有margin-top
,但是span
便签的元素没有。