内联元素->块状元素:display:block
块状元素->内联元素:display:inline
元素->内联块状元素:display:inline-block
在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>
下面的只是来自于课程15-9:
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
独占一行 能设置宽高 竖直方向的margin,padding 水平方向的margin,padding
块状元素: 是 是 有,可以设置 有,可以
内联元素: 否 否 不可以 有,可以
个人这样理解的:块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素。
行内元素:则允许同其他元素一起构成在一行。
很简单,块状指定一块区域,是比较大的一类元素;内联当然是用在块状里面任意位置,影响范围小于块状;内联块状也是指定一块区域,不过影响范围小于块状元素,而且可以用在块状区域里面,谢谢
块状: 独占一行,可设置宽高之类的,样式显示的也许小于等于元素。
内联:多个元素可在一行,css样式一定是随着标签内的元素多大就是显示样式就多大。
内联块状:多元素可在一行,还能设置宽高。
综合一下,不知你能否理解。
个人认为他们间有两个特点(差异)1.是否独占一行 2.是否手动可设置大小
块状元素一般都是比较大的父级元素,而内联元素一般都是下面的子集元素,内联块状就是2者相结合的能自己定义一段内容的,以上纯属本人初学的观点,楼主看看就好