Hi , 欢迎!
开店!    曝光台    保障    地图    帮助中心
赞助广告
32

CSS笔记-2:元素的显示模式

  • 时间:2020-10-28 23:50 编辑:Leanne.T. N. 来源: 阅读:207
  • 扫一扫,手机访问
摘要:

元素的显示模式即为一个标签以什么方式进行显示,一般分为块元素和行内元素

块元素

常见的块元素包括

<h> <p> <div> <ul> <ol> <li>
  • 1

块元素的特点:
1.块元素中的内容独占一行
2.块元素中的高度、宽度以及页边距都可以设定
3.块元素的默认宽度是上一级元素的100%
4.块元素内部还可以放其他的块元素或行内元素
5.文字类元素内部不能放块元素,如p标签和h标签

行内元素

常见的行内元素包括

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
  • 1

行内元素的特点:
1.相邻行内元素的内容都会显示在一行上
2.直接设置高、宽是无效的
3.默认宽度就是内容本身的宽度
4.行内元素只能容纳文本或其它行内元素,不能添加块元素
5.a标签内部可以放块元素,但是a里面不能再嵌套a标签,且a如果要放置块元素需要提前转化

行内块元素

行内块元素同时具有行内元素和块元素的特点,一般常见的包括

<img> <input> <td>
  • 1

其特点是:
行内元素型:
1.和相邻行内块元素在同一行上
2.默认宽度是其本身内容的宽度
块元素特点:
高度、行高、外边距、内边距都可以被控制

元素显示模式的转化

将一类元素的显示模式转化为另一类

/*将行内元素转化为块级元素(以<a>标签为例)*/
<style>
	a{
		width:50px;
		height:50px;
		background-color:red;
		display:block;
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

其中的display:block可以将行内元素转化为块元素,使得链接可以在这个边长为50px的红色正方形内均生效。

/*将块元素转化为行内元素(以<div>为例)*/
<style>
	div{
		display:inline;
		}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

同理,转化为行内块元素的代码为display:inline-block

  • 全部评论(0)
最新发布的资讯信息
【技术前线|】小圈源码小圈app源码部主要功能(2021-05-06 11:10)
【技术文档|网络通讯】叮豚AI智能企业数字化营销系统带智能获客品牌推广致力于智能企业数字化应用系统应用(2021-01-30 16:46)
【技术前线|区块链】编译64位windows下可运行的.dll文件(2020-11-01 01:14)
【技术前线|物联网】ARM Cortex-A系列(A53、A57、A73等)处理器性能分类与对比(2020-11-01 01:04)
【技术前线|程序人生】加班丧?来看看这些句子给你满满正能量(2020-10-28 23:59)
【技术前线|音视频开发】JZ6(2020-10-28 23:58)
【技术文档|Python】Mac电脑上安装python,pycharm(2020-10-28 23:57)
【技术文档|Python】Python字典排序高级用法(2020-10-28 23:57)
【技术文档|Python】【Task04】Numpy学习打卡(2020-10-28 23:56)
【技术前线|程序人生】职业理念-10月28日(2020-10-28 23:53)
联系我们

平台客服:28292383

平台电话:400办理中.....

平台邮箱:28292383#qq.com(#更换@)

工作时间:早9:00 晚:24:00(节假日无休)

我的
足迹
收藏
社区投稿
推广赚佣
平台客服
APP

扫一扫进手机版
TOP