欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML5 >

HTML5中的块元素和内联元素的区别和联系

 

块元素(block)

块元素基本特征

块元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

块元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

块元素可以设置marginpadding属性。

块元素支持所有的 CSS 样式

块元素基本可以划分以下几类:

1.div无意义,主要是配合界面布局(双标签)

2.p语义:段落(双标签)

3.h1~h6定义一级标题至六级标题

假如使用 p 标签的时候,里面嵌套了 div 标签,这样会导致 p 标签里面的样式被分割掉,这点需要注意。

除此之外,块元素还包括有序列表 ol,无序列表 ul ,以及列表dldtdd

内联元素(inline)

内联元素基本特征

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行

内容撑开宽度

inline元素设置width,height属性无效。

inline元素不支持上下的marginpadding,只支持左右的marginpadding

代码换行被解析

内联元素中,有一个我们最常见的标签,那就是超链接 a 标签。它能从一个页面中跳转到另外一个界面,同时也可以在同一个页面之中设置空间‘锚点’,实现特定位置的跳转

注意:a 标签中一定不能嵌套 a 标签

a标签的锚点设置方法:

可以通过设置 href = # + 锚点名称” 的方式进行跳转,注意,一定要加 #

例如:

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title></head><body>

<span id=top></span>

<p>asdnajsd</p>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<a href=#top>回到顶部</a></body></html>

标签的初始化

下划线的样式初始化/*下划线的样式初始化*/a { text-decoration: none;

}/*字体样式初始化*/em { font-style:normal;

}

内联块元素

内联块元素基本特性

1.支持所有css的样式

2.除块属性的标签以外,同属性以及行属性标签排在一排

3.代码换行被解析

内联块元素同时具有了块元素可以设置宽度和高度的特点,同时又可以像内联元素一样,可以和其他行属性标签处于同一行。

虽然内联块元素能同时拥有块元素和内联元素的特性,但很多时候,在页面中还是要使用不同标签对应的特性。其次就是,内联块也并不是完美无缺的。因为设置内联块的时候,它的换行会被解析。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h37250.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-08-11 11:57 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。