欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

元素分类,块级元素,内联元素,行内块元素,displaby 属性

程序员文章站 2022-06-21 23:34:05
元素分类元素可以分为3类,块级元素,内联元素(行内元素),行内块元素 。块元素常见的块级元素及块级元素的displaby 属性:元素display说明1htmlblock2bodyblockmargin:8px(默认)3hrblock换行4pblock段落5divblock6h1-6block标题7ulblock无序列表8olblock有序列表9lilist-item...

元素分类

  1. 元素可以分为3类,块级元素,内联元素(行内元素),行内块元素 。

块元素

  1. 常见的块级元素及块级元素的displaby 属性:

    元素 display 说明
    1 html block html骨架
    2 body block margin:8px(默认)
    3 hr block 换行
    4 p block 段落
    5 div block div 盒子
    6 h1-6 block 标题
    7 ul block 无序列表
    8 ol block 有序列表
    9 li list-item 列表项
    10 dl block 自定义列表
    11 dt block 自定义列表项
    12 dd block 自定义列表项
    13 table table 表格
    14 tbody table-row-group 可以不写,浏览器自动生成
    15 caption table-caption 表格标题
    16 th table-cell 表头
    17 tr table-row 表格行
    18 td table-cell 表格单元
    19 form block form 表单

    注意:table 里面的标签小毅也是不知道是哪类元素

块级元素简单的案例

<style>
    table {
        width: 500px;
        border: 1px solid red;
    }

    td {
        border: 1px solid blue;
    }
</style>

<body>
    <!-- 分割线 -->
    <hr>

    <!-- div 盒子 -->
    <div>
        这是一个div
    </div>

    <!-- 标题 -->
    <h1>常见的块级元素</h1>
    <h2>常见的块级元素</h2>
    <h3>常见的块级元素</h3>
    <h4>常见的块级元素</h4>
    <h5>常见的块级元素</h5>
    <h6>常见的块级元素</h6>

    <!-- 段落 -->
    <p>常见的块级元素</p>

    <!-- 无序列表 -->
    <ul>
        <li>常见的块级元素</li>
        <li>常见的块级元素</li>
        <li>常见的块级元素</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>水果</li>
        <li>蔬菜</li>
        <li>肉类</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>广东省</dt>
            <dd>广州</dd>
            <dd>佛山</dd>
            <dd>深圳</dd>
        <dt>广西省</dt>
            <dd>南宁市</dd>
            <dd>桂林市</dd>
            <dd>北海市</dd>
    </dl>

    <!-- 表格 -->
    <table>
        <caption>这是一个表格</caption>
        <th>name</th>
        <th>age</th>
        <th>city</th>
        <tr>
            <td>小毅</td>
            <td>20</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>小强</td>
            <td>18</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>19</td>
            <td>客村</td>
        </tr>
    </table>

    <!-- form 表单 -->
    <form action="#" method="get">
        用户名:<input type="text"><br>
        密码:<input type="password"><br>
        <input type="submit" value="登录">
    </form>
</body>

块级元素的特点:

  1. 块状元素独占一行,自上而下排列

  2. 块状元素可以作为一个容器包含其他的块状元素或内联元素

    <div class="father">
        <div class="son"></div>
    </div>
    
  3. 块状元素可以定义自己的宽度和高度,以及盒模型中的margin,padding,border

  4. 宽度缺省是它的容器的100%除非设定一个宽度,高度默认是 0px所以填入内容撑开或者设置高度,

    //在html中放两个div 
    <div  class= "a">填入内容撑开盒子</div>//宽度是100%,
    
    <div class = "b"></div>  
    
    // 在style中设置样式
    <style>
       .a{
            background-color: blue;
        }
        .b{
          background-color:brown;
          height:200px;//高度
          width: 200px;// 宽度
          margin:10px; // 外边距
          padding: 10px; // 内边距
          border:2px solid black; // 边框的大小: 2px 样式: 实线 颜色: 黑色
        }
    </style>
    

内联元素(行内元素)

  1. 常见的内联元素

    	 <font>文本标签</font>
            <strong>加粗</strong> 
            <b>加粗</b>
            <em>倾斜</em>
            <i>倾斜</i>
            <del>删除线</del>
            <s>删除线</s>
            <ins>下划线</ins>
            <u>下划线</u>
            <br/>   换行标签
            <sub>下标文本</sub>
            <sup>上标文本</sup>
            <span>盒子</span>
    
  2. 内联元素的display属性:都是:inline

  3. 内联元素的特点

    • 内联元素在一行逐个进行显示,不会自动换行,可以多个内联元素在同一行
    • 设置宽高无效,不能直接设置内联元素的宽度和高度
    • 内联元素设置左右填充和外间距是可以的
    • 但是内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height),显示无效或显示不准确
    • 对左右的margin 和padding 设置有效,但是对上下的margin和padding值设置无效

可变元素

  1. 常见的可以元素

    img
    input
    
  2. . 可变元素的特点

    • 不自动换行

    • 能够识别宽高

    • 排列方式为从左到右

    • 即有了内联元素的特点(不会换行),也有块级元素的特点(可以设置宽高等)

  3. 可变元素的display:inline-block

    • img ==> inline (虽然是inline,但是可以设置宽高,也可以多个img 在同一行显示)
    • input == > inline-block (可以多个input 在同一行显示,也可以设置宽高)
  4. 可变元素即具有内联元素特点,也具有块状元素特点

  5. 注意:display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素

display的几个常见的属性

描述
none 将元素的显示隐藏,在网页中也不占位置
hidden 将元素隐藏,但是位置还是站着
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示 类似
table-header-group 此元素会作为一个或多个行的分组来显示 类似
table-footer-group 此元素会作为一个或多个行的分组来显示 类似
table-row 此元素会作为一个表格行显示 类似
table-column-group 此元素会作为一个或多个列的分组来显示类似
table-column 此元素会作为一个单元格列显示 类似
table-cell 此元素会作为一个表格单元格显示 类似 td th
table-caption 此元素会作为一个表格标题显示 类似
inherit 规定应该从父元素继承 display 属性的值。

本文地址:https://blog.csdn.net/XiaoYige_97/article/details/107577278