讲讲行内元素和块级元素

块级元素

HTML

    
        
     
                  我是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> 视频

参阅：