博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html中内联元素和块元素的区别、用法以及联系
阅读量:6940 次
发布时间:2019-06-27

本文共 2111 字,大约阅读时间需要 7 分钟。

昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下:  

他在页面中显示的间距太挤,于是我想要用css来控制一下超链接的外边距,和内边距。下面是我css的代码:

#div_menu a{            text-decoration :none;            margin-top:10px;            padding:5px;        }        #div_menu a:hover{            color:Red;        }

我明显是用css控制了,但是我调试后在页面上根本没有出现效果,以前是什么样的,现在依然是什么样。然后在网上查了一些资料,原来a标签是内联元素,高,行高,以及内边距都是不可改变的。他们是根据元素中的内容而确定元素的大小的。于是在上述的代码中的

#div_menu a 中加上一条css控制语句 display:block;将该元素变为块元素即可。 修改后的css代码如下:
#div_menu a{            display:block;            text-decoration :none;            margin-top:10px;            padding:5px;        }        #div_menu a:hover{            color:Red;        }

 这样就是实现a超链接的边距样式的控制。

以下总结了html中快元素和内联元素之间的用法、区别以及联系

  内联元素和块级元素都是html中的范畴,块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素,(display:block) 也可以将块元素改变为内联元素(display:in-line)。

   内联元素的特点

   1.和其他的元素显示在一行上;

    2.内边距和外边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度

    3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了。

   块元素的特点:

   1.总是在新的一行上显示;

   2.高度、行高、宽度、内边距、外边距等都是可控制的;

   3.他的高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上;

 

  常用的内联(行内)元素

  

* 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 - 定义变量

常用的块元素

 

* 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 - 非排序列表

 

 

转载于:https://www.cnblogs.com/mingjiatang/p/3717711.html

你可能感兴趣的文章
2.配置IP与网络问题排查
查看>>
机器学习:从入门到晋级
查看>>
JPA的工具类
查看>>
Java 多线程编程核心技术 笔记
查看>>
ComponentOne 2019V1更新亮点之ASP.NET MVC篇
查看>>
Java程序员应该掌握哪些东西?
查看>>
阿里千万级高性能、高并发架构的经验之谈
查看>>
学java就两个问题
查看>>
CentOS7离线安装gcc
查看>>
vue router+vuex实现首页登录验证判断逻辑
查看>>
现代企业能源管理系统开发主要运用到的信息技术?
查看>>
python开发环境 visual python
查看>>
Scala 单例对象
查看>>
cannot flashback the table because row movement
查看>>
拖放在XMind中有何应用
查看>>
OSChina 周一乱弹 ——这个公主都没一旁的汪可爱
查看>>
OSChina 周四乱弹 ——程序员座驾千万,出门千人陪同
查看>>
使用video标签或者videoJS 做 mp4点播 编码不对播放失败。
查看>>
SSH公钥生成及配置
查看>>
iOS 新浪微博快速集成
查看>>