变态盒模型

最新推荐文章于 2019-10-13 14:09:28 发布

ztt0918

最新推荐文章于 2019-10-13 14:09:28 发布

阅读量368

点赞数

分类专栏：变态盒模型文章标签：变态盒模型

本文链接：https://blog.csdn.net/ztt0918/article/details/70228131

版权

变态盒模型专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        header{
            height: 100px;
            background-color: #cccccc;
        }
        section{
            background-color: aquamarine;
            height: 400px;
        }
        #child1{
        width: 30%;
            height: 100%;
            background-color: #FF6500;
            float: left;
            /*margin border padding 这三个属性都会影响页面布局，contain不变，
            实际宽度为在contain的基础上加上margin，border和padding。
            但当遇到变态盒模型border-box ,
            页面添加padding或者border,不会影响页面布局，
            只会挤压页面内容content*/
            border: 10px solid red;
            padding: 10px;
            /*变态盒模型*/
            box-sizing: border-box;
        }

        #child2 {
            width: 40%;
            height: 100%;
            background-color: bisque;
            float: left;
        }


        #child3{
            width: 30%;
            height: 100%;
            background-color: burlywood;
            float: left;
        }
    </style>
    <title></title>
</head>
<body>
<header></header>
<section>
    <div id="child1">
        笑的大方，走的坦荡。笑的大方，走的坦荡。
        笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。
        笑的大方，走的坦荡。笑的大方，走的坦荡。
        笑的大方，走的坦荡。笑的大方，走的坦荡。
        笑的大方，走的坦荡。
        笑的大方，走的坦荡。
    </div></div>
    <div id="child2"></div>
    <div id="child3"></div>
</section>
</body>
</html>

若去掉box-sizing: border-box;
则布局错乱。

ztt0918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变态盒模型

html>html lang="en">head> meta charset="UTF-8"> style> header{ height: 100px; background-color: #cccccc; } section{ background-col
复制链接

扫一扫

专栏目录