CSS应用

1.CSS文本

字体大小	font-size
字体粗细	font-weight
字体颜色	color
文本修饰	text-decoration
行高	line-height
文本的缩进	text-indent
文本对齐	text-align
背景重复	background-repeat
背景是否滚动	background-attachment
背景定位	background-position

2.CSS盒模型

属性	含义
width	设置元素的宽度属性。
height	设置元素的高度属性。
padding	设置元素的内边距属性。
border	设置元素的边框属性。
margin	设置元素的外边距属性。
box-sizing	定义元素总体宽度的计算方式。

盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看
作一个盒子，拥有盒子一样的外形和平面空间。
盒模型的平面图片如下图所示：

margin

语法：margin-top|right|bottom|left: length;
每个块元素有上、右、下、左四个方位的外边距，可以分别用四种属性
来声明。
margin-top:10px;/设置上边距10px/
margin-right:10px;/设置右边距10px/
margin-bottom:10px;/设置底边距10px/
margin-left:10px;/设置左边距10px/

1）.main{margin:10px 20px 10px 20px;}这四个值分别设置类名为main的模块上、右、下、左四个方位外边距的值。
2）.main{margin:10px 20px;}这两个值分别设定类名为main的模块的上下、左右的外边距
3）.main{margin:10px 20px 10px;}第一个值设定上外边距，第二个值设定左右外边距，第三个值设定下外边距
4）.main{margin:10px;}如果就一个值的话，就设定了四个方向的外边距都10px
5）.main{ margin:20px auto;}这样设值的意思是上下两个方位的外边距为20px，左右两个方位的外边距自动适应居中

margin属性的bug

margin横向上是加法，但在竖向上却会产生叠加的现象,并会取上下间
距的其大者生效。

IE6下的横向双倍margin bug

IE6会在特定的条件下，将设置的横向margin值变成双倍。条件：
1.元素必须浮动（float）;
2.元素必须具有横向margin，margin-left、margin-right
3.元素必须块元素
4.浏览器必须是ie6

解决办法：

设置子元素与父元素之间的间距时如果使用margin会产生塌陷（父子层一起移动）

原理：当父元素内容为空时，为子元素添加margin-top会导致父子的上边出现合并现象。

解决方法1：给父元素设置overflow：hidden；或者float:left;

解决方法2：设置边框

解决方法3: 父子间间距不建议使用margin 最好使用padding

padding

相对于外边距而言，元素也应该具有内边距。
padding-top|left|bottom|right:length;
padding属性定义元素边框与元素内容之间的空白区域。

padding的几种写法和margin是一样的。

border

元素的边框是围绕元素内容和内边距的一条线或多条线
语法：border-top|right|bottom|left:border-width|
border-style|border-color;
border简写属性，用于把边框的所有属性设置到一个声明中。

display

规定元素应该声称的框的类型
语法：display:block|none|inline
block:该元素以块属性显示
none:该元素隐藏，不会被显示
inline:以行内属性显示
inline-block: 两种结合显示

标准模式

标准模式的盒模型是由w3c提出，它的计算方法是:占的空间的宽度
等于内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边
距的宽度

怪异模式

由于各个浏览器设计的不同，盒模型在不同的浏览器中的表现
也不同：怪异模式是指在IE6及更早的IE版本下盒模型的计算方
法：所占空间总宽度等于内容＋外边距

标准模式与怪异模式的异同点

相同点：都是由margin ,border,padding,content组成

不同点：计算宽/高度方法的不同，标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；怪异模式下：总宽度是由content加上外边距得来的。

box-sizing（现代浏览器支持，IE8之上支持）

box-sizing ： content-box || border-box || inherit
1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）