盒模型

作者: 饥人谷_吴亚敏 | 来源:发表于2016-08-22 16:02 被阅读0次
    盒模型包括哪些属性?

    盒模型包括:margin、border、padding、content。

    • margin:清除边框区域。margin没有背景颜色,它是完全透明的。
    • border:边框周围的填充和内容。边框是受到盒子的背景颜色影响。
    • padding:清除内容周围的区域。会受到框中填充的背景颜色影响。
    • content:盒子的内容,显示文本和图像。
    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

    让块级元素内的行内元素水平居中显示。

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

    Can I use

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

    IE的盒模型与W3C盒模型的区别在与width的计算。

    盒模型图解

    W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
    IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

    以下代码的作用?兼容性?
    *{ box-sizing: border-box;}
    

    以上代码设置了所有元素的内边距和边框都将在已设定的宽度和高度内进行绘制。
    设置他以后,border和padding全会在你设置的宽度内部,比如手机端设置两行并列的布局,宽度各为50%,如果不用这个属性,设置border后右边的div会下来错位,设置这个属性,宽度还是50%而不是50%+*px,两行可以并列显示。

    兼容性
     
     
     
     
    本教程版权归作者和饥人谷所有,转载须说明来源!

    相关文章

      网友评论

        本文标题:盒模型

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