css基础笔记

一、文字设置简写：font:

注意点：1、size必须在family里前面，其他样式位置可以变换；2、size和family不能省略，而且两个属性必须在最后面。

二、文本：text

text-decoration:none，常 用于去年a标签的下划线

颜色转换，十六进制第一位*16+十六进制第2位=十进制，F=15，FF=15*16+15=240+15=255.

三、宽高问题

1、在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为: body,html{height:100%}

2、div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。 

四、背景简写

background:背景颜色，图片，平铺方式，关联方式，定位方式。

任意属性都可以省略

五、精灵图

CSS精灵图需要配合背景图片和定位

六、居中

1、一行文字在盒子中居中，设置行高与盒子高度一致即可。

2、多行文字在盒子中居中，盒子高度减所有行高除以2，设置顶部和底部padding。

3、当图片宽度大于盒子宽度时，要使图片居中，可以设置margin:0px -100%;而且父元素必须设置text-align:center;

七、定位

1、绝对定位以body为参考点的时候，是以首屏的宽度和高度为参考点，而不是整个网页；一个绝对定位的元素会忽略祖先元素的padding;

八、页面布局

1、标准流（文档流/普通流）

2、浮动流没有居中对齐，没有center取值，不可以使用margin:0 auto;

　　浮动流中无论是块级元素还是行内元素，都可以设置宽高；

　　浮动流是一种半脱离标准流的排版方式，只有一种排版方式，就是水平排版；

　　字围效果常用于做图文混排；

　　用clear:both;清除浮动，margin无效

   　隔墙法清除浮动：外墙法，中间添加一个块级元素，并设置clear:both;内墙法，在所有子元素后添加一个块级元素并设置clear:both，内墙可以使第一个盒子使用margin-bottom,也可以撑起第一个盒子的高度;这两种方法企业中不常用，推荐使用CSS3的伪元素选择器，标签名称:before/after。

九、换行

 1、word-wrap:break-word;

内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。

 word-break: break-all;/*让英文单词也自动换行*/        即会拆分单词

     letter-space：字母间距

     word-spacing：单词间距

2、text-overflow:ellipsis;超出部分显示省略号。

注意：想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。

十、css样式：文字本身的大小不兼容解决

问题原因：同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的：IE下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。

解决方案：给文字设定 line-height ，确保所有文字都有默认的 line-height 值，才能确保在不同浏览器下字体所占高度是一致的。这点很重要，在高度上我们不能容忍1px 的差异。