常见的内联元素(inline)和块级元素(block)
1.内联元素(inline):
a – 锚点
abbr – 缩写
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
span – 常用内联容器,定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框
2.块级元素(block):
address – 地址
blockquote – 块引用
dir – 目录列表
div – 常用块级容易,也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – h6 标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li
3.内联元素与块级元素的区别
内联元素:
1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin,padding,但只在水平方向有效。
块状元素:
1、块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin,padding
内联块状元素inline-block:
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现(可以设置宽高和margin值)。之后的内联对象会被排列在同一内联。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
4.互相之间的区别
区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。
(1)块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
(3)块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
5.问题:页面排版的时候经常会遇到li包含img时,图片文件的下边缘出现大概5个或10个像素的间隙
原因:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象,只要是inline元素和父级元素是baseline的属性的对齐。
html会把图片默认为内联级元素和文字是一样的,那文字的话,给他设置不同的文字大小或字体,肯定会有不同的行高,或者它们会有默认的行高。这样就有了img下面的空隙。
办法:
第一,给图片img标签display:block。
img {display:block}
第二,定义容器里的字体大小为0。
div {width: 110px;border: 1px solid #000;font-size: 0}
常见的内联元素(inline)和块级元素(block)相关推荐
- html块级元素转换内联,HTML中的块级元素和内联元素
1.特性 块级元素(block level element) 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width).高度(height).内边距(padding)和外 ...
- html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...
原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...
- HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?
前端面试题(8) 打卡: 2021-5-2 HTML HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些? (1)行内元素 inline element a - 锚点 b - 粗体 ( 不推荐 ...
- html:(38):元素分类和块级元素
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
- 行内元素(内联元素)与块级元素
在标准文档流里面,块级元素具有以下特点: 块级元素写完后会自动换行,有宽高可以修改. ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关: ...
- html块级元素对齐方式,块级元素的三种垂直水平居中的方法
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex(子级宽高可固定也可不固定,随意) 定位+margin(固定子级的宽高,margin-top,margin-left取自身一半的负值) 定位+ ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
- css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...
最新文章
- hdu 2295 Radar(二分+DLX)
- java dom遍历_JavaScript DOM文档遍历实战
- OpenStack开发学习笔记01
- Lombok常用注解和功能
- 一篇通俗易懂的讲解OpenGL ES的文章
- php获取文件夹下指定文件名_VBA和Python对对碰,获取文件名称(含子文件夹)
- 一款很好看的个人主页简单源码
- 分子生物学数据库和软件
- 苹果手机密码设置在哪里_oppo怎么设置SIM密码-oppo手机SIM卡密码设置详细教程
- 电脑桌面便签小工具下载,好用的桌面便签软件推荐
- 淘宝店铺装修图片常用尺寸有哪些?淘宝图片大小要求
- 如何用Procmon.exe来监视SQLSERVER的logwrite大小
- 泛微OA二次开发E8之UE富文本编辑器增加按钮操作
- Linux C 编程内存泄露检测工具(二):memwatch
- 安装VisualSVN server
- function介绍
- AI“头雁”百度的进取之道:善弈者通盘无妙手
- JAVASE点餐系统源码
- esp32 wifi 连接
- POJ 2245 Lotto G++
热门文章
- Unable to resolve 'JNDI_EcsReadUpf'. Resolved ''; remaining name
- 静态变量php跨页面,PHP的静态变量 - jone的个人页面 - OSCHINA - 中文开源技术交流社区...
- 【CLion】解决CLion链接Linux服务器相关库没有代码补全
- 释放Windows为硬件保留内存,双系统安装释放法。
- Android之冷启动和热启动,以及代码
- 大学里,如果你一个人,就请这样生活!
- 本地局域网通过另一台可以联网的电脑上网(架设代理服务器)
- python二元函数求导_python实现GA求二元函数最大值(来自知乎)
- STM32F103步进电机梯形匀加速算法
- JS实现页面返回顶部的匀加速运动