小程序进阶-inline、block和inline-block的区别与联系

背景介绍

每个html标签元素都有默认的元素类型,主要包括两大类:inline内联元素和block块元素。其他则称为可变元素,会根据上下文语境决定该元素为inline元素或者block元素。
在css里,有一个display的属性,它规定元素应该生的框的类型,可能的值很多,除inline、block,常用的有table-cell、inline-block等,其中inline-block是css2.1里新增的值。
line和block类似于1+1=2的基础概念。在没有网络的时代,有一种叫做剪报的东西,它是把报刊杂志等上面剪下的文字、图片资料,整理分类成册。我们可以把剪下来的纸片看作是block元素,而用笔记录的文字、图画,看成是line元素。最早做浏览器的时候加入这两个元素,可能是遵循同样的模式。
inline-block,据资料发现,在IE5.5开始支持inline-block值,也就是1999年12月(最终版为2007年7月)。css2更新发布在1998年5月,2.1的个更新草案则是在2002年8月2日发布的(css2.1版添加了display的inline-block值)。当年可能是为了更好的进行元素布局,踩在标准里给display添加inline-block值。

知识剖析

  1. 常见元素
inline元素:a,span,br,i,em,strong,label,q,var,cite,code
inline-block元素:img,input
block元素:p,div,h1...h6,ol,dl,table,address,blockquote,form
  1. 各自具有什么特点

inlin特点:

(1)和其他元素都在一行上,直到一行排列不下,才会新换一行,其宽度随元素内容而变化
(2)元素的高度、宽度及顶部和底部边距不可设置
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变

block特点:

(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。
(2)元素的高度、宽度、行高以及和底边距都可设置
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline-block特点:

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。和其他元素都在一行上;元素的高度、宽度、行高以及底边距都可设置。

常见问题与解决方案

  1. inline和inline-block元素之间的间距问题
设置父容器的font-size为0,子容器重新设置font-size。
  1. inline-block元素的如何垂直居中
设置上下padding值相等;
设置vertical-align:middle;
设置line-height大于font-size;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5.bs4的基本使用

bs4是python的一个第三方库,用来做数据解析的 目录 1 安装bs4 2 解析本地的html文件 3 解析网上的html 4 找到指定的标签 4.1 获取页面中第一个指定标签的内容 4.2 查找页面中的第一个符合要求的内容 BeautifulSoup.find() 4.2.1 标签 4.2.2 类名 …

Linux--进程概念

1.什么是程序?什么是进程?有什么区别? 程序:是静态的概念,gcc xxx.c -o pro 磁盘中生成的pro文件,叫做程序。 进程:是程序的一种与运行活动,通俗的意思是程序跑起来了,系…

linux免密登录最简单--图文详解

最简单的免密登录 1.A电脑生成秘钥 ssh-keygen -t rsa 2.A电脑将秘钥传给B电脑 ssh-copy-id root192.168.1.129 #将秘钥直接传给B电脑 需要输入B电脑的密码,可以看到成功。 3.测试 同理:如果B->A也需要免密登录,统一的操作。 大功告…

PHP8的数组-PHP8知识详解

今天开始学习数组, 本文主要讲了三点:什么是数组、php8中数组的改进、数组函数。 一、什么是数组 在PHP8中,数组是非常重要的数据类型。相对于其他的数据类型,数组更像一种结构,而这种结构可以储存一系列数值。 数组…

git bash adb push 路径问题

adb push xxx.so //sdcard/DCIM/参考 https://stackoverflow.com/questions/16344985/how-do-i-pass-an-absolute-path-to-the-adb-command-via-git-bash-for-windows

【SpringSecurity】八、集成图片验证码

文章目录 1、生成图片验证码2、创建验证码过滤器3、将过滤器加入SpringSecurity过滤链4、修改登录页 SpringSecurity是通过过滤器链来完成的,接下来的验证码,可以尝试创建一个过滤器放到Security的过滤器链中,在自定义的过滤器中比较验证码。…

90、00后严选出的数据可视化工具:奥威BI工具

90、00后主打一个巧用工具,绝不低效率上班,因此当擅长大数据智能可视化分析的BI数据可视化工具出现后,自然而然地就成了90、00后职场人常用的数据可视化工具。 奥威BI工具三大特点,让职场人眼前一亮! 1、零编程&…

医学影像工作站PACS系统源码,医院PACS系统源码

医学影像(PACS)系统主要进行病人信息和影像的获取、处理、存储、调阅、检索、管理,并通过网络向全院提供病人检查影像及诊断报告;各影像科室之间共享不同设备的病人检查影像及诊断报告;在诊断工作站上,调阅HIS中病人的其它信息&am…

A Review on Graph Neural Network Methods in Financial Applications

本文是与GNN有关的论文综述,针对《A Review on Graph Neural Network Methods in Financial Applications》的翻译。 图神经网络在金融中的应用综述 摘要1 引言2 图分类3 特征处理4 图神经网络模型5 应用6 挑战 摘要 金融数据具有多个组成部分和多个关系&#xff…

Android架构 架构和 CPU ABI - NDK

查看设备架构 adb -s emulator-5554 shell getprop ro.product.cpu.abi C:\Users\liyd>adb -s emulator-5554 shell getprop ro.product.cpu.abi x86_64C:\Users\liyd>adb -s 804c11f1 shell getprop ro.product.cpu.abi arm64-v8amumu模拟器12 C:\Users\liyd>adb …

VB合同管理系统设计与实现

摘 要 在21世纪,随着计算机科学的发展,数据库技术在人们日常工作中的应用越来越广泛,为广大用户提供了更加周到和人性化的服务。数据库技术已逐渐成为当今计算机应用的潮流。本文主要是通过制作一款数据库软件—即“合同管理系统”来介绍数据库技术在人们日常生活和工作…

ElasticSearch入门

一、基本命令_cat 1、查看节点信息 http://192.168.101.132:9200/_cat/nodes2、查看健康状况 http://192.168.101.132:9200/_cat/health3、查看主节点的信息 http://192.168.101.132:9200/_cat/master4、查看所有索引 http://192.168.101.132:9200/_cat/indices二、索引一…

【算法与数据结构】700、LeetCode二叉搜索树中的搜索

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;二叉搜索树的性质&#xff1a;左节点键值 < 中间节点键值 < 右节点键值。那么我们根据此性质&am…

软件测试/测试开发丨Selenium 网页frame与多窗口处理

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27048 一、多窗口处理. 1.1、多窗口简介 点击某些链接&#xff0c;会重新打开⼀个窗⼜&#xff0c;对于这种情况&#xff0c;想在新页⾯上操作&#xff0…

流媒体服务器与视频服务器有什么区别?

流媒体服务器与视频服务器有什么区别&#xff1f; 流媒体服务器用在远程教育&#xff0c;视频点播、网络电台、网络视频等方面。 直播过程中就需要使用流媒体服务器&#xff0c;一个完整的直播过程&#xff0c;包括采集、处理、编码、封包、推流、传输、转码、分发、解码、播放…

2023-09-02 LeetCode每日一题(最多可以摧毁的敌人城堡数目)

2023-09-02每日一题 一、题目编号 2511. 最多可以摧毁的敌人城堡数目二、题目链接 点击跳转到题目位置 三、题目描述 给你一个长度为 n &#xff0c;下标从 0 开始的整数数组 forts &#xff0c;表示一些城堡。forts[i] 可以是 -1 &#xff0c;0 或者 1 &#xff0c;其中&…

Burp插件HaE与Authz用法

HaE与Authz均为BurpSuite插件生态的一员&#xff0c;两者搭配可以避免“越权”、“未授权”两类漏洞的重复测试行为。&#xff08;适用于业务繁杂&#xff0c;系统模块功能多的场景&#xff09; 两个插件都可以在store里安装 安装完后&#xff0c;点击Filter Settings勾选Sho…

第64步 深度学习图像识别:多分类建模误判病例分析(Pytorch)

基于WIN10的64位系统演示 一、写在前面 上期我们基于TensorFlow环境介绍了多分类建模的误判病例分析。 本期以健康组、肺结核组、COVID-19组、细菌性&#xff08;病毒性&#xff09;肺炎组为数据集&#xff0c;基于Pytorch环境&#xff0c;构建SqueezeNet多分类模型&#xf…

业务需要咨询?开发遇到 bug 想反馈?开发者在线提单功能上线!

大家是否遇到过下列问题—— 在开发的时候&#xff0c;遇到 bug 需要反馈… 有合作意向的时候&#xff0c;想更多了解业务和相关产品… 在接入的时候&#xff0c;需要得到专业技术支持… 别急&#xff0c;荣耀开发者服务平台在线提单功能上线了~ 处理问题分类说明&#xff1…

C语言---位域(位段)

位域&#xff08;位段&#xff09; 1、位域定义&#xff1a; 有些数据在存储时并不需要占用一个完整的字节&#xff0c;只需要占用一个或几个二进制位即可。例如开关只有通电和断电两种状态&#xff0c;用 0 和 1 表示足以&#xff0c;也就是用一个二进位。正是基于这种考虑&…