盒模型

作者: 小周师傅 | 来源:发表于2016-07-14 18:33 被阅读0次

    1.盒模型包括哪些属性

    内容content、内边距padding、边框border、外边距margin

    • 内边距、边框、外边距可以应用于一个元素的所有边,也可以应用于某一边。
    • 外边距还可以是负值
    • 外边距叠加:当两个或更多个垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。
    • 行内元素上下margin无效,上下padding撑开空间,但不占用空间。左右margin、padding有效。

    2.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

    让块级元素内部的行内元素(如文本和图片)水平居中。

    3.如果遇到一个属性想知道兼容性,在哪查看?

    caniuse上查看

    4.IE 盒模型和W3C盒模型有什么区别?

    W3C盒子padding、border所占的空间不在width、height范围内,IE的盒模型width包括content+padding+border


    ![](https://img.haomeiwen.com/i2350909/7434d477ab50d653.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    5.以下代码的作用?兼容性?

    box-sizing: border-box;
    }
    

    此时元素的width和height决定了盒模型宽高。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
    如图示,


    相关文章

      网友评论

          本文标题:盒模型

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