CSS属性

宽和高

宽和高是设置整个标签的宽和高

• width属性可以为元素设置宽度。

• height属性可以为元素设置高度。

• 块级标签才能设置宽度，内联标签的宽度由内容来决定。.

• background-color,background-img: url('文件路径）
  

字体相关

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

字体大小

• font-size

字重（粗细）

• font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细

100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

文本相关

文本颜色

• text-color

文本对齐

• text-align 属性规定元素中的文本的水平对齐方式。
  align：排列方式

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

• text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

首行缩进

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片，减少频繁的图片请求

边框

border-radius

display属性

用于控制HTML元素的显示效果

值	意义
display:‘none’	HTML文档中元素存在，但是在浏览器中不显示
display:‘block’	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display:‘inline’	按行内元素显示，此时再设置元素的width, height, margin-top,margin-bottom和float属性，都没有效果
display:‘inline-block’	使元素同时具有行内元素和块级元素的特点

行级标签成了块级标签

CSS盒子模型

每个元素都可以设置框模型，只是有的是隐藏的，如表格中的元素，margin就是隐藏的。盒子模型，好比这个元素像盒子一样，一个盒子一个盒子打开，最终里面那个盒子就是内容。最外面那个盒子是外边距，其次是边框，然后是内边距，最后是内容。

• 行内标签不能设置长和宽，因为是内容决定的长和宽。

• 外边距可以是负值，而且在很多情况下都要使用负值的外边距

• 背景应用于由内容和内边距、边框组成的区域。

• margin： 用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

• padding： 用于控制内容与边框之间的距离

• Border（边框）padding外和外边距之间的边框

• Content（内容）：盒子的内容，显示文本和图像
  如图
  
  

margin外边距

.margin-test {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 15px;
	margin-left: 20px;
	}

推荐使用写：

.margin-test {
margin: 5px 10px 15px 20px;
}  /*以顺时针顺序为准*/

常见居中：

.mycenter {
margin: 0 auto;
}

pading内填充

float

在CSS中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素，特点

• 浮动的框可以向左或向右移动，（不能向上或向下浮动）直到它的外边缘碰到包含框或另一个浮动框的边框为止
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样,显示效果是浮动框覆盖在普通流的框的上面。

三种取值

• left：向左浮动
• right：向右浮动
• none：默认值，不浮动
  参考实例
  

例
现在我想让左边浮动图片，右边浮动内容，在一个背景色中，
代码如下

此时的问题是如何让包围元素在视觉上包围浮动元素呢？需要在这个元素用clear，在此元素内添加一个新有的空元素，然后清理空元素左右两边的浮动。

float 副作用

由于float会浮动在html文档流外，就是运行时会跳过float属性，而浮动在内容之上，且上例中c1类中没有内容，宽和高都为0，所以下面的文本就占据了原本属于c1的位置。解决方法是在c1的末尾加入一个空白内容，且设置clear属性为both，左右两边都不允许有浮动元素，就会另起一行。此时c1的高度就撑起来了

clear

clear属于规定的元素的哪一侧不允许其他浮动元素
只要元素写上clear属性，如left，就是这个标签左边不能有浮动元素。

值	描述
left	这个便签左侧不允许浮动元素。
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

属性只会对自身起作用，不会影响其他元素

overflow溢出属性

值	描述
visible	默认值，内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
inherit	规定应该从父元素继承overflow属性的值

• overflow （水平和垂直均设置）
• overflow（设置水平方向）
• overflow-y（设置垂直方向）
  

position定位

• static
  static默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left，top等值不起作用
• relative（相对定位）
  相对定位是对于该元素在文档流中的原始位置，即以自己原始的位置为参照物，
  有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有原来的位置，即占据文档流空间，对照遵循正常文档流，但将依据top， right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  position：relative的一个主要用法：方便绝对定位元素找到参照物。

相对定位

• 绝对定位
  定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么他的位置相对于最初的包含块，即body元素。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，元素定位后生成一块级框，而不论原来它在正常流中生成何种类型的框。
  
• fixed（固定）
  fixed：固定定位以浏览器窗口为参照物，top：上端与浏览器最上端的距离
  对象脱离正常文档流，使用top， right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动，而其层叠通过z-index属性定义，注意点：一个元素若设置了position：absolute|fixed;则该元素就不能设置float，因为这是两个不同的流，一个是浮动流，一个是定位流，但relative却可以，因为它原本所占的空间仍然占据文档流。
  
  
  参考：http://www.w3school.com.cn/css/css_positioning.asp

z-index

设置对象的层叠顺序，数值大的会覆盖在数值小的标签上，z-index仅能在定位元素上凑效

opacity

用来定义透明效果，取值范围是0~1， 0 完全透明，1 完全不透明