块级元素,行内(内联)元素和行内块元素分别有哪些, 另外什么是替换元素和费替换元素

Posted 2021-03-22 me2o

参考替换元素和非替换元素: https://www.cnblogs.com/lixiaodou/p/7150624.html

 

块级元素、行内(内联)元素和行内块元素

块状元素

　　块状元素代表性的就是<div>，其他如<p>、<nav>、<aside>、<header>、<footer>、<center>、<section>、<article>、<ui>、<li>、<ol>、<address>、<h1>~<h6>、<form>、<dir>、<hr>、<pre>、<table>、<dl>、<menu>等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

块状元素特征：

　　(1)能够识别宽高

　　(2)margin和padding的上下左右均对其有效

　　(3)可以自动换行

　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

 

行内元素

　　行内元素最常使用的就是<span>，其他如<a>、<abbr>、<acronym>、<b>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<label>、<kbd>、<q>、<s>、<samp>、<select>、<small>、<strike>、<sub>、<sup>、<strong>等等。

行内元素特征：

　　(1)设置宽高无效

　　(2)对margin仅设置左右有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　(3)不会自动进行换行

 

行内块状元素

　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多，如<button>、<del>、<iframe>、<ins>、<map>、<object>等等。

行内块状元素特征：

　　(1)不自动换行

　　(2)能够识别宽高

　　(3)默认排列方式为从左到右

 

块级元素和行内元素相互转换：

　　通过display属性

　　　　display:inline; //转换成行内元素

　　　　display:block; //将行内元素转换成块级元素

　　　　display:inline-block; //转换为行内块状元素

 

 

替换元素和非替换元素

替换元素：指浏览器是根据元素的属性来判断具体要显示的内容的元素。比如 <img> 标签，浏览器是根据其 src 的属性值来读取这个元素所包含的内容的，

其他替换元素有：<input> 、<textarea>、 <select>、 <object>、<iframe> 和 <video> 等等，

这些元素都有一个共同的特点，就是浏览器并不直接显示其内容，而是通过其某个属性的值来显示具体的内容，

比如浏览器会根据 <input> 中的 type> 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。

 

非替换元素：比如 <p> 、<labe>  元素等等，浏览器直接显示元素所包含的内容。

 

部分元素设置margin-top和margin-bottom, padding-top和padding-bottom不能起作用也是因为替换元素可替换内容的关系而已导致, 当中

替换元素: 是指用作为其他内容占位符的一个元素。如： <img>、input> 等起作用;

非替换元素:是指内容包含在文档中的元素 如：<span>等不起作用；