html:(39):块级元素和内联块级元素
元素分类--内联元素
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline
将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{display:inline;}......<div>我要变成内联元素</div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
小伙伴们你们观查一下右侧代码段,有没有发现一个问题,内联元素之间有一个间距问题,这个问题在本小节的 wiki 中有介绍,感兴趣的小伙伴可以去查看。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="https://blog.csdn.net/weixin_43392489">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>
</html>
运行结果
元素分类--内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block
就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
提示:下一小节是用视频动画来讲解css中的盒模型。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{display:inline-block;width:20px;/*在默认情况下宽度不起作用*/height:20px;/*在默认情况下高度不起作用*/background:pink;/*设置背景颜色为粉色*/text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>
运行结果
html:(39):块级元素和内联块级元素相关推荐
- CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
- html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...
原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...
- css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
- 玩转CSS中块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 1.块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li. ...
- 行内元素和块级元素:内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
- css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...
- html 元素的内联块元素,html内联元素和块级元素的基本概念及使用示例
html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念: 块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(w ...
- html:(40):块级元素和内联块级元素
1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...
- html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
最新文章
- Java B2B2C多用户商城 springcloud架构-服务容错保护(Hystrix服务降级)
- 使用BootStrap编写网页,如何设置全屏页面背景?
- 远程访问rest方式
- 揭秘继承技术之虚函数
- pycharm的pip配置
- 【JAVA错误笔记】 - 【Could not open ServletContext resource [/WEB-INF/applicationContext.xml]解决方法】
- note同步不及时 one_续航800仅卖23万,比亚迪唐DM为啥却卖不过理想ONE?
- Arduino测量误差数据的处理——莱特、格拉布斯准则剔除异常数据
- [数据][xml格式] 2012年统计用区划代码和城乡划分代码
- smail if-eqz理解
- 毕业之后才知道的——知网查重原理以及降重举例
- mysql 5.7 安装tokudb_安装Percona-Server-5.7.18+tokudb
- EDI文件类型和传输协议
- 我的读书笔记 -《鬼谷子》
- 【Android Studio使用教程2】Android Studio创建项目
- Android计步器算法实现(2)
- 2022年8月及1-8月国内动力电池企业装车量排名:“宁王”第一,“迪王”猛追
- 计算器算贝塞尔公式_买车贷款怎么算利息?
- 【云原生-K8s】kubeadm搭建安装k8s集群v1.25版本完整教程【docker、网络插件calico、中间层cri-docker】
- 三星笔记本 win10+ubuntu18.04.3双系统 BIOS设置
热门文章
- configure: error: Curl library not foun
- python中node.tag的用法_python在ui自动化中的一些常见用法
- linux程序已经在后台运行冻结了_如何使程序在Linux后台运行
- python怎么发送邮件_在Python如何使用SMTP发送邮件
- linux内核怎么修改屏幕旋转方向_树莓派4—屏幕旋转
- float foo=42e1为什么错_为什么重写了equals()也要重写hashCode()
- 在手机测试html,借助 IIS 管理器 -- 用手机测试HTML页面
- 带有Flask的服务器端DataTable
- Linux 下wifi 驱动开发(三)—— SDIO接口WiFi驱动浅析
- 将time_t格式的字符串转换成具体的时间, 存放在SystemTime结构体中