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

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、内联标签不能嵌套块标签;

多行文字居中

第一种


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

第二种


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

第三种


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

你可能感兴趣的:(css)