HTML行内元素块级元素和行内块状元素

  HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
         1.行内元素(inline element):主要用来包裹文字,设置特殊意义或效果。
         2.块级元素(block element):主要对页面进行布局                 
              ①一般情况下在块级元素中放行内元素,而不会在行内元素中放块级元素
              ②块级元素基本上什么都能放(包括块级元素)        
              ③p元素不能放任何块级元素(如出现不符规则浏览器自动纠正,右键-检查元素-element)
         3.行内块级元素(inline-block element):同时具备行内元素、块状元素的特点。但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

行内元素
常见的行内元素:

a – 锚点
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
label – 表格标签
span – 常用内联容器,定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框

块状元素
常用的块级元素:

address – 地址
blockquote – 块引用
center – 举中对齐块(不赞成使用,推荐css)
dir – 目录列表(不赞成使用,推荐css)
div – 常用块级容器,也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

行内块级元素
常用的行内块级元素:<img> <input>

    行内元素特点:display:inline;
         1、和其他元素都在一行上;
         2、元素的高度、宽度及顶部和底部边距不可设置;
         3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
    块级元素特点:display:block;
         1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行
         2、元素的高度、宽度、行高以及顶和底边距都可设置。
         3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
    行内块级元素的特点:display:inline-block;
         1、和其他元素都在一行上;
         2、元素的高度、宽度、行高以及顶和底边距都可设置

    备注:
    通过display属性对块级元素、行内元素、行内块元素可进行转换

猜你喜欢

转载自blog.csdn.net/no15870678621/article/details/107875434