第九弹-1-盒模型

一、盒模型包括哪些属性

定义：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括内外边距、边框、填充、和实际内容。
包含属性：
Margin ：清除边框区域,Margin没有背景颜色，它是完全透明;
Border ：边框属性;
Padding ：清除内容周围的区域,会受到框中填充的背景颜色影响;
Content：盒子的内容,显示文本和图像;
下图为一个简单的盒子实例：

1.png

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

• text-align: center的作用：
  　　使元素文本内容水平居中，一般作用在块级元素上，使块级元素内部的行内元素在占据范围内居中显示，它居中是相对其父容器的空间范围居中的；

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

查询CSS属性的兼容性一般使用can i use网站；
如图，输入inline-block，查询结果，绿色块标示代表对应浏览器可以支持：

can i use

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

W3C盒模型（标准盒模型）：chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度，如下图：

标准盒模型

IE 盒模型：ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度，如下图：

ie盒模型

五、以下代码的作用？兼容性？

以下为代码及其作用备注：

  *{
    box-sizing: border-box;/*指定元素边框盒子，内边距和边框被包含在设定的宽高内部*/
  }

兼容性：

box-sizing兼容性查询结果

六、写一个 btn 的class， 任何 a,span,div,button添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31)

  <a class="btn" href="#">确定</a>
  <span class="btn" >取消</span>
  <div class="btn">提交</div>
  <button class="btn"> 发送</button>

代码题

编写的代码及运行结果如下图：

代码题解答

　　　　　　　　声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！