css要点补充总结

day10 css要点补充2

1、行级元素只能套行级元素，块级元素能套任何元素

例外：
p标签不能套块级元素

a标签不能套a标签

2、 容器水平垂直居中

p{
	width:100px;
	height:100px;
	background-color: red;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-50px;
	margin-left:-50px;
}

设置50%是以左顶点为对象


要设置margin使位置往左上移动半个身位


3、文本类元素底对齐

123

span{
	font-size:50px;
	display: inline-block;
	width:200px;
	height:200px;
	background-color:red;
}

span改为inline-block后，文本与其底对齐。


在框内加入文本后，外面的文本会与里面的文本底对齐。

123123



我们可以通过css的vertical-align 属性设置元素的垂直对齐方式。
列举几个值：
top把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐。