3.3、转换

3.3.1、display

HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块级元素和行内元素

  • 块元素:以区域块方式出现,每个块标签独自占据一整行或多整行,块结束会自动换行

               常见的块元素:标题标签<h1>、段落标签<p>、块标签<div>、无序列表<ul>等

  • 行内元素:根据内容多少来占用行内空间,不会自动换行

               常见的行内元素:<span>、<a>  <input/>等

display属性可以使得元素 在行内元素和块元素之间相互转换。

  • 格式:

               选择器(display:属性值)

              inline块标签转行标签(原来一个字占一行,现在一行排满之后才拍下一行)

             block行标签转块标签

              none隐藏行或者块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				display: inline;
			}
			div{
				display: inline;
			}
			ul{
				display: inline;
			}
			span{
				display: block;
			}
			a{
				display: none;
			}
		</style>
	</head>
	<body>
		<!--块转行标签-->
		<h1>常见的块标签   加上inline标签块标签立马变成行标签</h1><br/>
		<p>段落标签</p>
		<p>段落标签</p>
		<div>这是个块标签,容量大</div>
		<div>默认占满一行</div>
		<ul>
			<li>
				这是个无序标签
				无序标签比较常用
			</li>
		</ul>
		<!--行转块标签标签-->
		<h1>常见的行标签   加上block属性行标签立马变成块标签</h1><br/>
		<span>适用于展示少量信息</span>
		<span>有多少内容就占用多少空间</span>
		<h1></h1><br/>
		<a>这是个超链接标签      加上none属性该标签内容就可以隐藏</a>
		<a>默认跳转到本页,herf属性</a>
	</body>
</html>

3.4、字体样式

3.4.1、font-size

用于设置字体单位:px

3.4.2、color

用于设置字体颜色

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值