• 从零开始学习前端开发 — 5、元素类型


    一、元素类型分类

    html元素可分为三大类:块元素,内联元素,可变元素

    1.块元素

    常见块元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset,h1,h2,h3,h4,h5,h6

    • 块状元素特点:

    a)块状元素会以块的形式显示为一个矩形区域

    b)块状元素默认独占一行,自上而下排列

    c)块状元素可以定义自己的宽度和高度,以及盒模型中的任意padding,margin,border值

    d) 块状元素可以作为一个容器来包含其他的块状元素和内联元素

    注:默认有margin,padding的块状元素

    body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd,td,fieldset

    2.内联元素(行内元素)

    常见内联元素:a,span,i,em,strong,b,label,img,input

    • 内联元素特点:

    a) 内联元素默认在一行逐个进行显示

    b)内联元素不能定义宽度和高度,它的宽高由内容决定,也以一个矩形区域显示

    c) 内联元素设置与高度相关的值没有效果或显示不准确(如margin-top,margin-bottom,padding-top,padding-bottom,border,line-height等)

    d) 内联元素可以设置与宽度相关的属性(margin-left,margin-right,padding-left,padding-right)

    内联块状元素:

    内敛块状元素:img,input,select,textarea

    • 内联块状元素特点:

    a)即具有内联元素特点在一行显示,又具有块状元素特点,可以定义宽和高

    b)可以给内联块状设置任何margin,padding,border

    3.可变元素

    根据上下文关系决定元素类型(可变的范围是块元素和内联元素)


     

    二、元素类型转换

    语法: display:block | inline | inline-block | list-item|none;

    1.block:将元素类型转换为块状元素,是大部分块状元素的默认display属性值

    2.inline:将元素类型转换为内联元素,是内联元素的默认display属性值

    3.inline-block:将元素类型转换为内联块状元素,是内联块状元素的默认display属性值(如img,input)

    注: 当元素设置了inline-block后,换行符,空格都会占据一定的空间(宽度)

    只有inline-block类型的元素支持vertical-align属性

    4.none:将元素隐藏不显示

    注:如果想让元素再次显示,设置元素的默认display属性值即可

    5.list-item:将元素类型转换为列表,是li的默认display属性值

    注:当给元素设置了float属性后,就相当于元素设置了display:block;


     

    三、置换元素和非置换元素

    1.置换元素

    浏览器根据元素的标签和属性,来决定元素的具体显示内容。

    如:img的src属性决定了图片在网页中的显示效果

    input的type属性决定了在浏览器中呈现一个什么样类型的input控件

    2.非置换元素

    html的大多数元素是不可替换的非置换元素,即其内容直接表现在浏览器

    Get busy living or get busy dying
  • 相关阅读:
    tomcat-jvm参数优化
    k8s集群命令用法
    Zabbix-配置QQ邮箱报警通知
    zabbix监控实现原理
    adb无线调试安卓
    tiddlywiki安装和入门
    python处理excel和word脚本笔记
    路由和交换机调试笔记
    linux常用命令
    进程和线程的代码实现
  • 原文地址:https://www.cnblogs.com/witkeydu/p/8179132.html
Copyright © 2020-2023  润新知