1、行级元素只能套行级元素,块级元素能套任何元素
例外:
p标签不能套块级元素
<p>
<div></div>
</p>
a标签不能套a标签
<a href="">
<a href=""></a>
</a>
2、 容器水平垂直居中
div{
width:100px;
height:100px;
background-color: red;
position:absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;
}
设置50%是以左顶点为对象
要设置margin使位置往左上移动半个身位
3、文本类元素底对齐
<span></span>123
span{
font-size:50px;
display: inline-block;
width:200px;
height:200px;
background-color:red;
}
span改为inline-block后,文本与其底对齐。
在框内加入文本后,外面的文本会与里面的文本底对齐。
<span>123</span>123
我们可以通过css的vertical-align 属性设置元素的垂直对齐方式。
列举几个值:
top把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐。