<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示模式</title>
<link href="new_file.css" rel="stylesheet"/>
</head>
<body>
<!-- 元素的显示：
1.块元素block
单独占一行
默认的宽度和父级元素宽度的100%
可以控制width height 对齐属性
块元素内可以包含行内元素或其他块元素
div，ul，ol，li，p，h1-h6
2.行内元素inline
一行显示三个
默认的宽度就是内容的宽度,
宽高属性无效
不能设置对齐属性
行内元素只包含文本或其他行内元素
常见的行内元素<a><span><del><strong>
3.行内块元素inline-block
一行显示多个，但两个元素之间有空白间隙
默认宽度是内容本身的宽度
可以给盒子设置宽高
input，img，td
元素模式的转换：display+模式名称-->
<div class="box">hello box</div>
<p class="box">hello 段落</p >
<h1>一级标题</h1>
<span class="box">hello span</span>
<del>hello 删除线</del>
</body>
</html>
css部分
div{
background-color: aquamarine;
display:inline
}
span{
background-color: aqua;
display: inline-block;
}
.box{
width: 200px;
height: 150px;
border: 1px solid aquamarine;
text-align: center;
margin: auto;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
