正常盒模型和怪异盒模型

首先大概说说正常盒模型和怪异盒模型的区别:

1.用途:正常盒模型主要用于PC端,怪异盒模型主要用于手机端。

2.原理:正常盒模型的大小是由内到外的,由内部决定外部的大小;而怪异盒模型是由外而内的。

 

举例说明:

以下为正常盒模型,设定两个div,分别为鞋盒和鞋子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正常盒模型和怪异盒模型</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <h2>正常盒模型</h2>
    <div class="hezi">
        <div class="xiezi">
            鞋子        </div>
    </div>
    <hr/>
    <h2>怪异盒模型</h2>
    <div class="hezi2">
        <div class="xiezi2">
            鞋子
        </div>
    </div>
</body>
</html>

设置样式如下:

body{
    margin:0;
}

div[class ^= "hezi"]{
    width: 100px;
    margin:100px;
    padding:10px;
    border:5px solid #aaa;
    background-color:aqua;
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
}

div[class ^= "xiezi"]{
    width: 100px;
    height: 100px;
    background-color:orange;
    overflow-y: scroll;
}

我们发现当我们设置好鞋子的大小的时候,只需要设置下盒子的宽度(因为是块级元素所以必须设置宽度),如果是行内元素的话,我们并不需要设置盒子的大小。

如下是怪异盒子的CSS样式:

div[class ^= "hezi2"]{
    width:130px;
    height: 130px;
    margin-left: 100px;
    margin-top:20px;
    box-sizing: border-box;
}

设置怪异盒模型:只需要将盒子的 box-sizing设置为border-box,这是我们发现盒子的大小不在随鞋子(内容)的大小而改变,而是必须由盒子自己来控制它的大小。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值