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

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

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

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

块元素

常见的块元素包括

<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)
最新发布的资讯信息
【技术前线|企业IT】婚介相亲app软件开发找哪家靠谱?(2021-07-03 14:50)
【技术前线|】隐隐交友软件开发的意义?(2021-07-02 15:19)
【技术前线|】喜上眉梢交友软件的开发(2021-07-01 13:57)
【技术前线|】面具公园交友软件开发的功能和发展前景(2021-06-30 15:03)
【技术前线|】类似soul的交友软件 app源码系统定制开发(2021-06-29 14:56)
【技术前线|】相亲交友 系统开发找哪家好?交友软件的发展潜力如何?(2021-06-28 15:04)
【技术前线|】像喜上眉梢这类交友软件开发的条件及前景如何?(2021-06-24 14:31)
【技术前线|】开发一款交友类APP(比如小圈)的流程及价格?(2021-06-23 15:27)
【技术前线|】定制开发一款交友系统软件需要多少钱?(2021-06-21 14:21)
【技术前线|】飞店开发的喜上眉梢 交友 相亲源码(2021-06-17 15:15)
联系我们

平台客服:28292383

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

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

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

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

扫一扫进手机版
TOP