<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示模式</title>
<style>
div{
background-color: pink;
width:200px;
height:400px;
margin:auto;
}
span{
width:200px;
height:400px;
background-color: pink;
/* margin: auto; */
}
</style>
</head>
<body>
<!--
显示模式:
1.块元素
比较霸道,单独占一行
默认宽度和父盒子一样宽
可以给盒子设置宽和高
可以给盒子设置水平居中
块元素中可以包含行内元素和块元素
div,p,h1~h6,ol,ul,li,dl,dd,dt
不能装文本
2.行内元素
一行显示多个
默认宽度和内容一样宽
不能给盒子设置宽和高
不能给盒子设置水平居中
span,del,a
只能装文本或其他行内元素
针对连接标签:
>链接里面不要再放链接
>特殊情况下可以给a标签设置宽高,并包含块元素,但需要做显示模式的转换
3.行内块元素inlink_block
一行显示多个
可以给元素设置宽和高
input,img,td
4.元素显示模式的转换
display:block; 转化成块元素
-->
<div>hello div</div> <!--块元素-->
<p class="ys">段落标签</p>
<h4 class="ys">4级标签</h4>
<span>文本</span><del>删除线</del> <!--行内元素-->
</body>
</html>
盒子的显示
最新推荐文章于 2024-09-30 14:30:30 发布