当前位置: 移动技术网 > IT编程>网页制作>CSS > css要点补充总结

css要点补充总结

2018年10月05日  | 移动技术网IT编程  | 我要评论

    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 把元素的底端与父元素字体的底端对齐。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网