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

2019-09-10 郑州网站建设  

块元素基本特征

块元素会独占一行,多个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=http://www.divcss5.com/html5/top></span>

<p>asdnajsd</p>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<a href=http://www.divcss5.com/html5/#top>回到顶部</a></body></html>

标签的初始化

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

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

}

内联块元素

内联块元素基本特性

1.支持所有css的样式

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

3.代码换行被解析


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1644.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • 元素
  • е
  • (
  • )
  • block