位置特性分类元素分为三类:块级元素,行内元素,行级块元素

1.块级元素(block)

       特点: (1)可以设置宽高、内、外边距;
                (2)独占一行(即前后均有换行);
                (3)块级元素如果不设置宽度和高度,则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
      常见的块级元素: div、p、h1、h2......hn,ol、ul、dl、li、form、table
         
2.行级元素(inline)
      特点: (1)不可设置宽高、上下内、外边距。(左右内、外边距设置有效)
                  (2)其宽度和高度由其内容自动填充。
                  (3)其他行级元素共处一行 
     常见的行级元素:a、span、i、lable等
 
 3.行内块元素(inline-block)
      特点:(1)可以设置宽高、内外边距;
                 (2)可以与其他行内元素、内联元素共处一行;
     常见的内联元素:input、img
 
=================元素之间的转化========================
display:block;(将元素变为块级元素)
display:inline;  (将元素变为行级元素)
display:inline-block;(将元素变为行级块元素)
 
 
(可以在行内样式或css样式中改变元素的display将三种元素进行转换)

HTML元素类别及转换的更多相关文章

  1. 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取

    获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML  var $shadow = new Object(); /** 获取 ...

  2. Revit API过滤元素类别(FamilySymbol与FamilyInstance)

    仅OfCategory()过滤的元素包含系统FamilySymbolOfClass(typeof(FamilyInstance))过滤出来文档中族实例. ;         ;         ;   ...

  3. 浅析HTML的元素类型及其转换

    大家都知道html是由标签元素组成的,在了解元素的类型转换之前,让我们先来了解一下html的元素类型. 一.html元素类型分为两种:块级元素和内联元素,内联元素又被称为行内元素.  常见的块级元素有 ...

  4. html5--4-4 audio元素/格式的转换

    html5--4-4 audio元素/格式的转换 学习要点 掌握audio元素的用法 视频/音频文件的格式转换 当前,audio 元素支持三种音频格式: Ogg 免费, 支持的浏览器:Firefox. ...

  5. CSS的元素显示模式与转换

    CSS的元素显示模式与转换 1. CSS的元素显示模式 1.1 块元素 <div>标签是最典型的块元素.另外常见的块元素有h1~h6.p.ul.ol.li等. 特点: 独占一行 高度.宽度 ...

  6. 一、python基本语法元素(温度转换)

    #C=(F-32)/1.8 ; F = C * 1.8 + 32 TempStr = input("请输入带有符号的温度值:") if TempStr[-1] in ['f','F ...

  7. html行级元素和块级元素以及css转换

    之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...

  8. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  9. [Web 前端] 016 css 元素的转换

    三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...

随机推荐

  1. vue-amap 实例获取与自动缩放

    this.$refs.map.$amap.setFitView(markers) 获取实例,$amap 为 el-map 的 vid,没错,vid 获取方式就是这样 markers 为 Amap.Ma ...

  2. 【Java并发.4】对象的组合

    到目前为止,我们已经介绍了关于线程安全与同步的一些基础知识.然而,我们并不希望对每一系内存访问都进行分析以确保程序是线程安全的,而是希望将一些现有的线程安全组件组合为更大规模的组件或程序. 4.1 设 ...

  3. Python3 与 C# 基础语法对比(就当Python和C#基础的普及吧)

      文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 多图旧排版:https://www.cnblogs.com/dunitian/p/9 ...

  4. React中嵌套组件与被嵌套组件的通信

    前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...

  5. 使用insert ignore来避免向数据库重复插入数据

    mysql中 insert ignore 的使用示例如下: INSERT IGNORE INTO `table_name` (`reportid`, `content`) VALUES (‘11111 ...

  6. Python-time模块-58

    time 模块: Eva_J import time time.sleep(100) #时间睡眠 print(time.time()) #返回一个以秒为单位的时间 时间模块 和时间有关系的我们就要用到 ...

  7. Python_%---format_43

    fat39 博客园 首页 新随笔 联系 订阅 管理 随笔 - 142  文章 - 0  评论 - 0 python基础_格式化输出(%用法和format用法)   目录 %用法 format用法 %用 ...

  8. p211有界自共轭算子T是实数集合的子集

    对条件 取非   是 ∉谱集合的实数 才对  现在是  入  属于正则点集 他  然后  又说T 的谱是实数 这不矛盾吗 这里根据   必要性    推出 蓝色和红色矛盾    矛盾就是 这是谱点 然 ...

  9. 记第一次多用户在Git提交代码

    今天第一次进行了多用户(其实就两人)在自建Git服务器提交代码. 先记录碰到的问题:首先是本地提交代码时,进行了add,commit后,在push时碰到服务器故障,待设置好服务器后,再push时,却p ...

  10. MYSQL 创建数据库SQL

    CREATE DATABASE crm CHARACTER SET utf8 COLLATE utf8_general_ci; MySQL :: MySQL 5.7 Reference Manual ...