行内元素和块级元素

行内元素和块级元素

大家好,又见面了,我是全栈君。

ref:https://www.cnblogs.com/greenal/archive/2013/01/05/2845513.html

2  区别:
   1)块级元素会独占一行,其宽度自动填满其父元素宽度
        行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容         而变化
   2) 块级元素可以设置 width, height属性,行内元素设置width,  height无效
         【注意:块级元素即使设置了宽度,仍然是独占一行的】
   3) 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
(水平方向有效,竖直方向无效)

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

   行内元素:span,   strong,   em,  
br,  img ,  input,  label,  select,  textarea,  cite,  
                   
内联元素(inline element)
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
 
 
 
内联元素(行内元素)内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
 
 

 
 
 

转载于:https://www.cnblogs.com/purple1/p/8514608.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107678.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Struts2拦截器的学习「建议收藏」

    Struts2拦截器的学习「建议收藏」一.首先我应该先要了解Struts2拦截器的执行原理Struts 2的拦截器实现相对简单。当请求到达Struts2的ServletDispatcher时,Struts 2会查找配置文件,并根据其配置实例化相对的拦截器对象,然后串成一个列表(list),最后一个一个地调用列表中的拦截器。事实上,我们之所以能够如此灵活地使用拦截器,完全归功于“动态代理”的使用。动态代理是代理对象根据客户的需求做出…

  • 分布式数据存储系统:CAP理论

    分布式数据存储系统:CAP理论分布式数据存储:CAP理论前言什么是CAP?CAP选择策略及应用保CA弃P保CP弃A保AP弃C对比分析知识扩展:CAP和ACID的“C”“A”是一样的吗?总结前言分布式系统处理的关键对象是数据,而数据其实是与用户息息相关的。CAP理论指导分布式系统的设计,以保证系统的可用性、数据一致性等特征。比如电商系统中,保证用户可查询商品数据、保证不同地区访问不同服务器查询的数据是一致的等。什么是CAP?假设某电商,在北京、杭州、上海三个城市建立了仓库,同时建立了对应的服务

  • getElementById 使用

    getElementById 使用getElementById()方法可返回对拥有指定ID的第一个对象的引用里面跟着的必须是元素ID属性值,如果class的值是不可以的一个小demo<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title>菜鸟教程(runoob.com)&l…

  • Linux -bash: redis-cli: command not found(亲测可行)

    Linux -bash: redis-cli: command not found(亲测可行)

  • node 的运行命令

    node 的运行命令node 的运行命令

  • linux添加防火墙_centos防火墙设置与端口开放的方法

    linux添加防火墙_centos防火墙设置与端口开放的方法一、介绍当设置ip过滤的时候,如果ip较多,经常修改,修改防火墙规则比较麻烦,可以使用ipset,ipset是一个集合,防火墙可以添加集合,只需要一条防火墙规则就可以实现整个集合里面ip的过滤iptables-IINPUT-mset–match-setbanipsrc-ptcp–destination-port80-jDROPTYPENAME:=method:datatype[,datatype[,datatype]]可以使用的method:bitmap,ha

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号