Box-Model-Assignment
2016-05-20 本文已影响31人
犯迷糊的小羊
1.盒模型包括哪些属性
以上图为例，去阐述盒模型的各个属性：
- content属性：规定内容区域，在标准盒模型中，宽高有width和height决定
图中
width:500px；height:500px，显示在盒模型中内容区域也是500*500；
- padding属性：规定内边距（内容区域到边框的距离），在CSS中可分为padding-top、padding-right、padding-bottom和padding-left四个细分属性，在具体设置时可简写为padding
图中
padding:5px，表示上下左右的内边距均为5px，正如盒模型所示；
- border属性：规定元素的边界，常见的border的细分属性有，border-width、border-style、border-color、border-top、border-right、border-bottom和border-left，可简写为border
图中使用简写
border:5px solid black，规定元素的边界为5px/实线/黑色的样式，盒模型中显示border为5px；
- margin属性：规定元素的外边距（元素边框的空白区域），常见的margin的细分属性有margin-top、margin-right、margin-bottom、margin-left
[tip]
还有关于外边距合并以及利用margin属性进行块级元素的垂直居中，在日后的文章再行整理
图中使用
margin:20px 20px的简写表示元素的上下外边距为20px，左右外边距也为20px
2.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- text-align:center的作用是让inline元素水平居中
- inline元素以及block内置的inline元素
- 一般的行内元素
<span>、<img>、<a>等
3.如果遇到一个属性想知道兼容性，在哪查看?
可以去到caniuse.com网站去查询
4.IE 盒模型和W3C盒模型有什么区别?
IE盒模型与W3C盒模型的区别主要在关于宽度的定义上：
- IE盒模型的
宽度=内容区域+padding+边框，常出现在IE6/7/8的混杂模式下 - W3C盒模型的
宽度=内容区域，常出现在chrome/IE9+、IE678的严格模式下
代码
写一个 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>
