html表单元素是块级元素还是行级元素。

Posted 2023-04-26

html表单元素是块级元素还是行级元素。

你这话问的就有问题，块级元素和行级元素指的是body中应用的各种元素，并不包括html标签。

块元素(block)的特点：
1、总是在新行上开始；
2、高度，行高以及顶和底边距都可控制；
3、宽度缺省是它的容器的100%，除非设定一个宽度。

内联元素(inline)的特点：
1、和其他元素都在一行上；
2、高，行高及顶和底边距不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。

html标签的block、inline分类明细：
块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 举中对齐块
◎ dir - 目录列表
◎ div - 常用块级容易，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表

内联元素(inline element)
◎ a - 锚点◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
◎ applet - java applet
◎ button - 按钮
◎ del - 删除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 图片区块(map)
◎ object - object对象
◎ script - 客户端脚本 参考技术A

一、都不是，块级元素和行级元素指的是body中应用的各种元素，并不包括html标签。

二、html标签的block、inline分类明细：

（1） address - 地址，blockquote - 块引用，center - 举中对齐块，dir - 目录列表，div - 常用块级容易，也是css layout的主要标签；

（2）dl - 定义列表，fieldset - form控制组，form - 交互表单，h1 - 大标题，h2 - 副标题，h3 - 3级标题，h4 - 4级标题；

（3）h5 - 5级标题，h6 - 6级标题，hr - 水平分隔线，isindex - input prompt，menu - 菜单列表。

三、块元素(block)的特点：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。

参考技术B 别人问的就是表单元素

网页布局之float

一、浮动的原理
浮动是让某元素脱离标准流，漂浮在标准流之上的一种布局方式。任何元素被设置为浮动元素后，就表明它是块级元素，拥有宽高属性。
二、浮动带来的影响
1、影响它的兄弟元素的位置
一个元素设置了浮动样式后，会影响它的兄弟元素，至于如何影响，要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素，会无视这个浮动元素，即兄弟元素和浮动元素共处同行，浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；如果兄弟元素是内联元素，则会尽可能围绕浮动元素。
2、会导致父元素高度自动清零
浮动元素脱离了普通流，导致父元素高度塌陷。
闭合浮动：使浮动元素闭合，从而减少浮动带来的影响。
三、闭合浮动的方法大体分为两类
1、利用clear属性。可以通过在浮动元素末尾添加一个带有clear: both属性的空div 来闭合元素，也可以通过:after伪元素在浮动元素末尾添加一个内容为一个点并带有clear: both属性的元素来闭合元素。
A、用空div闭合浮动

.clr1{ clear:both; } 
<div class="box1">
 <div class="fl">左浮动</div>
 <div class="fr">右浮动</div>
 <div style="clr1">清除浮动</div>
</div>

B、用:after伪元素闭合浮动

.clr2:after{ 
    clear:both; 
    display:block; 
    content:‘.‘; 
    overflow:hidden; 
    visibility:hidden; 
    height:0; 
} //谷歌,火狐 
.clr2{ 
    clear:both; 
    zoom:1; 
} //IE 
<div class="box2 clr2">
 <div class="fl">左浮动</div>
 <div class="fr">右浮动</div>
</div>

2、触发该浮动元素父元素的BFC，使其父元素可以包含浮动元素。
A、给浮动元素的父元素添加浮动，不建议采用。
B、给浮动元素的父元素添加display: table-cells，这样会改变盒子模型，也不建议使用。
C、把浮动元素的父元素overflow属性设为hidden或auto，可以闭合浮动。另外在IE6中还需要触发hasLayout，例如为父元素设置容器宽高或设置zoom：1。