盒模型 相关知识点总结

1 . 盒模型包括的属性

• margin:外边距：包含margin-top、margin-right、margin-buttom、margin-left。margin的最基本用途就是控制元素周围空间的间隔,它永远是透明的。
• border：边框：它包括border-top、border-right、border-buttom、border-left。
• padding：内边距：它包括padding-top、padding-right、padding-buttom、padding-left。padding是用来使元素与内容有一定的间隔。
• content：内容元素在网页中，每个元素都被认为是一个矩形的盒子。

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

• text-align: center作用在块级元素上，能让块级元素内的行内元素，文字，图片或者inline-block元素水平居中。

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

在 caniuse查看http://caniuse.com

4 . IE 盒模型和W3C盒模型的区别

IE盒模型的width=content的宽+padding+border (height同理)

W3C盒模型的width=content的宽 (height同理)

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

*{ 
box-sizing: border-box;
}

作用：使整个html页面中 都用ie盒模型渲染页面
所有元素的宽度=内容宽+左右内边距+左右边框。高度=上下内边距+上下边框+内容高。便于计算。
兼容性：

Paste_Image.png

代码

6 . 写一个 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>

- 代码