范仁义css3课程---15、行内元素和块级元素
范仁义css3课程---15、行内元素和块级元素
一、总结
一句话总结：
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。可以用display属性的block、inline、inline-block分别设置
1、常见的块状元素有哪些？
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2、常见的内联元素（行内元素）有哪些？
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3、常见的内联块状元素有哪些？
<img>、<input>
4、块级元素的特点是什么？
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
5、行内元素的特点是什么？
行内元素和其他元素都在一行上，行内元素的高度、宽度及顶部和底部边距不可设置，行内元素的宽度就是它包含的文字或图片的宽度，不可改变。
6、内联块状元素的特点是什么？
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，内联块状元素和其他元素都在一行上，内联块状元素的高度、宽度以及顶和底边距都可设置。
7、display属性的block、inline、inline-block属性值分别是什么意思？
block表示设置为块级元素，inline表示设置为行内元素，inline-block表示设置为内联块状元素
二、行内元素和块级元素
博客对应课程的视频位置：15、行内元素和块级元素
https://www.fanrenyi.com/video/10/46
元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>
、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
9-2
元素分类--块级元素
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和
<li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从而使用a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
9-3
元素分类--行内元素
在html中，<span>、<a>、<label>，<strong>
和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。
行内元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
9-4
元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度以及顶和底边距都可设置。
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行内元素和块级元素</title> 6 <style> 7 .img1{ 8 width: 100px; 9 height: 100px; 10 margin-top: 20px; 11 margin-bottom: 20px; 12 } 13 .div1{ 14 /*display: inline;*/ 15 display: inline-block; 16 width: 100px; 17 height: 100px; 18 margin-left: 15px; 19 margin-right: 15px; 20 margin-top: 20px; 21 margin-bottom: 20px; 22 } 23 .span1{ 24 width: 100px; 25 height: 100px; 26 margin-left: 15px; 27 margin-right: 15px; 28 margin-top: 20px; 29 margin-bottom: 20px; 30 } 31 .a1{ 32 border: 1px solid #ff0000; 33 /*display: block;*/ 34 width: 100px; 35 height: 100px; 36 margin-top: 20px; 37 margin-bottom: 20px; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="div1"> 43 天塌了，地陷了，小花狗，不见了。 44 </div> 45 <a class="a1" href="">层林尽染</a> 46 <img class="img1" src="../imgs/aa.gif" alt=""> 47 <span class="span1"> 48 span：天塌了，地陷了，小花狗，不见了。 49 </span> 50 <input type="submit"> 51 <div> 52 大海呀，全是水，骏马呀，四条腿。 53 </div> 54 </body> 55 </html>
