开发者学堂课程【前端开发CSS基础：CSS 元素分类 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4260
CSS 元素分类
内容介绍
一、块级元素
二、内联(行内）元素
三、内联块级元素
在 CSS 中， html 中的标签元素人体被分为三种不同的类型：块级元素（又叫行内元素）和内联块级元素。
一、块级元素
1、常用的块级元素有:
<div>、<p>、<h1>..<h6>、<ol>、<ul>、<li>、<dl>、<dd>、<dt>、<table>、<tr>、<td>、<address>、<blockquote>、<form>
2、块级元素的特点：
a：每个块级元系都从新的一行开始，并且其后的元素也另起一行。
b :元素的高度、宽度、行高以及顶和底边距都可设置。
c∶元素宽度在不设置的情况下，是它本身父容器的 1O0% (和父元素的宽度一致），除非设定一个宽度。
3、设置 display:
Block 可将元素显示为块级元素。如下代码就是将内联元素 a 转换为块状元素，从而使 a 元素具有块状元素特点。
例: a{display:block;}，代码如下：
< ! DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="app.css"rel="stylesheet"type="text/css"/>
< /head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
< /body>
< /html>
统一给 div 一个类名，再给 div 背景颜色，块级元素特点是每一个块级元素都是独自占有一行，代码如下：
div{
width:100px;
height: 100px;
}
one{
background-color: aquamarine ;
}
two{
background-color: blueviolet;
}
演示效果如下：
二、内联元素
1、常用的内联元素有:
<a>、<b>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite>、<code>
2、内联元素的特点：
a：和其他元素都在一行上;
b：元素的高度、宽度及顶部和底部边距不可设置;
c：元素的定度就是它包含的文字成图片你宝度，不可改变。
3、内联元素设置：
也可以通过代码 display:inline 将元素设置为内联元素。如下代码就是将块状元素 div 转换为内联元素，从而使 div 元素具有内联元素特点。
例: div{
display:inline;
}
<div>我要变成内联元素</div>
改变一下 span 的高度和宽度，代码如下：
span{
width:200px;
height:200px;
background-color: aqua;
}
会发现 span 的高度和宽度并没有被改变，这就是内联元素的第二个特点。如果想要它生效如何操作呢？这就是块级元素的第三个点，可以对它的高度宽度进行设置。代码如下：
span{
width: 200px ;
height: 200px;
display:block;
background-color :aqua ;
}
三、内联块级元素
1、常用的内联块级元素有:
<img>、<input>
2、内联块级元素的特点:
a:和其他元素都在一行上;
b:元素的高度、宽度、行高以及顶和底边距都可设置。
3、内联块级元素设置：
代码 display.inline-block 就是将元素设置为内联块状元素。写入一个 img 标签，先引入一个图片内容，代码如下：
< ! DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="app.css" rel="stylesheet" type="text/css"/>
< /head>
< body>
<img src="li.png"/>
<img src="li. png"/>
< /body>
< /html>
给 a 标签一个样式，代码如下：
Span{
width:200px ;
height: 200px;
background-color: aqua;
}
a{
width:100px ;
height: 100px;
background-color: blueviolet;
}
改变一下元素类型，代码如下：
span{
width: 200px;
height:200px;
background-color: aqua;
Display: inline-block;
}
a{
width: 100px;
height:100px;
background-color: blueviolet;
Display: inline-block;
}
刷新看一下效果，宽和高都生效了，这就是内联块级元素。
