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

标签：style   blog   class   code   java   tar   

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

 <ul id="BulletedList1" style="width: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代码如下：

　这样就是实现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 - 非排序列表

html中内联元素和块元素的区别、用法以及联系,布布扣,bubuko.com

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

标签：style   blog   class   code   java   tar   

原文地址：http://www.cnblogs.com/mingjiatang/p/3717711.html