zoukankan      html  css  js  c++  java
  • 块级元素和行内元素的区别

    HTML元素以及HTML元素的分类

    html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念

    块级元素

    含义:块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建

    • 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
    • 可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)
    • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
    • 在不设置高度的情况下,块级元素的高度是它本身内容的高度
    • 可以嵌套其他元素
    • ul li、ol li 、dl dt dd 成组出现,p标签不能嵌套它自己本身
    标签 作用
    div 常用块级容器,也是css layout的主要标签
    h1 大标题
    h2 副标题
    h3 三级标题
    h4 四级标题
    h5 五级标题
    h6 六级标题
    hr 水平分隔线
    menu 菜单列表
    ol 有序列表
    ul 无序列表
    li 列表项
    dl 定义列表
    dt 定义标题
    dd 定义描述
    table 表格
    p 段落
    form 交互表单

    行内元素

    行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的搭建.

    • 和其他内联元素从左到右在一行显示,从左到右,达到父级元素的最大宽度时,会自动折行
    • 不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
    • 内联元素的宽高是由本身内容的大小决定(文字、图片等)
    • 内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
    • 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
    标签 作用
    span 常用内联容器,定义文本内区块
    a 锚点
    b 加粗
    strong 加粗强调
    i 斜体
    em 斜体强调
    s 中划线(不推荐使用)
    strike 中划线
    del 文档中已被删除的文本
    br 强制换行
    u 下划线
    textarea 多行文本输入框
    input 输入框
    select 下拉列表
    label input 元素定义标注(标记)
    img 插入图片
    sub 下标
    sup 上标
    big 大字体文本
    small 小字体文本

    行内块级元素

    • 在一行排布,从左到右,达到父级元素的最大宽度时,会自动折行
    • 设置盒子模的CSS属性
    • 默认不设置宽度和高度的时候,宽高都是由本身内容决定的
    • 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
    标签 作用
    textarea 文本域
    input 输入框
    img 图片

  • 相关阅读:
    Java Scanner
    Java 继承
    什么叫异常?什么叫错误? 如何捕获异常? 如何抛出异常? 说说finally和final的区别! 什么是JDK?什么是JRE?说说它们之间的区别? 说说字符常量和字符串常量的区别
    数据分析三剑客之Pandas时间序列
    Css样式布局之Flex弹性盒子布局
    memcached的安装和使用
    Flask 第十八话之Restful API
    Flask 第十七话之信号
    Flask 第十六话之钩子函数
    Flask 第十五话之请求上下文及全局全局存储g对象
  • 原文地址:https://www.cnblogs.com/zhangyongxi/p/9535331.html
Copyright © 2011-2022 走看看