HTML元素的分类，特性以及相互转换 |
您所在的位置：网站首页 › html中块元素和行内元素怎么转换 › HTML元素的分类，特性以及相互转换 |
|
HTML元素的分类，特性以及相互转换
1.HTML元素的分类
html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念； 2.块级元素的特性含义：块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布；可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)；在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度；在不设置高度的情况下，块级元素的高度是它本身内容的高度；可以嵌套其他元素；ul li、ol li 、dl dt dd 成组出现，p标签不能嵌套它自己本身； 标签作用div常用块级容器，也是css layout的主要标签h1大标题h2副标题h3三级标题h4四级标题h5五级标题h6六级标题hr水平分隔线menu菜单列表ol有序列表ul无序列表li列表项dl定义列表dt定义标题dd定义描述table表格p段落form交互表单 3.行内元素的特性行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建； 和其他内联元素从左到右在一行显示,从左到右，达到父级元素的最大宽度时，会自动折行；不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的；内联元素的宽高是由本身内容的大小决定（文字、图片等）内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙； 标签作用span常用内联容器，定义文本内区块a锚点b加粗strong加粗强调i斜体em斜体强调s中划线（不推荐使用）strike中划线del文档中已被删除的文本br强制换行u下划线textarea多行文本输入框input输入框select下拉列表labelinput 元素定义标注（标记）img插入图片sub下标sup上标big大字体文本small小字体文本 4.行内块元素的特性 在一行排布，从左到右，达到父级元素的最大宽度时，会自动折行；设置盒子模型的CSS属性；默认不设置宽度和高度的时候，宽高都是由本身内容决定的；在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙； 标签作用textarea文本域input输入框img图片 5.块级元素和行内元素之间的相互转换CSS之display 属性 display: inline 行内display：inline-block 行内块display: block 块级CSS之float 属性 float ：left 左浮动float ：right 右浮动float：none 去掉浮动 6.CSS之display属性display的取值 设置或检索对象是否及如何显示display: inline; 指定对象为内联元素display:block; 指定对象为块级元素display:none; 隐藏对象,与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间display:inline-block; 指定对象为内联块（行内块）元素display: table-cell 指定对象作为表格单元格display: inline-block 特点： 可以让上下结构的元素排列方式变成左右水平排列的方式(让元素在一行显示)缺点： 行内块元素会受换行符和空格的影响产生间距；行内块间距，解决办法: 给行内块元素的父元素添加属性 font-size:0;IE6/7下不兼容 ，解决办法: 给行内元素上添加*display:inline;*zoom:1 7.display与visiblity的区别 display属性设置一个元素应如何显示visibility属性指定一个元素应可见还是隐藏；visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局 ；display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失； |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |