CSS--怪异盒子模型

最新推荐文章于 2023-06-28 13:05:45 发布

{丸の子}

最新推荐文章于 2023-06-28 13:05:45 发布

阅读量370

点赞数

分类专栏： Web系统开发 HTML5 文章标签： css 前端 css3

原文链接：https://blog.csdn.net/m0_56123958/article/details/123444795

版权

Web系统开发同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML5

18 篇文章 0 订阅

订阅专栏

怪异盒子模型

标准盒子宽度计算方法（扩张主义）

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 这一步。

{丸の子}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--怪异盒子模型

因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。正常盒子下，当增加内边距时，如果想保证盒子和之前一样大，需要手动重新计算 width ，怪异盒子模型则省略该步。当父盒子无边框时，子盒子增加 margin 会造成外边距穿透。解决方法：给父盒子设置padding: 10px 0;
复制链接

扫一扫