css复习——前段规范与多行文字居中

最新推荐文章于 2022-11-14 15:20:48 发布

wangyuanti

最新推荐文章于 2022-11-14 15:20:48 发布

阅读量381

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wangyuanti/article/details/78020013

版权

0706

前段规范

1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联标签不能嵌套块标签；

多行文字居中

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:500px;
            height:300px;
            border:1px solid #0e3757;
        }
        .box em{
            height:100%;
            display: inline-block;
            vertical-align: middle;
        }
        .box span{
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">

    <em></em>
    <span>很有艺术气息的休闲鞋<br>布面的材质舒适透气</span>

</div>
</body>
</html>

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:500px;
            height:300px;
            border:1px solid #0e3757;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">
    很有艺术气息的休闲鞋<br>布面的材质舒适透气
</div>
</body>
</html>

第三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:500px;
            height:300px;
            border:1px solid #0e3757;
            line-height: 300px;
        }
        .box span{
            line-height:20px;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">
    <span>很有艺术气息的休闲鞋<br>布面的材质舒适透气</span>
</div>
</body>
</html>