CSS–怪异盒子模型_代码007(未授权)

本文介绍: CSS–怪异盒子模型怪异盒子模型标准盒子宽度计算方法（扩张主义）border–left–width+width+padding–left+padding–right+border–right–width<!DOCTYPE html&g t;<html&g t;<head><meta char set=”utf-8″><title></title><style> div { width: 100px;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="tset">
    <mata name="descriptions" conten="This is a website for a test">
    <!-- <meta http-quiv="Page-Enter" content="revealTrans(reveal)"> -->
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            box-sizing: border-box;
            width: 400px;
            margin: 30px auto;
            padding: 10px 10px;
            /* border: 1px solid red; */
            background-color: #368;
        }
        .wrap {
            width: 380px;
            height: 40px;
            margin: 10px 0;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            border: 1px solid black;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
        </ul>
    </div>
</body>
</html>