zoukankan      html  css  js  c++  java
  • 块级元素、行内元素、display属性

    块级元素

    特点:

    • 总是以一个块的形式表现出来,占领一整行。若干同级块元素会从上之下依次排列(使用float属性除外)。
    • 可以设置高度、宽度、各个方向的margin以及各个方向的padding。
    • 当宽度(width)缺省时,它的宽度时其容器的100%,除非我们给它设定了固定的宽度。
    • 块级元素中可以容纳其他块级元素或行内元素。
    • 块级元素的display属性值默认为block。

    常见的块级元素

    <address> 定义地址
    <caption> 定义表格标题
    <dd> 定义列表中定义条目
    <div> 定义文档中的分区或节
    <dl> 定义列表
    <dt> 定义列表中的项目
    <fieldset> 定义一个框架集
    <form> 创建 HTML 表单
    <h1> 定义最大的标题
    <h2> 定义副标题
    <h3> 定义标题
    <h4> 定义标题
    <h5> 定义标题
    <h6> 定义最小的标题
    <hr> 创建一条水平线
    <legend> 元素为 fieldset 元素定义标题
    <li> 标签定义列表项目
    <noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    <noscript> 定义在脚本未被执行时的替代内容
    <ol> 定义有序列表
    <ul> 定义无序列表
    <p> 标签定义段落
    <pre> 定义预格式化的文本
    <table> 标签定义 HTML 表格
    <tbody> 标签表格主体(正文)
    <td> 表格中的标准单元格
    <tfoot> 定义表格的页脚(脚注或表注)
    <th> 定义表头单元格
    <thead> 标签定义表格的表头
    <tr> 定义表格中的行

    行内元素

    特点:

    • 它不会单独占据一整行,而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右(即某个行内元素可以和其他行内元素共处一行),从上到下依次排列。
    • 行内元素不可以设置高度、宽度,其高度一般由其字体的大小来决定,其宽度由内容的长度控制。
    • 行内元素只能设置左右的margin值和左右的padding值,而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
    • 行内元素一般不可以包含块级元素。
    • 块级元素的display属性值默认为inline。

    常见的行内元素

    <a> 标签可定义锚
    <abbr> 表示一个缩写形式
    <acronym> 定义只取首字母缩写
    <b> 字体加粗
    <bdo> 可覆盖默认的文本方向
    <big> 大号字体加粗
    <br> 换行
    <cite> 引用进行定义
    <code> 定义计算机代码文本
    <dfn> 定义一个定义项目
    <em> 定义为强调的内容
    <i> 斜体文本效果
    <img> 向网页中嵌入一幅图像
    <input> 输入框
    <kbd> 定义键盘文本
    <label> 标签为 input 元素定义标注(标记)
    <q> 定义短的引用
    <samp> 定义样本文本
    <select> 创建单选或多选菜单
    <small> 呈现小号字体效果
    <span> 组合文档中的行内元素
    <strong> 语气更强的强调的内容
    <sub> 定义下标文本
    <sup> 定义上标文本
    <textarea> 多行的文本输入控件
    <tt> 打字机或者等宽的文本效果
    <var> 定义变量

    display

    描述
    none 此元素不会被显示。
    block 此元素将显示为块级元素,此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 行内块元素。(CSS2.1 新增的值)
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row 此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column 此元素会作为一个单元格列显示(类似 <col>)
    table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption 此元素会作为一个表格标题显示(类似 <caption>)
    inherit 规定应该从父元素继承 display 属性的值。
    • display=block:让行内元素表现的像块级元素一样,元素占据整行空间,可以定义元素的尺寸.
    • display=inline:一般是不会定义元素的尺寸的,它是行内流动性的布局,其尺寸由Font-size决定。
    • display=inline-block:让元素像行内元素一样水平的依次排列,但是框的内容仍然符合块级框的行为,即能显式的设置宽度、高度、垂直外边距、内边距,既有行内流动又有尺寸。
  • 相关阅读:
    别再重复造轮子了,利用list创建任意数据类型的链表
    可配置内存池实现
    简单内存池实现
    基于本博客版本中的循环缓冲的测试(Linux环境)
    循环缓冲实现(ring buffer/circular buffer)
    recvfrom超时设置
    Linux系统如何做性能测试?
    深入理解虚拟内存机制
    Linux 内核的测试和调试
    python学习之路 实现简单的计算机功能。
  • 原文地址:https://www.cnblogs.com/lmjZone/p/8717282.html
Copyright © 2011-2022 走看看