标签的显示模式:
1.块元素 block:
比较霸道,单独占一行
默认宽度是父级元素宽度的100%
可以设置宽、高和对齐属性
块元素可以包含行内元素和其他块元素
文本标签(h1~h6,p)内不要再装块元素
2.行内元素 inline:
一行显示多个
默认的宽度是内容的宽度
宽、高和对齐属性设置无效
行内元素只能包含文本或其他行内元素,一般不包含块元素
链接标签不要再包含其他链接
3.行内块元素 inline-block:input,img,td
一行显示多个
默认的宽度是内容的宽度
可以设置宽、高和对齐属性
<input/><img/><td/>
元素显示模式的转换:
display:block/inline/inline-block;
<style>
h4,p,span,del,a,input{
background-color: aqua;
width: 50px;
height: 100px;
margin: auto; /* 给盒子设置水平居中 */
text-align: center; /* 文本居中 */
}
a{
display: block; /* 将a标签转换为块元素 */
}
</style>
<body> <h4>小米su7</h4>
<p>性能旋风...</p>
<span>2399</span>
<del>2499</del>
<a href="www.baidu.com">百度一下</a>
<input type="text"/>
<input type="password"/>
</body>