首頁(yè) > 博客列表 > 盒模型與常用的居中方式

博主信息

博文 45

粉絲 0

評(píng)論 0

訪(fǎng)問(wèn)量 45969

專(zhuān)題推薦

更多>

相關(guān)推薦

盒模型

影響盒子大小的因素

padding內(nèi)邊距
border邊框

將背景色裁切到內(nèi)容區(qū),讓padding可視化
background-clip:content-box

盒子尺寸多大小的計(jì)算公式:width/height + padding2 +border2
一般減去padding和border的值就是盒子內(nèi)容 calc();

ie盒模型
box-sizing:讓用戶(hù)自己決定計(jì)算盒子大小的方案
.box{
    box-sizing:content-box;標(biāo)準(zhǔn)盒模型  不計(jì)算border,padding
    box-sizing:border-box;ie盒模型 padding,border計(jì)算在盒子大小內(nèi)
}

 <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 對(duì)盒子位置的影響

margin:上右下左
margin塌陷大者勝出
margin只會(huì)對(duì)頁(yè)面中的元素的位置或者多個(gè)元素的排列產(chǎn)生影響,對(duì)盒子大小無(wú)影響

常見(jiàn)居中方式

行內(nèi)居中

水平居中

無(wú)論是行內(nèi)元素還是行內(nèi)塊元素使用text-align: center都可以實(shí)現(xiàn)居中；

 <style>
        .box {
            width: 15em;
            height: 15em;
            border: 1px solid #ccc;
        }
        .box {
            text-align: center;
        }
    </style>
<body>
    <div class="box">
        <a href="">這是內(nèi)容</a>
    </div>
</body>

效果圖

垂直居中

設(shè)置一個(gè)行高等于容器的高度即可，

<style>
        .box {
            width: 15em;
            height: 15em;
            border: 1px solid #ccc;
        }
        .box {
            text-align: center;
            line-height: 15em;
        }
    </style>
    <body>
        <div class="box">
            <a href="">這是內(nèi)容</a>
        </div>
    </body>

效果圖

塊元素居中

水平居中

使用maigin：0 auto;意味上下間距為0，左右間距自動(dòng)

<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方法：父容器不要設(shè)置高度，由子元素?fù)伍_(kāi)，給父元素設(shè)置上下相等的內(nèi)邊距即可實(shí)現(xiàn)垂直居中

 <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>

效果圖

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

1209列表元素

2021-02-25 12:34:22

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

盒模型

影響盒子大小的因素

ie盒模型

marigin 對(duì)盒子位置的影響

常見(jiàn)居中方式

行內(nèi)居中

水平居中

垂直居中

塊元素居中

水平居中

垂直居中