1218作业

作业标题：1218作业
作业内容：1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
演示地址:https://php.gzj2001.com/1218/
作业代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1218作业</title>
    <style>
        * {
            font-size: 20px;
        }
        /* ---------1.box-sizing------------- */
        .box {
            width: 10em;
            height: 10em;
            background-color: yellow;
            border: 5px red solid;
            padding: 5px;
            background-clip: content-box;
            box-sizing: content-box;
        }
        .box2 {
            width: 10em;
            height: 10em;
            background-color: green;
            border: 5px red solid;
            padding: 5px;
            background-clip: content-box;
            box-sizing: border-box;
        }
        /* -----------2.居中------------ */
        /* 2.1水平居中 */
        .center {
            width: 20em;
            border: 1px red solid;
        }
        .center p {
            /* p标签水平居中 */
            text-align: center;
        }
        .center div {
            width: 5em;
            height: 5em;
            background-color: blue;
            margin: 0 auto;
        }
        /* 2.2垂直居中 */
        .line {
            width: 15em;
            height: 15em;
            border: 1px red solid;
            background-color: pink;
        }
        .line a {
            /* line-height: 与容器高度相等即可垂直居中; */
            line-height: 15em;
        }
        .line2 {
            width: 15em;
            /* 为了使块元素垂直居中，不设置高度 这里应该由padding寄出来 */
            /* height: 15em; */
            border: 1px red solid;
            background-color: pink;
            padding: 3em 0;
        }
        .line2>div {
            width: 3em;
            height: 3em;
            background-color: orange;
        }
        /* 2.3水平垂直居中 */
        /* 2.3.1行内元素 */
        /* text-align+ line-height */
        .end {
            width: 10em;
            height: 10em;
            background-color: #999;
            text-align: center;
            line-height: 10em;
        }
    </style>
</head>
<body>
    <div class="box">220*220px content-box 不包含 padding border大小</div>
    <br>
    <div class="box2">200*200px border-box 包含了padding border大小</div>
    <br>
    <div class="center">
        <p>水平居中</p>
        <div>水平居中</div>
    </div>
    <br>
    <div class="line">
        <a href="">垂直居中</a>
    </div>
    <br>
    <div class="line2">
        <div> 块垂直居中</div>
    </div>
    <br>
    <div class="end">
        <a href="">aaaaaaa</a>
    </div>
</body>
</html>
盒模型类型讲解，常用元素定位对齐方式简介

1218作业

作业代码

相关文章
