<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML元素分类</title>
<style type="text/css">
/*浏览器默认样式(外边距和内边距)初始化(所有)*/
*{
margin: 0;
padding: 0;
}
.t_div{
margin: 0 auto;/*水平居中*/
padding-bottom: 300px;
background: red;
}
.t_p{
margin-top: 50px;
padding-left: 300px;
width: 500px;
height: 100px;
background: darkgoldenrod;
}
.t_h1{
margin-left: 100px;
width: 500px;
height: 100px;
background: green;
}
.ths{
background: indianred;
}
.t_em{
padding-bottom: 300px;
background: darkgoldenrod;
}
.t_span{
margin-left: 100px;
padding-left: 300px;
line-height: 100px;
background: blueviolet;
}
.t_pic{
margin-left: 800px;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div class="t_div">块内元素div</div>
<p class="t_p">块内元素p</p>
<h1 class="t_h1">块内元素h1</h1>
<span class="t_span">行内元素span</span>
<em class="t_em">行内元素em</em>
<img class="t_pic" src="img/logo.jpg">
<!--/*
* 1、html的标签元素分类：块状元素，行内元素（内联元素），行内块状元素（可变元素）。
*块状元素：
*常用： div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
* 独占一行；可以设置width、height、margin、padding；可以容纳内联元素和其他块元素；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。
*行内元素：
*常用：a、span、br、i、em、strong、label、q、var等
* 和其他元素都在一行上;可设置padding、line_height、margin-left、margin-right;只能容纳文本或者其他内联元素;元素的宽度就是它包含的文字的宽度，不可改变。
*行内块状元素：
*常用：img、input
* 和其他元素都在一行上；可以设置width、height、margin、padding、line_height。
*
*2、元素之间的转化:
display:block；(将元素变为块级元素)
display:inline； (将元素变为行级元素)
display：inline-block；（将元素变为行级块元素）
*3、元素分类(理解):
* 1）.文本样式、2）.结构模块样式
* 4、帮助理解：
* 块元素特立独行；内联元素随波逐流。
* 块元素通常用作网页的主要构建模块，而内联元素常用来标记小段内容（修饰文本）.
* 设计一个页面时，一般从较大的块开始 ，然后完善页面的时候再加入内联元素。
*/-->
</body>
</html>
原文地址：https://www.cnblogs.com/goodgirl----xiaomei/p/9757745.html