首页 > 博客列表 > 盒模型与常用的居中方式

博主信息

博文 45

粉丝 0

访问量 46970

专题推荐

更多>

盒模型

影响盒子大小的因素

padding内边距
border边框

将背景色裁切到内容区,让padding可视化
background-clip:content-box

盒子尺寸多大小的计算公式:width/height + padding2 +border2
一般减去padding和border的值就是盒子内容 calc();

ie盒模型
box-sizing:让用户自己决定计算盒子大小的方案
.box{
    box-sizing:content-box;标准盒模型  不计算border,padding
    box-sizing:border-box;ie盒模型 padding,border计算在盒子大小内
}

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: cyan;
            padding: 5px 10px 15px 20px;
            background-clip: content-box;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
    </style>
<body>
    <div class="box"></div>
</body>

效果图

marigin 对盒子位置的影响

margin:上右下左
margin塌陷大者胜出
margin只会对页面中的元素的位置或者多个元素的排列产生影响,对盒子大小无影响

常见居中方式

行内居中

水平居中

无论是行内元素还是行内块元素使用text-align: center都可以实现居中；

 <style>
        .box {
            width: 15em;
            height: 15em;
            border: 1px solid #ccc;
        }
        .box {
            text-align: center;
        }
    </style>
<body>
    <div class="box">
        <a href="">这是内容</a>
    </div>
</body>

效果图

垂直居中

设置一个行高等于容器的高度即可，

<style>
        .box {
            width: 15em;
            height: 15em;
            border: 1px solid #ccc;
        }
        .box {
            text-align: center;
            line-height: 15em;
        }
    </style>
    <body>
        <div class="box">
            <a href="">这是内容</a>
        </div>
    </body>

效果图

块元素居中

水平居中

使用maigin：0 auto;意味上下间距为0，左右间距自动

<style>
  .box {
            width: 15em;
            height: 15em;
            border: 1px solid #ccc;
        }
        .box>div {
            width: 5em;
            height: 5em;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
<body>
    <div class="box">
        <div></div>
    </div>
</body>

效果图

垂直居中

1、padding方法：父容器不要设置高度，由子元素撑开，给父元素设置上下相等的内边距即可实现垂直居中

 <style>
        .box {
            width: 15em;
            border: 1px solid #ccc;
            padding: 5em 0;
            box-sizing: border-box;
        }
        .box>div {
            width: 5em;
            height: 5em;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>

效果图

2、margin方法使用定位

<style>
.box {
            position: relative;
            width: 15em;
            border: 1px solid #ccc;
            padding: 5em 0;
            box-sizing: border-box;
        }
        .box>div {
            width: 5em;
            height: 5em;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>

效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

1209列表元素

2021-02-25 12:34:22