1218 box-sizing属性+常用的元素居中方式 - 前端开发

首页 > 博客列表 > 1218 box-sizing属性+常用的元素居中方式

博主信息

博文 13

粉丝 0

访问量 11581

专题推荐

更多>

实例演示box-sizing属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>box-sizing的使用</title>
    <style>
        :root{
            font-size:1.25em;
            margin: 0;
            padding:0;
            border: 0;        }
        .box{
            font-size: 1.2rem;  /*24px*/
            width: 10em;        /*240px*/
            height: 10em;       /*240px*/
            border: 1px solid black;
            padding: 0.5em;
            margin: 0 0.2em;
            background: brown;
            box-sizing: border-box;  /*只显示div的宽高像素，其他排除*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实例演示常用的元素居中方式

1.块级元素

.align{
            width: 20em;
            background: rgb(158, 137, 137);
            padding: 5em 0;
        }
        .kuai{
            width: 5em;
            height: 5em;
            background: red;
            margin:0 auto;
        }

    <div class="align">
         <div class="kuai"></div>
    </div>

2.行内元素

        .align {
            width: 15em;
            height: 15em;
            border: 1px solid #000;
            text-align: center;
        }
        .align a {
            line-height: 15em;
        }

<div class="align">
    <a href="http://www.baidu.com">百度一下</a>
</div>

3.行内块元素

        .align {
            width: 20em;
            border: 1px solid #000;
            text-align: center;
        }
        .align img {
            padding: 5em 0;
        }

<div class="align">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608456485219&di=181937a0a3cf7128b73ab65298014fc7&imgtype=0&src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg" width="100"/>
</div>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

1208html标签作业

2020-12-09 13:36:23