行内元素、块级元素和行内块元素区别
1、块级元素的特点
(1)每个块级元素都从新的一行开始,并且其后得元素也另起一行
(2)元素的 高 宽 行高顶和底边距离都可以设置
(3)元素宽度在不设置得情况下,是它本身父级元素得100% (和父元素得宽度一致),除非设定一个宽度。
(4)可以容纳内联元素和其他块元素
2、行内元素的特点
(1)和其他元素都在一行上
(2)元素的 高 宽 行高顶和底边距离都不可以设置,但是 margin 和 padding 可以设置,垂直方向的无效
(3)行内元素只能容纳文本或者其他行内元素
3、行内块元素
(1)和相邻行内元素(行内快)在一行上,但是之间会有空白缝隙
(2)元素的 高 宽 行高顶和底边距离都可以设置
(3)默认宽度就是它本身内容的宽度
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、
<ul>、<dl>、<table>、<address>、
<blockquote> -- 引用 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、
<strong>、<label>、<q>、<var>、
<cite>、<code>
常用的内联块状元素有:
<img>、<input>、<td>
4、行内元素 和块级元素的转换
display : block;
《大白话:将显示形式设置为块级元素》
display : inline;
《大白话:将显示形式设置为行内元素》
display : inline-block;
《大白话:inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。》
在简单一点说:就是具有了块级元素和行内元素的各自特点。
1、可以设置宽高
2、不换行