• 块级元素和行内元素总结


    块级元素(block element):

      * address - 地址
      * blockquote - 块引用
      * center - <center> 对其所包括的文本进行水平居中。在 HTML 4.01 中,<center> 元素 已废弃。HTML5 不支持 <center> 标签。请用 CSS 代替。

      * dir - 目录列表

      * div - 常用块级容易,也是css layout的主要标签

      * dl - 定义列表
      * fieldset - form控制组
      * form - 交互表单
      * h1 - 大标题
      * h2 - 副标题
      * h3 - 3级标题
      * h4 - 4级标题
      * h5 - 5级标题
      * h6 - 6级标题
      * hr - 水平分隔线
      * isindex - input prompt
      * menu - 菜单列表
      * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
      * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
      * ol - 排序表单
      * p - 段落
      * pre - 格式化文本
      * table - 表格
      * ul - 非排序列表

    块状元素特点:

    1、独占一行,在默认情况下,宽度自动填满父元素宽度

    2、宽度和高度可以控制

    3、margin和padding横向纵向设置都有效

    4、可以通过display: inline; 转换为行内元素

    5、除个别特殊元素外,可包含块状元素和行内元素;

    行内元素(inline element):

      * a - 锚点
      * abbr - 缩写
      * acronym - 首字
      * b - 粗体(不推荐)
      * bdo - bidi override
      * big - 大字体
      * br - 换行
      * cite - 引用
      * code - 计算机代码(在引用源码的时候需要)
      * dfn - 定义字段
      * em - 强调
      * font - 字体设定(不推荐)
      * i - 斜体
      * img - 图片
      * input - 输入框
      * kbd - 定义键盘文本
      * label - 表格标签
      * q - 短引用
      * s - 中划线(不推荐)
      * samp - 定义范例计算机代码
      * select - 项目选择
      * small - 小字体文本
      * span - 常用内联容器,定义文本内区块
      * strike - 中划线
      * strong - 粗体强调
      * sub - 下标
      * sup - 上标
      * textarea - 多行文本输入框
      * tt - 电传文本
      * u - 下划线
      * var - 定义变量

    行内元素特点:

    1、不能独占一行

    2、宽高由内容撑开

    3、margin和padding横向设置有效,纵向设置不产生边距效果

    4、可以通过display: block; 转换为块状元素

    5、除ins和del外,不能包含块状元素

     空元素:<br/>;

     CSS:css能够改变html的默认布局模式,把块级元素摆放到你想要的位置上去。

        块级元素和行内元素的基本差异是块元素一般从新行开始,而当加入了css控制之后,这种属性差异就不成为差异了。

        给行内元素加上 display:block  这样的属性,让行内元素也有每次都从新行开始的属性。

        给块级元素加上 display:inline  这样的属性,让块级元素不具有从新行开始的属性。

  • 相关阅读:
    RabbitMq环境搭建
    Springboot集成quartz
    java8时间工具类
    AngularJS学习笔记之directive——scope选项与绑定策略
    理解$watch ,$apply 和 $digest --- 理解数据绑定过程
    AngularJS中service,factory,provider的区别
    AngularJS的Filter用法详解
    Angular.js中使用$watch监听模型变化
    history
    data-*
  • 原文地址:https://www.cnblogs.com/kttbk/p/8522316.html
Copyright © 2020-2023  润新知