块元素(block)
块元素基本特征
块元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
块元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
块元素可以设置margin和padding属性。
块元素支持所有的 CSS 样式
块元素基本可以划分以下几类:
1.div无意义,主要是配合界面布局(双标签)
2.p语义:段落(双标签)
3.h1~h6定义一级标题至六级标题
假如使用 p 标签的时候,里面嵌套了 div 标签,这样会导致 p 标签里面的样式被分割掉,这点需要注意。
除此之外,块元素还包括有序列表 ol,html' target='_blank'>无序列表 ul ,以及列表dl,dt,dd。
内联元素(inline)
内联元素基本特征
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
内容撑开宽度
inline元素设置width,height属性无效。
inline元素不支持上下的margin和padding,只支持左右的margin和padding
代码换行被解析
内联元素中,有一个我们最常见的标签,那就是超链接 a 标签。它能从一个页面中跳转到另外一个界面,同时也可以在同一个页面之中设置空间‘锚点’,实现特定位置的跳转
注意:a 标签中一定不能嵌套 a 标签
a标签的锚点设置方法:
可以通过设置 href = “# + 锚点名称” 的方式进行跳转,注意,一定要加 #
例如:
<!DOCTYPE html<html lang="en"<head
<meta charset="UTF-8"
<titleDocument</title</head<body
<span id=“top”</span
<pasdnajsd</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.代码换行被解析
内联块元素同时具有了块元素可以设置宽度和高度的特点,同时又可以像内联元素一样,可以和其他行属性标签处于同一行。
虽然内联块元素能同时拥有块元素和内联元素的特性,但很多时候,在页面中还是要使用不同标签对应的特性。其次就是,内联块也并不是完美无缺的。因为设置内联块的时候,它的换行会被解析。
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答