|
阅读：5685回复：1
块级元素、行内元素以及它们的转换
HTML可以将大多数元素分为行内元素、块级元素这两种，并且它们是可以互相转换的。
1.行内元素 ■特点 （1）宽高就是内容的高度，不可以改变； （2）对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间； （3）和其他元素都在同一行，不会自动进行换行； （4）内联元素只能容纳文本或者其他内联元素。 ■有哪些 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 - 粗体强调 //h5中已取消 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 ■img、input到底是行内元素还是块级元素？ img、input属于行内替换元素。height/width/padding/margin均可用，效果等于块元素。(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。对于表单元素，浏览器也有默认的样式，包括宽度和高度。 (X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。 2.块级元素 ■特点 （1）能够识别宽高（宽度没有设置时，默认为100%）； （2）margin和padding的上下左右均对其有效； （3）可以自动换行； （4）可以容纳行内元素和其它块元素。 ■有哪些 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 - 非排序列表 3.行内块级元素 行内块级元素综合了行内元素和块级元素的特性，但是各有取舍。 ■特点 （1）不自动换行； （2）能够识别宽高； （3）默认排列方式为从左到右。 4.块级元素和行内元素之间的转换 ■display 块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block; a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置； b.display:block;转换为块级元素； c.display:inline;转换为行内元素； d.display:inline-block;转换为行内块级元素。 ■float 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。 ■position 当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。 参考文献：1.说说行内元素和块级元素 2.HTML行内元素、块状元素、行内块状元素的区别 3. img、input到底是行内还是块级元素？ |
|
|
沙发#
发布于：2020-10-16 11:48
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-block;转换为行内块状元素 |
|
