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

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

2024-08-17 07:37:30   215人阅读

块级元素和行内元素

 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 - 交互表单
* 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="http://www.mamicode.com/#" />位于段落中的图像。</p> 
        <p>这是一幅<img class="bottom" border="0" src="http://www.mamicode.com/#" />位于段落中的图像。</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。


本文出自 “小倩加油站” 博客，请务必保留此出处http://cherry360.blog.51cto.com/12176744/1863945

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


联系
我们