html中内联元素和块元素的区别、用法以及联系

昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下:  
 <ul id="BulletedList1" style="300px;">
    <li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;0&#39;)">课程更新</a></li><li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;1&#39;)">专题讲座</a></li><li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;2&#39;)">资料下载</a></li>

他在页面中显示的间距太挤,于是我想要用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