美文网首页
CSS中的块级、行内以及行内块元素

CSS中的块级、行内以及行内块元素

作者: GoFzy | 来源:发表于2019-03-07 18:00 被阅读0次

    1.各级元素特性

    1.1 块级元素(block):大多为结构性标记

    ①每个元素独占一行或者多行

    ②可以手动设置高宽属性值

    ③宽度默认为网页(父级元素)的100%

    ④可以容纳行内元素与其他块级元素(p、h标签除外,因为它们是由文字组成)

    1.2 行内元素(inline-level):大多为描述性标记

    ①与相邻元素在同一行上

    ②高宽无法设置,但可以设置水平方向的padding和margin值

    ③宽度由其本身确定

    ④行内元素只能容纳行内元素(a标签除外,链接内部不能再放链接,tips:a标签可以块级元素)

    1.2 行内块元素(inline-block):  综合行内和块状元素的特性

    ①与相邻元素在同一行内,但之间存在间隙,间隙大小为字体大小

    ②默认宽度为其本身宽度

    ③高度、宽度、内外边距均可设置

    2.各级常用的元素


    2.1 块级元素:

      <h1>...</h1>  标题一级   至  <h6>...</h6>  标题六级

      <hr>  水平分割线

      <p>...</p>  段落

      <ul>...</ul>  无序列表

      <ol>...</ol>  有序列表

      <dl>...</dl>  自定义列表

      <table>...</table>  表格

      <form>...</form>  表单

      <div>...</div>

    2.2 行内元素:

      <span>...</span>

      <a>...</a>  链接

      <br>  换行

      <b>...</b>  加粗

      <strong>...</strong>  加粗

      <i>...</i>  斜体

      <em>...</em>  斜体

      <del>...</del>  删除线

      <u>...</u>  下划线

    2.3 行内块元素:

      <input>...</input>  文本框

      <img >  图片

      此外浮动、绝对定位和固定定位,可以将块元素转化为行内块元素

    相关文章

      网友评论

          本文标题:CSS中的块级、行内以及行内块元素

          本文链接:https://www.haomeiwen.com/subject/lxdhpqtx.html