HTML标签的类型分为三种:行内元素,行内块元素,块级元素

而标签的属性是可以转换的

  display:inline: 转换为行内元素

  display:linline-block 转换为行内块元素

  display:block 转换为块级元素

特性:

  行内元素:

  1.无法设置宽高

  2. margin上下无效,只有左右有效果,padding都有效果,会撑大空间;

    box-sizing:border-box;无效,因为该属性针对盒模型

  3.不会自动换行

  行内块元素:

  1. 不会自动换行

  2.能够设置宽高

  3.默认排列方式为从左到右

  4.可以使用text-align:center使内容相对于父盒子水平居中对齐,例如img标签,可以使用text-align:center,相对父盒子居中对齐.,margin:0 auto无效

  5.水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格.

  块级元素:

  1.能够识别宽高

  2.margin和padding的上下左右均对其有效

  3.可以自动换行

  4.多个块状元素标签写在一起,默认排列方式为从上至下

  5.可以使用margin:0 auto居中对齐

HTML标签的三种类型的更多相关文章

  1. 链路层三种类型的MAC地址

    若需要转载,请注明出处. 我们知道,链路层都是以MAC地址来进行通信双方的地址标识的,如下图:在应用中根据接收方的多寡来进行划分,可分为以下三种: 单播(Unicast) 多播(Multicast) ...

  2. php删除html标签的三种解决方法

    分享下PHP删除HTMl标签的三种方法. 方法1:直接取出想要取出的标记 <?php //取出br标记 function strip($str) { $str=str_replace(" ...

  3. javascript生成新标签的三种方法

    javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html

  4. matlab for循环的三种类型

    学习了一半了,发现一个好网站,就是我想写这篇博客用的,网络真是个好东西!纪念下国庆啦 网址:http://www.yiibai.com/matlab/matlab_for_loop.html ---- ...

  5. C# enum、int、string三种类型互相转换

    enum.int.string三种类型之间的互转 #代码: public enum Sex { Man=, Woman= } public static void enumConvert() { in ...

  6. 缓慢变化维 (Slowly Changing Dimension) 常见的三种类型及原型设计(转)

    开篇介绍 在从 OLTP 业务数据库向 DW 数据仓库抽取数据的过程中,特别是第一次导入之后的每一次增量抽取往往会遇到这样的问题:业务数据库中的一些数据发生了更改,到底要不要将这些变化也反映到数据仓库 ...

  7. ASP.NET 设计模式分为三种类型

    设计模式分为三种类型,共23类.  一.创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式.      二.结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代 ...

  8. 云计算服务的三种类型(SaaS、PaaS、IaaS)

    云计算可以帮助企业降低IT方面的成本和复杂性,并获得他们蓬勃发展所需的灵活性与敏捷性.但是,规划出通往云的明确路径并非易事.毕竟用户需要看透与云相关的市场大肆宣传,然后理解并分析不同种类的云计算模式的 ...

  9. OOM三种类型

    OOM的三种类型: 堆OOM /** * -Xmx1g -XX:+PrintGCDetails -XX:MaxDirectMemorySize=100m * * @param args */ publ ...

随机推荐

  1. legend2---开发日志14(游戏对用户友好的设计思路)

    legend2---开发日志14(游戏对用户友好的设计思路) 一.总结 一句话总结: 不强制,但是激励:比如宗门灵力等级从强制提升到提升宗门和用户的修炼速度 1.丹药有必要做成随机数值么? 没有 1. ...

  2. 分享知识-快乐自己:全面解析 java注解实战指南

    请你在看这篇文章时,不要感到枯燥,从头到尾一行行看,代码一行行读,你一定会有所收获的. 问: 为什么学习注解? 学习注解有什么好处? 学完能做什么? 答: 1):能够读懂别人的代码,特别是框架相关的代 ...

  3. exec 和 spawn 的区别

    参考资料: difference-between-spawn-and-exec-of-node-js-child_process process_child 最近在用nodejs 的child_pro ...

  4. .DS_Store 文件是什么?Mac下面如何禁止.DS_Store生成

    .DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini. 1,禁止.DS_store生成:打开 “终端” ,复制黏贴下 ...

  5. python 之深浅拷贝

    浅拷贝: 深拷贝:

  6. kettle每天自动发送邮件总结_20161128

    kettle作为java开发的工具,很多功能在目前工作中还用不到,原来它也是支持java代码的,现在用到的也就是它从服务器导数到数据库,然后再进行数据处理的功能. 如何快速学会使用kettle发送邮件 ...

  7. poj1475 Pushing Boxes[双重BFS(毒瘤搜索题)]

    地址. 很重要的搜索题.★★★ 吐槽:算是写过的一道码量比较大的搜索题了,细节多,还比较毒瘤.虽然是一遍AC的,其实我提前偷了大数据,但是思路还是想了好长时间,照理说想了半小时出不来,我就会翻题解,但 ...

  8. 【Matlab】调试基础

    1.matlab 调试子程序 在主程序进入子程序前一句加断点,然后step in,可以进入子程序. 但是直接在子程序里设置断点,运行主程序是不能进入子程序的.

  9. .NETFramework-Timers:Timer

    ylbtech-.NETFramework-Timers:Timer 1.程序集 System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b7 ...

  10. React库protypes属性

    Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性.当向 ...