您的位置：首页 > Web前端

Web前端入门学习（4）—— 块级元素和行内元素之特征与转换

2016-10-20 16:54 134 查看

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

没有宽度时，默认撑满一排

支持所有css命令

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

内容撑开宽度

不支持宽高

不支持上下的margin和padding

代码换行被解析

[b]1.元素的转换[/b]

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

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

行内块状元素的特征：
块在一行显示；

行内属性标签支持宽高；

没有宽度的时候内容撑开宽度

问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;

[b] 3.常见的行内元素[/b]

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

[b] 4.常见的块状元素[/b]
* 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 - 非排序列表

补充乐园

：
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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网页标签元素

相关文章推荐

新的分享

章节导航