您的当前位置:首页正文

盒模型基础问题

来源:花图问答

盒模型包括哪些属性

  • 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....)组成的内容水平居中。

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

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

盒模型的计算方法有两种

  • IE盒模型
  • W3C盒模型

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


我是图

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

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


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