行内元素和块级元素

49次阅读

共计 888 个字符,预计需要花费 3 分钟才能阅读完成。

行内元素和块级元素
讲讲行内元素和块级元素在 HTML 中标签元素大都是“块级”元素或行内元素。
块级元素
HTML
<div class=”wrap”>
<div class=”fluid”>
我是 div

</div>
</div>

CSS
.wrap{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;

}
.fluid{
width: auto;
height: auto;
padding: 10px;
background-color: #ef4321;
position: absolute;
left: 10px;
right: 10px;

}

块级元素的特征

块级元素内嵌块级元素和行内元素
默认情况下,块级元素会新起一行
默认情况下,块级元素占满父级元素的 width
块级元素的 width、height、padding、margin、line-height 正常设置(可以达到想要的结果)

行内元素特征

行内元素只能包含数据和其它行内元素
默认情况下,行内元素不会以新行开始
默认情况下行内元素 width 默认为元素内容的宽度
不能设置 width、height、padding-top、padding-bottom、margin-top、margin-bttom、line-height(就算设置了也达不到想要的效果)

行内元素
列举几个常见的行内元素

b,i,small,tt
abbr,code,em,
a,br,img,q,span,sub,sup
button,input,label,select,textarea

参阅:行内元素
块级元素
列举几个常见的块级元素

<div> 文档分区
<form> 表单
<address> 联系方式信息
<article> 文章内容
<audio> 音频播放
<aside> 伴随内容
<canvas> 绘制图形
<dl> 定义列表
<footer> 区段尾或页尾
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 标题级别 1-6
<header> 区段头或页头
<ol> 有序列表
<p> 行
<section> 一个页面区段
表格 <ul> 无序列表
<video> 视频
参阅:块级元素

正文完
 0