| CSS之排列系列 | 您所在的位置：网站首页 › div标签有哪些 › CSS之排列系列 |
|
原文网址：CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介本文介绍CSS的块级元素(block)、内联元素(inline)和内联块元素(inline-block)的区别。 对比项 块元素 内联元素 内联块元素 display值 block inline inline-block 换行 独占一行 相邻的内联元素排在同一行，直到一行排不下，才换行 与“内联元素”相同 width，height，line-height width，height，line-height有效。 宽度：若不设置则自动填满父元素宽度 width，height无效，line-height有效。 宽度由内容决定，高度随由字体大小决定。 width，height，line-height有效。 宽度：若不设置则由内容决定。 margin，padding 可设置margin和padding属性 只有横向其效果，纵向不起效果。即：margin-left、margin-right、padding-left、padding-right起作用，margin-top、margin-bottom、padding-top、padding-bottom不起作用 与“块元素”相同 容纳的内容 可容纳块元素和内联元素。 可容纳块元素和内联元素。 内部的块级元素会撑大外部的内联标签。 特殊的元素 几个特殊的块元素只能包含内联元素而不能包含块级元素：h1~h6、p、dt。 li可以包含div标签 将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。 替换元素与非替换元素替换元素（空元素） 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：img、input、textarea、select、object。 这样的元素也称为：空元素，因为这些元素没有实际的内容。例如： 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 例1：img 浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容。 例2：input 根据标签的type属性来决定是显示输入框，还是单选按钮等。 不可替换元素（非空元素） html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。 例如： 段落的内容 段落是一个不可替换元素，文字“段落的内容”全被显示。 元素转换1.display 块元素：默认display:block;内联非替换元素(a,span)：默认为display：inline;内联替换元素(input)：默认为display:inline-block;display:none; /*不显示该元素，也不会保留该元素原先占有的文档流位置。*/ display:block; /*转换为块级元素。*/ display:inline; /*转换为行内元素。*/ display:inline-block; /*转换为行内块级元素。其实仍为行内元素，但可以设置width及height等*/ 2.float 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。3.position 为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。 块元素大全元素 说明 address 地址 caption 表格标题 dd 列表中条目 div 文档中的分区或节 dl 列表 dt 列表中的项目 fieldset 一个框架集 form 创建 HTML 表单 h1 1级标题 h2 2级标题 h3 3级标题 h4 4级标题 h5 5级标题 h6 6级标题 hr 创建一条水平线 legend 元素为 fieldset 元素标题 li 标签列表项目 noframes 为那些不支持框架的浏览器显示文本，在frameset元素内部 noscript 在脚本未被执行时的替代内容 ol 有序列表 ul 无序列表 p 标签段落 pre 预格式化的文本 table 标签 HTML 表格 tbody 标签表格主体（正文） td 表格中的标准单元格 tfoot 表格的页脚（脚注或表注） th 表头单元格 thead 标签表格的表头 tr 表格中的行 内联元素大全元素 说明 a 锚 abbr 表示一个缩写形式 acronym 只取首字母缩写 b 字体加粗 bdo 可覆盖默认的文本方向 big 大号字体加粗 br 换行 cite 引用进行定义 code 定义计算机代码文本 dfn 定义一个定义项目 em 定义为强调的内容 i 斜体文本效果 img 向网页中嵌入一幅图像 input 输入框 kbd 定义键盘文本 label 标签为 input 元素定义标注（标记） q 定义短的引用 samp 定义样本文本 select 创建单选或多选菜单 small 呈现小号字体效果 span 组合文档中的行内元素 strong 语气更强的强调的内容 sub 定义下标文本 sup 定义上标文本 textarea 多行的文本输入控件 tt 打字机或者等宽的文本效果 var 定义变量 可变元素大全可变元素为根据上下文语境决定该元素为块元素或者内联元素。 元素 说明 button 按钮 del 定义文档中已被删除的文本 iframe 创建包含另外一个文档的内联框架（即行内框架） ins 标签定义已经被插入文档中的文本 map 客户端图像映射（即热区） object object对象 script 客户端脚本 |
| CopyRight 2018-2019 实验室设备网 版权所有 |