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

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编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  2. Quartz.NET 任务调度教程。

    https://www.cnblogs.com/yaopengfei/p/9216229.html

  3. Java 小记 - 时间的处理与探究

    前言 时间的处理与日期的格式转换几乎是所有应用的基础职能之一,几乎所有的语言都会为其提供基础类库.作为曾经 .NET 的重度使用者,赖其优雅的语法,特别是可扩展方法这个神级特性的存在,我几乎没有特意关 ...

  4. 剑指offer 第十一天

    46.扑克牌顺子 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的 ...

  5. Rimworld单人生存记

    开局什么也没有,第一天按原来的墙造了个卧室差不多就完了,可见工作效率之低.花了三四天才种好水稻+草莓,做了短弓,挖了一些钢铁,造了燃料炉灶和屠宰台.第五天来了个人,我用短弓和他打,问题是远程最多打一下 ...

  6. hdu3790 dijkstra+堆优化

    题目来源:http://acm.hdu.edu.cn/showproblem.php?pid=3790 分析:dijkstra没有优化的话,复杂度是n*n,优化后的复杂度是m*logm,n是顶点数,m ...

  7. 通过设置线程池的最小线程数来提高task的效率,SetMinThreads。

    http://www.cnblogs.com/Charltsing/p/taskpoolthread.html task默认对线程的调度是逐步增加的,连续多次运行并发线程,会提高占用的线程数,而等若干 ...

  8. Maven指定编译级别

    maven默认的编译水平是1.5 单个项目单独设置 如果需要在某个项目中指定编译级别,可以在项目的pom.xml文件中配置,如下: <build> <plugins> < ...

  9. 使用postman发送post数据时遇到的问题

    平时工作最多的内容就是写接口,免不了测试自己写的接口是否正确,postman就是一个不错的选择 使用postman最好了解一些http协议的知识,不然就会闹笑话,比如,下面这个图片中的做法,尝试发送p ...

  10. 迁移 VMware 虚拟机到 KVM

    虚拟机转换| VMware vCenter Converterhttps://www.vmware.com/cn/products/converter.html 迁移 VMware 虚拟机到 KVMh ...