元素类型转换的方法

悠悠 2022-12-25 13:58 129阅读 0赞

### 元素类型 ###

三种类型:块状元素，内联元素，行内块元素、可变元素

**1、块状元素block element**

A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等；

B）默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。

C）块状元素都可以定义自己的宽度和高度。

D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子

**2、行内inline element**

A) 常见的内联元素如：a,span,i,em,strong,b等

B) 内联元素的表现形式是始终以行内逐个进行显示；

C) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；

D)内联元素也会遵循盒模型基本规则，如可以定padding,border,margin,background等属性，但个别属性值不能正确显示;

a - 锚点 i - 斜体 em - 倾斜

span - 常用内联容器，定义文本内区块

strong - 粗体强调 b--加粗

**3、内联块状元素**

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，<img>、<input>标签就是这种内联块状标签。

inline-block元素特点：

A、和其他元素都在一行上；

B、元素的高度、宽度、行高以及顶和底边距都可设置

常见标签：img input textarea

img - 图片 input - 输入框

textarea - 多行文本输入框

### 元素类型的转换 ###

display:block/inline/inline-block/none/list-item/table/table-header-group/table-footer-group

1)Block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。或者就是让元素竖排显示。

2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。或者就是让元素横排显示。

3)当元素设置了float属性后，就相当于该元素具备块状元素显示的特点；

4)Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input垂直对齐方式\{vertical-align:top/bottom/middle;\}

5)none 此元素不会被显示。

6)list-item:将元素转换成列表。li的默认类型。

7）如下：

*  大部分块元素display属性值默认为block，其中列表的默认值为list-item。
 *  大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java类型转换：自动类型转换与强制类型转换的区别

在Java编程中，类型转换主要分为两种方式：自动类型转换和强制类型转换。两者的主要区别如下： 1. 自动类型转换： - 程序员无意间完成，如基本类型的赋值、对象的引用等

落日映苍穹つ/ 2024年12月04日 12:39/ 0 赞/ 24 阅读

相关类型转换不准确：Java类型转换失败的场景及修复方法

在Java编程中，类型转换是一个常见的操作。但是，如果处理不当，可能会导致类型转换失败。下面是一些常见场景以及相应的修复方法： 1. **原始数据类型与目标数据类型的尺寸差异

╰半夏微凉°/ 2024年10月17日 09:18/ 0 赞/ 39 阅读

相关类型转换误区：Java转换类型方法误用示例

在Java中，确实有一些类型转换的方法。如果使用不当，可能会导致一些常见的误解和错误。以下是一个典型的误用示例： ```java // 假设我们有一个String类型的变量s

迈不过友情╰/ 2024年10月16日 03:30/ 0 赞/ 57 阅读

相关 JS类型转换的常见方法

![b85dd22b3376321e346d81f92aceb69f.jpeg][] JS类型转换常见的方法小结　　一、[类型转换][Link 1] 　　1.转换成字串

快来打我*/ 2024年04月03日 13:23/ 0 赞/ 78 阅读

相关 java中char类型转换成int类型的方法

java中，需要对输入进行一些判断，比如需要输入的是数字，而用户输入了字符，那么就会报错，因此用char或者String类型接收输入的数据就不会报错，但是问题来了：如何让输入的

野性酷女/ 2024年03月27日 13:52/ 0 赞/ 121 阅读

相关常见的JS类型转换方法

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] JS类型转换常见的方法集合　　一、类型转换　　1.转

淩亂°似流年/ 2024年03月25日 20:41/ 0 赞/ 37 阅读

相关 String类型强制转换的方法

1. toString() 2. valueOf() 3. \+”“ int i = 99; String s1 = Integer.toString(

我就是我/ 2024年02月17日 18:56/ 0 赞/ 19 阅读

相关 php数据类型隐式转换,js数据类型转换有哪些？js数据类型转换的方法总结

本篇文章给大家带来的内容是关于js数据类型转换有哪些？js数据类型转换的方法总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在js中，数据类型转换分为显

谁借莪１个温暖的怀抱￠/ 2023年01月15日 15:21/ 0 赞/ 283 阅读

相关元素类型转换的方法

元素类型三种类型:块状元素，内联元素，行内块元素、可变元素 1、块状元素block element A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩

悠悠/ 2022年12月25日 13:58/ 0 赞/ 130 阅读

相关 java类型转换方法

基本类型的类型转换(难点) 自动类型转换主要指小范围向大范围转换，在编译阶段自动完成。 byte => short => int => long =>

Dear 丶/ 2022年06月09日 04:28/ 0 赞/ 175 阅读