元素的分类:
块级元素 可以设置宽高,并且独占一行 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>