html盒子模型作业,CSS盒模型作业

盒模型.png

前言：本章主要讲CSS盒模型，CSS盒模型是CSS中most import 的一个概念，如果我们想学好CSS，那么CSS盒模型绝没跑在。这篇文章中，我们将深入地探讨CSS盒模型。

1.盒模型包括哪些属性?

盒模型 (2).png

以上图为例，阐述盒模型属性：

content属性：规定内容区域，在标准盒模型中，宽高有width和height决定。如图内容区域为”300*300“。padding：内边距，也称”补白“，定义元素边框与元素内容之间的空白区域。

1.接受长度值或百分比值，但不允许使用负值

2.会受到框中填充的背景颜色影响

3.padding-top,padding-right,padding-bottom,padding-left

border:规定元素的边界.

常见的border的细分属性有，border-width、border-style、border-color、border-top、border-right、border-bottom和border-left，可简写为border

margin:规定元素的外边距(元素边框的空白区域)。

常见的margin的细分属性有margin-top、margin-right、margin-bottom、

margin-left

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

作用：水平居中；作用在块级元素上；能够使inline元素和line-block元素水平居中。

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

caniuse

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

IE浏览器：ie678怪异模式(不添加 doctype)使用 ie 盒模型，”宽度=边框+padding+内容宽度“chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度

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

代码兼容性.png

含义：width 与 height 包括内边距(padding)与边框(border)，不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型 。

作用：使width与height包括(padding)与边框(border)，便于计算模型的大小。

caniuse使用.png

6.代码

代码作用

感谢观众：

苏菲玛索.jpg

本教程版权归饥人谷peter和饥人谷所有，转载须说明来源