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
用于设置字体颜色