美文网首页
盒子模型详解

盒子模型详解

作者: 琪33 | 来源:发表于2018-04-25 10:54 被阅读0次
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top:20px;
        }
        .box2,.box3{
            border:25px blue solid;
            padding:25px;
            /* 设置的放内容区域大小*/
            /*外加模式*/
            box-sizing: content-box;
        }
        .box2{
            /* 设置盒子模型中最大盒子大小,如果在加paddig border 只会减小放内容的区域*/
            /*内减模式*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

相关文章

  • 2019-05-05

    基于CSS盒子模型及其CSS定位详解 CSS盒子模型 效果显示 盒子模型的简单应用 效果显示: CSS定位 效果显示

  • 盒子模型详解

    盒子模型是布局里面重要的一个知识点,把这个知识点吃透了,就可以很好的布局。 盒子模型有两种: 1.标准模型(con...

  • 盒子模型详解

  • CSS盒子模型详解

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 css盒子模型 ...

  • 面试题(DAT)

    1.什么是盒子模型?盒子模型有两种,标准盒子模型和IE盒子模型。标准盒子模型:width = content + ...

  • 【IMWeb秋招训练营】【Day1】面试题总结

    1.什么是盒子模型? 盒子模型有两种,标准盒子模型和IE盒子模型。 标准盒子模型:width = content ...

  • CSS盒子模型

    标准盒子模型 IE盒子模型 区别 在我看来标准盒子模型也就是: IE盒子模型:

  • 前端面试之HTML+CSS(八股文)

    1. 盒子模型,普通盒子模型和怪异盒子模型有什么区别? 答:普通盒子模型又称标准W3C盒子模型,标准盒子模型的Wi...

  • css基础问题

    介绍css的盒子模型 css的盒子模型有两种:IE盒子模型,W3C盒子模型盒子模型:内容(content),内边距...

  • CSS盒模型概述

    盒子模型: 盒子模型,又称框模型 (Box Model) 盒子模型主要的属性:width、height、paddi...

网友评论

      本文标题:盒子模型详解

      本文链接:https://www.haomeiwen.com/subject/ehrdlftx.html