行内元素和块级元素

讲讲行内元素和块级元素
在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> 视频
  • 参阅:块级元素


焉识
4 声望0 粉丝