元素的分类：
块级元素 可以设置宽高，并且独占一行 div h1-h6 p ul li ol dldd dt form table
行内元素：不可以设置宽高 可以同行显示的元素 span a em b strong del i u......等
行内块元素：既可以设置宽高，又可以同行显示 img input selec button textarea......等
<style>
ul li {
width: 200px;
}
span{
width: 500px;
background-color: red;
}
img {
width: 200px;
height: 200px;
}
button {
width: 80px;
height: 30px;
background-color: yellow;（为了更好的查看效果可以添加颜色来进行一个区分）
}
input {
width: 100px;
height: 40px;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
让块级元素横向显示：display：inline 将任意元素转为行内元素
display: inline;
display: inline-block;将任意元素转为行内块元素
display: inline-block;
元素的垂直对齐的方式：*vertical-align:top/middle/bottom 上对其/中间对齐/下对其
元素转换类型后如果发生对不起的情况，一定要使用vertical-align对齐
vertical-align: bottom;
}
span {
width: 200px;
height: 200px;
background-color: red;
让同行元素既可以同行显示，又拥有宽高，需要转成行内块
display: inline-block;
}
img {
display:block 将任意元素转为块级元素
display: block;
使用margin：0 auto 可以使任意块级元素水平居中
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul><span>1123555412</span><a href="">点我</a>（同行显示）
<img src="图片名称" alt="">
<button>按钮</button><input type="text">
<div class="box">11</div>
<div class="box" style="height: 150px;">22</div>
<div class="box">33</div>
<span>123</span>
<span>123</span>
<span>123</span>
</body>
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
