CSS--怪异盒子模型

CSS–怪异盒子模型

怪异盒子模型
  • 标准盒子宽度计算方法(扩张主义)
    • border-left-width+width+padding-left+padding-right+border-right-width
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
       div {
           width: 100px;
           height: 100px;
           border-left: 8px solid red;
           border-right: 3px solid red;
           
           padding-left: 20px;
           padding-right: 20px;
           
           margin-left:100px;
           margin-right: 20px;
           background-color: #368;
       }
    </style>
    </head>
    <body>
    	 <div></div>
    </body>
    </html>
    }
    
  • 怪异盒子模型(压缩主义)
    • 当内边距和边框宽度相加 < 内容 width 的时候,总宽度 就是 width 的值,会压缩content内容区域
    • 当内边距和边框宽度相加 > 内容 width 的时候,总宽度为 内边距+边框 内容content区域为0
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            box-sizing:border-box;
            
            width: 100px;
            height: 100px;
            border-left: 8px solid red;
            border-right: 3px solid red;
            
            padding-left: 20px;
            padding-right: 20px;
            
            margin-left:100px;
            margin-right: 20px;
            background-color: #368;
        }
    </style>
    </head>
    <body>
     	 <div></div>
    </body>
    </html>
     }
    
  • 两种盒子模型的区别
    • 用途:正常盒子模型主要用于pc端。怪异盒子模型主要用于手机端
    • 原理:正常盒子模型大小是由内而外的,由内部决定外部大小;而怪异盒子模型是由外而内的。
    • box-sizing:border-box开启怪异盒子模型;
      常规盒子模型:box-sizing:content-box
怪异盒子模型的应用
  • 当父盒子无边框时,子盒子增加 margin 会造成外边距穿透 在这里插入图片描述
    • 解决方法:给父盒子设置padding: 10px 0;
  • 实现子元素水平居中方法:
    • 子元素设置margin: 10px atuo;(当子元素多时,该方法耗费计算力,每个子元素都要计算)
    • 父元素设置padding: 0 10px;(该方法需要重新更改父盒子 width 大小)
    • 调用怪异盒子模型,父元素设置padding: 0 10px;,此时不需要更改父盒子 width 大小,但是不能设置内容宽度,此时 width 是总宽度
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="tset">
    <mata name="descriptions" conten="This is a website for a test">
    <!-- <meta http-quiv="Page-Enter" content="revealTrans(reveal)"> -->
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            box-sizing: border-box;
            width: 400px;
            margin: 30px auto;
            padding: 10px 10px;
            /* border: 1px solid red; */
            background-color: #368;
        }
        .wrap {
            width: 380px;
            height: 40px;
            margin: 10px 0;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            border: 1px solid black;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
            <li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

  • 正常盒子和怪异盒子的记忆方法
    border=皮 padding=肉 content=骨骼
    • 正常盒子:肉增加,皮有弹性,会撑大,总体增大
    • 怪异盒子:皮紧绷,定死,肉增加,会往里压缩骨骼
  • 怪异盒子解决的一个问题:

    正常盒子下,当增加内边距时,如果想保证盒子和之前一样大,需要手动重新计算 width ,怪异盒子模型则省略该步

  • 为什么会采用怪异盒子模型

    因为父盒子无边框时子元素增加 margin 会造成外边距穿透,此时需要给父盒子添加 padding ,添加 padding 会增大父盒子,需要手动重新计算父盒子 width ,因此利用怪异盒子模型省略重新计算 width 这一步。

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值