<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示模式</title>
<style>/* 加颜色的地方 */
h4,p,span,del,a,input,h3{
background-color: aqua;
width: 400px;
height: 200px;
margin: auto; /* 给盒子设置水平居中 */
text-align: center; /* 文本居中 */
}
a{
display: block; /* 将a标签转化为块元素 */
}
</style>
</head>
<body>
<!-- 标签的显示模式
1.块元素： block
比较霸道，单独占一行
默认宽度是父级元素宽度的100%
可以设置宽，高和对齐性
块元素可以包含行内元素和其他元素
文本标签(h1-h6,p)内不要再装块元素
2.行内元素：inline
一行显示多个
默认的宽度是内容的宽度
宽，高和对齐性设置无效
行内元素只能包含文本或其他行内元素，一般不要包含块元素
链接标签不要在包含其他连接
3.行内块元素 inline-block:
一行显示多个
默认的宽度是内容的宽度
可以设置宽，高和对齐性
<input /><img /><td></td>
元素显示模式的转换：
display:block/inline/inline-block;
-->
<h4>小米su7</h4>
<h3>苹果</h3>
<p>性能旋风...</p>
<span>2399</span> <!-- 可以上下为一行 -->
<del>2499</del>
<a href="www.baidu.com">百度一下</a>
<input type="text"/>
<input type="password"/>
</body>
</html>
显示模式前端
最新推荐文章于 2024-07-16 16:07:08 发布
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
