1. box-sizing属性;

属性值	说明
box-sizing: content-box	w3c标准盒子模型,width/height 不含padding/border
box-sizing: border-box	盒模型以元素边框区为边界，包含padding、border值.称之为IE盒子模型

1.content-box 示例如下

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    :root {
        font-size: 10px;
    }
    .box {
        width: 10em;
        height: 10em;
        background-color: bisque;
        border: 3px solid navajowhite;
        background-clip: content-box;
        padding: .5em;
        box-sizing: content-box;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>

1.border-box 示例如下

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-box</title>
<style>
    :root {
        font-size: 10px;
    }
    .box {
        width: 10em;
        height: 10em;
        background-color: bisque;
        border: 3px solid navajowhite;
        background-clip: content-box;
        padding: .5em;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>

2. 常用的元素居中方式

行内元素水平垂直居中 text-algin:center; 和 line-height: ；

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素水平垂直居中</title>
<style>
    :root {
        font-size: 10px;
    }
    .box {
        width: 20em;
        height: 20em;
        background-color: bisque;
        border: 3px solid navajowhite;
        background-clip: content-box;
        padding: .5em;
        box-sizing: content-box;
    }
    .box>div{
        text-align: center;
        line-height: 20em;
        }
</style>
</head>
<body>
<div class="box"><div>行内元素水平垂直居中</div></div>
</body>

块元素水平垂直居中 margin position

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素水平垂直居中</title>
<style>
    :root {
        font-size: 10px;
    }
    .box {
        width: 20em;
        height: 20em;
        background-color: bisque;
        border: 3px solid navajowhite;
        position: relative;
    }
    .box>div{
        width: 10em;
        height: 10em;
        background-color: olive;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        }
</style>
</head>
<body>
<div class="box"><div>块元素水平垂直居中</div></div>
</body>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

JS里 in_array() 的封装.

2022-01-21 09:15:57