machinecat520
/
zj-Exercise


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的样式</title>
    <style>

        /* 
            text-align 文本的水平对齐
                可选值：
                    left 左侧对齐
                    right   右对齐
                    center  居中对齐
                    justify 两端对齐
        */
        /* 
            vertical-align 设置元素垂直对齐的方式
                可选值：
                    baseline：默认值，基线对齐
                    （基线：文字底部的边线、参考线，默认子元素的基线和父元素的基线是一样的）
                    top：顶部对齐（子元素的顶部和父元素的顶部对齐）
                    bottom：底部对齐
                    middle：居中对齐

        */

        div{
            width: 500px;
            /* text-align: justify; */
            border: 1px red solid;
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: 1px blue solid;
            /* vertical-align: middle; */
            /* vertical-align: 30px; */
            vertical-align: -30px;
        }
        p{
            border: 1px red solid;
            width: 600px;
        }
        img{
            vertical-align: top;
            /* vertical-align: bottom; */
            /* vertical-align: middle; */
        }

    </style>
</head>
<body>
    <!-- <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus sit illo quia possimus, nesciunt dolor qui iusto ab exercitationem adipisci quidem unde iure deleniti illum? Autem voluptatem aut optio magnam.
    </div> -->
    <div>
        今天天气Hellox<span>真不错 Hello</span>!
    </div>
    <p>
        <img src="../img/zly.jpeg" alt="">
    </p>
</body>
</html>