美文网首页
盒模型基础问题

盒模型基础问题

作者: 羞涩的涩 | 来源:发表于2016-05-11 18:53 被阅读44次

    盒模型包括哪些属性

    • margin 外边距,有四个方向
    • top 上
    • right 右
    • bottom 下
    • left 左
    • padding 内边距,有四个方向
    • top 上
    • right 右
    • bottom 下
    • left 左
    • border 边框,有四个方向
    • top 上
    • right 右
    • bottom 下
    • left 左
    • content 内容

    盒模型的宽带=左外边距+左边框宽度+左内边距+内容+右内边距+右边框宽度+右外边距


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

    text-align: center的作用是让元素内容水平居中,主要作用于块级元素、表单格元素里的行内元素组成的内容(对块级元素本身不起作用).
    能够让块级元素内所有的由行内元素(a、span、img、input....)组成的内容水平居中。

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

    在这个链接http://caniuse.com/ 框内查询其兼容性。

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

    盒模型的计算方法有两种

    • IE盒模型
    • W3C盒模型

    它们的区别在于对width的计算。如下图:


    我是图

    从图上可以看出W3C的盒模型里width宽度只包含了内容,而IE盒模型的宽度包括了padding和border宽度。这就造成了我们计算空间大小时在不同的浏览器下会造成偏差。

    所以我们要使用<!DOCTYPE html>
    声明避免进入IE盒模型。

    参考博客:
    http://blog.csdn.net/sunhengzhe/article/details/46679595


    • 本博客版权归羞涩的涩和饥人谷所有,转载请注明出处

    相关文章

      网友评论

          本文标题:盒模型基础问题

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