如何进行中块级元素和行内元素的特征与转换

发布时间：2021-11-26 10:44:27 作者：柒染
来源：亿速云阅读：153

今天就跟大家聊聊有关如何进行中块级元素和行内元素的特征与转换，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

块级元素和行内元素

1.元素的定义

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子，块级元素的特征总结如下：

默认独占一行
没有宽度时，默认撑满一排
支持所有css命令

与之相反，像“span”、“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的，行内元素的特征总结如下：

同排可以继续跟同类的标签
内容撑开宽度
不支持宽高
不支持上下的margin和padding
代码换行被解析

1.元素的转换

display:block -----> 显示为块:使内联元素具备块属性标签的特性

display:inline -----> 显示为内嵌:使行块属性标签具备内联元素的特性

display:inline-block -----> 显示为行内块状元素

行内块状元素的特征：

块在一行显示；
行内属性标签支持宽高；
没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

3.常见的行内元素

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

4.常见的块状元素

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

补充乐园如何进行中块级元素和行内元素的特征与转换：

1、vertical-align（垂直对齐）

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    .top {vertical-align:text-top}
    .bottom {vertical-align:text-bottom}
</style>
</head>
    <body>
        <p>这是一幅<img class="top" border="0" src="#" />位于段落中的图像。</p> 
        <p>这是一幅<img class="bottom" border="0" src="#" />位于段落中的图像。</p>
    </body>
</html>

运行结果：
如何进行中块级元素和行内元素的特征与转换

PS：<img>标签中，属性src没有图片的URL，请自行添加图片地址测试。

2、css reset（重设）

CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

例1：

 *{padding:0;margin:0;}

这是最普遍最简单的CSS重设，将所有元素的padding核margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的“分歧”。

例2：

 *{padding:0;margin:0;border:0;}

这是在上一个重设的基础上添加了对border属性的重设，初始值为0.

例3：

 *{padding:0;margin:0;border:0;outline:0;}

在前两个的基础上，添加了outline属性的重设，防止一些冲突。

例4：

 *{ vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

浓缩实用型的css reset重设，该方法出自Perishable Press。

看完上述内容，你们对如何进行中块级元素和行内元素的特征与转换有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。

如何进行中块级元素和行内元素的特征与转换

相关阅读