替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)。
最明显的两个例子:
另外,textarea、select、object、video都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
HTML 的大多数元素是非替换元素,浏览器直接将其内容显示出来。例如:div, p, span
普通流中,块元素独占一行。例如:div,p,h1等。
普通流中,行内元素左右可以有其他行内元素。
块级元素,width,height,margin,boder的设置遵循盒模型。
行内替换元素,width,height,margin,boder的设置遵循盒模型。另外,当其宽高有auto属性时,其表现如下:
css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
替换元素和非替换元素
html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
置换元素(替换元素)和非置换元素(不可替换元素)
行内元素与块级元素的总结
置换和非置换元素
它们的区别主要有以下几点:
1、CSS有个属性叫做display,其取值可以为inline-block。W3CSchool中说display 属性规定元素应该生成的框的类型。
2、display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。
3、元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。
4、块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
5、display其中块级元素对应display:block,行内元素对应display:inline。可以通过修改元素的display属性来切换行内元素和块级元素。
css 行内元素有哪些:* a - 锚点、* dfn - 定义字段、* em - 强调、* i - 斜体、* img - 图片、* strike - 中划线、* strong - 粗体强调、* sub - 下标、* sup - 上标、* textarea - 多行文本输入框、* tt - 电传文本、* form - 交互表单。
行内元素有哪些:a、b、span、img、input、strong、select、label、em、button。
html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
设置display:block;可以将元素转换块级元素。
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
设置display:inline可以将块状元素转换为内联元素