元素分类和display属性介绍
文本级的标签:
p h1~h6 strong/em span img a
排版级的标签
br/hr div li input ul/ol/dl table select from option
css中元素分类：
-
块状元素：
-
<div> <ul> <ol> <p> <h> <table> <from>
-
-
行内元素
-
<a> <span> <em> <strong> <label>
-
-
行内块元素:
-
<input> <image>
-
块级元素特点：
-
独占一行
-
可以设置宽高。如果不设置宽度，默认是父标签的100%宽度
块级元素的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>元素分类</title>
<style type="text/css">
div{
background-color: red;
width: 200px;
height: 200px;
}
p{
background-color: green;
}
</style>
</head>
<body>
<div>YJL</div>
<p>我是一个段落</p>
<h1>yjl</h1>
<ul>
<li>华为商城</li>
</ul>
<ul>
<li>小米商城</li>
</ul>
</body>
</html>
行内元素特点：
- 在一行内显示
- 不能设置宽高，默认的宽高为文本内容占据的宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>元素分类</title>
<style type="text/css">
a,p{
font-size: 40px;
background-color: purple;
width: 300px; 对行内元素不起作用
height: 400px; 对行内元素不起作用
}
</style>
</head>
<body>
<a href="213">百度一下</a>
<span>于金龙</span>
</body>
</html>
行内块元素的特点：
- 在一行内显示
- 可以设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>元素分类</title>
<style type="text/css">
input{
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<input type="text" name="">
</body>
</html>
display属性的介绍
块级元素 display:block
行内元素 display:inline;
行内块元素 display:inline-block;
小米顶部导航栏案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小米顶部导航栏</title>
<style type="text/css">
.top_bar a{
/* 去除a标签的下滑线 */
text-decoration: none;
color: #b0b0b0;
display: inline-block;
line-height: 40px;
}
.top_bar{
background-color: #333;
width: 100%;
height: 40px;
}
.top_bar span{
color: #424242;
}
.top_bar a:hover{
color: #fff;
}
</style>
</head>
<body>
<div class="top_bar">
<a href="">小米商城</a>
<span>|</span>
<a href="">MIUI</a>
<span>|</span>
<a href="">ioT</a>
<span>|</span>
<a href="">云服务</a>
<span>|</span>
<a href="">金融</a>
<span>|</span>
<a href="">有品</a>
<span>|</span>
<a href="">小爱开放平台</a>
<span>|</span>
<a href="">政府服务</a>
<span>|</span>
<a href="">资质证照</a>
<span>|</span>
<a href="">协议规则</a>
<span>|</span>
<a href="">下载app</a>
<span>|</span>
<a href="">Select Region</a>
</div>
</body>
</html>