行内元素和块级元素,一般大家都这嘛说,其实有好多细节呢。你造吗?
一、块级元素和块元素:
1.块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。display
属性的:block
, list-item
, table
, flex
, grid
值都可以将一个元素设置成块级元素
2.块元素是 display
属性值为 block
的元素,它应该是 块级元素
的一个子集,而不是等同的,一个 块元素
是一个 块级元素
,但一个 块级元素
不一定是一个 块元素
。
3.怎嘛说呢,比方说某元素是是行内属性,你添加display:block;就是块元素,但是像<li></li>不需要添加display:inline;就可以换行,就叫做块级元素;
二、行内元素和行内级元素:
1.行内级元素是那些不会为自身内容形成新的块。display
属性的:inline
, inline-table
, inline-block
, inline-flex
, inline-grid
值都可以将一个元素设置成行内级元素。
2.如同块元素之于块级元素的关系,行内元素仅仅是 display
属性值为 inline
的元素。
三、下边列举一些具体标签是行内级元素还是块级元素:
行内级元素:
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
块级元素:
<address>
联系方式信息。<article>
HTML5文章内容。<aside>
HTML5伴随内容。<audio>
HTML5音频播放。<blockquote>
块引用。<Canvas>
HTML5绘制图形。<dd>
定义列表中定义条目描述。<div>
文档分区。<dl>
定义列表。<fieldset>
表单元素分组。<figcaption>
HTML5图文信息组标题<figure>
HTML5图文信息组 (参照<figcaption>
)。<footer>
HTML5区段尾或页尾。<form>
表单。<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
标题级别 1-6.<header>
HTML5区段头或页头。<hgroup>
HTML5标题组。<hr>
水平分割线。
<noscript>
不支持脚本或禁用脚本时显示的内容。<ol>
有序列表。<output>
HTML5表单输出。<p>
行。<pre>
预格式化文本。<section>
HTML5一个页面区段。<table>
表格。<tfoot>
表脚注。<ul>
无序列表。<video>
HTML5视频。
四、下边说下置换元素:置换元素就归为行内级元素吧
1.一个 内容
不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
2.w3c并没有给出明确的非置换元素的解释,但能确定的是除置换元素之外,所有的元素都是非置换元素。
3.其实置换元素就是不换行,但是拥有宽,高。类似于inline-block属性。
常见置换元素:<img>、<input>、<textarea>、<select>、<object>
置换元素的高度的设置需遵循以下几点:
- 1.若宽高的计算值都为
auto
且元素有固有高度,则height
的使用值为该固有高度; - 2.若高度的计算值为
auto
且元素有固有高度,则height
的使用值为该固有高度; - 3.若高度的计算值为
auto
且宽度有非auto
的计算值,并且元素有固有宽高比,则height
的使用值为:宽度使用值 / 固有宽高比
; - 4.若高度的计算值为
auto
且上述条件完全不符,则height
的使用值不能大于150px
,且宽度不能大于长方形高度的2倍。
其它类型的置换元素,其高度的定义都参照行内置换元素的定义。
文章参考:http://caibaojian.com/inline-vs-block.html
http://blog.doyoe.com/