本教程版权归凯旋和饥人谷所有,转载须说明来源
一 、盒模型包括哪些属性
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的
上 . 左. 下. 右(value)。
Content(内容) - 盒子的内容,显示文本和图像。
二 、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
作用在块级元素上,让其子集的行内元素或文本和图片水平居中。
三 、如果遇到一个属性想知道兼容性,在哪查看?
四 、IE 盒模型和W3C盒模型有什么区别?
在W3C盒模型中,一个块级元素的总宽度按照如下的方程式计算:
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
总宽度 = width +margin-left + margin-right
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
在ie6/ie7/ie8版本下,不加<!DOCTYPE html>即为怪异模式
w3c上的参考
参考
参考2
四 、以下代码的作用?兼容性?
*{ box-sizing: border-box;}
页面中所有的盒模型均采用 boxder-box形式,
就是将标准的W3C盒模型转换为怪异模式的盒模型。
参考博客
w3c解读
样图--参考怪异模式和w3c盒模式尾图