任务9-1-盒模型

1.盒模型包括哪些属性

盒模型包含
margin外边距,
border边框,
padding内边距,
content内容

box1.jpg

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

进行水平居中，作用在块级元素上，让块级元素中的行内元素或者行内块级元素进行水平居中
水平居中

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

当然要使用caniuse啦

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

IE的盒模型的计算方式是：margin+（border+padding+content），width显示的就是整个盒模型的宽度
W3C盒模型的计算方式是：margin+border+padding+content，width显示的只是内容的宽度

使用声明这个网页使用的是W3C的盒模型计算方式

盒模型区别.jpg

如果内容超过了宽度的演示

4.以下代码的作用？兼容性？

 *{ 
 box-sizing: border-box;
 }

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

W3C下的box-sizing属性

代码演示
caniuse兼容性
Internet Explorer8以上、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 需要替代的 -moz-box-sizing 属性。

此文章由饥人谷_李子豪及饥人谷所有