本章摘要 :
- CSS中提供了一个display属性,它能够修改标签的显示类型
- 1, none : 隐藏标签
- 2, block : 让标签变为块级标签(主要针对的是标签选择器)
- 3, inline : 让便签变为行内标签
- 4, inline-block : 让标签变为行内-块级(内联-块级)标签
<html>
<head>
<meta charset="UTF-8">
<title>看我如何修改标签显示的类型</title>
<style>
/* 块级标签:独占一行,可以设置宽度和高度*/
div{
color: red;
background-color: yellowgreen;
width: 150;
height: 150;
/*让标签变为行内标签*/
/*display: inline;*/
display: inline-block;
}
/*行内标签 : 多个行内标签可以显示在同一行,宽度和高度是由内容所决定的*/
span{
color: darkslategrey;
background-color: brown;
width: 100;
height: 150;
/*display: block;*/
display: inline-block;
}
/*行内-块级标签 : 多个行内标签能显示在同一行,并且可以设置高度和宽度*/
input{
width: 150;
height: 35;
/*display: inline;*/
display: block;
}
</style>
</head>
<body>
<div>孙悟空当年大闹天空</div><br>
<span>众神拿之毫无办法,那是因为,他妈的没有遇到现在的城管</span>
<p></p>
<input>
<input>
</body>
</html>
