<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示模式</title>
<style>
div{
background-color: blue;
width: 150px;
height: 30px;
margin: auto;
}
.s{
background-color: aqua;
width: 100px;
height: 50px;
/* margin: auto; */
}
</style>
</head>
<body>
<!--
显示模式：
1.块元素-block
比较霸道，单独占一行
默认宽度和父盒子一样宽
可以给元素设置宽，和高
可以给盒子设置水平居中
块元素中可以包含行内元素和块元素
div，p，h1~h6，ol，ul，li，di，dd，dt
2.行内元素-inline
一行显示多个
和内容一样宽
不能给盒子设置宽和高
行内元素中只能装文本或其他行内元素
span，del，a
针对连接标签：
链接里面不要放链接
特殊情况下可以给a标签设置宽高，并包含块元素，但需要做显示模式的转换。
3.行内块元素-inline——block
一行显示多个
默认宽度和内容一样宽
可以给元素设置宽，高
input，img，td
元素显示模式的转换
display：block; 转换成块元素
-->
<div>hello div</div>
<p class="s">段落标签</p>
<h4 class="s">4级标题</h4>
<span class="s">文本</span>
<del class="s">删除线</del>
<a class="s">无语</a>
</body>
</html>
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
