[转]CSS学习笔记（对比一下）

DIV+CSS
1、将英文字体设置在前，中文字体设置在后 font-family:"Arial","黑体";
 line-height :设置行高
**想让文字在垂直方向上居中，将行高设置为元素的高度，行高==元素高度（文字内容不能超过元素的宽度，即不能换行）
 font-weight:文字加粗

2、导入样式表
<style type="text/css">
 @import url("");
</style>
 1、导入式会占用html空间
 2、有些浏览器解析会有问题，即浏览器会最后读取@import中的内容  ~~旧的浏览器不支持 @import , @import是CSS2.x的东西 @import的样式会最后加载
 ps：可将多个css文件通过@import url("");放到一个总的css文件中，最后网页调用总的css

~~~@import 有助于模块化管理css 但目前而言弊大于利，还是用link引入外部css比较好！

2、选择器（名称不要以数字开头）
 id选择器针对某一个元素，具有唯一性#id
 class选择器针对一类元素，可以不唯一.class
 同一个元素用多个类类名与类名之间用空格隔开

3、继承（子元素继承父元素的样式）--覆盖（相同样式子元素覆盖父元素，后面的样式会覆盖前面的样式）
 css定义位置和优先级
 内联式【行内样式】>>内嵌样式【内部式】>>链接式【外部式】>>@import导入式

4、选择符优先级
行内>>id>>class>>标签选择符
可以采用!important语法来提升重要性（IE6不支持)

~~~ color:red !important的优先级比行内样式 style="color:blue;" 还要高

5、font-style:italic/normal;斜体、正常
 text-decration:none/underline/overline/line-through/blink(火狐支持);文本修线
 letter-spacing:字符间距
 word-spacing:单词间距（对空格起作用）~~~letter-spacing  word-spacing
 text-indent:设置文本对象缩进（可为负数）；
 text-align:文本对齐方式
 white-space:normal(自动换行)/pre(换行和空白受保护)/nowrap(强制在同一行显示)
 a:link未访问的链接
 a:hover鼠标停留在链接上
 a:active点击链接式
 a:visited访问过后
 L-V-H-A去设置链接样式  ~~ 爱恨原则
 a.类名称:状态
 a:focus设置对象在成为输入焦点时的样式

6、命名语义化
~~~语义化包括 语义化标签的选择，id class的语义化命名, 语义化的注释  语义化的好处：可读性 可维护性 搜索引擎友好性

7、盒子模型  (~~~quirks mode : borderBox, standards mode: contentBox)
 盒子内容content
 盒子边框border
 盒子内容与边框距离padding：
 盒子与盒子距离margin
 盒子所占宽度是由：左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容 （content）+右填充（padding-right）+右边框（border-+right）+右边界（margin-right）
 盒子属性：
 width:宽度    height:高度
 margin:（如果是一个参数上下左右；两个参数上下、左右；三个参数上、左右、下；四个参数上、右、下、左；）
 使用外边距浏览器兼容性除了值为0的，所有非零的值都要加单位
 由于各个浏览器存在内外边距的默认值还不同我们需要将所有浏览器的默认值都从零开始
 ul{padding-left:10px;}
 list-style:有兼容性问题
 水平居中：maigin: 0 auto;
 调试时可以适当加背景颜色
 line-height：设置为行高可以使文字垂直居中
 text-indent:文本缩进

8、css中元素分类
 块状元素（可以通过{display:block}去改变）div、p 一般是其他元素的容器，可以容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（width）与高度（height）起作用，常见块 状元素为div、p、body、h1-h6 ul li 等
 块状元素很霸道：能设宽和高，独占一行
 内联元素（可以通过{display:inline}去改变）只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度和高度不起作用，常见内联元素为a、em、span等
 内联元素很温柔：不能设宽和高，不影响换行
如何内联元素的宽和高起作用：设置属性display:block;
  图片是内联元素，但是可以调宽度和高度

9、css控制背景
 background:颜色 图片 平铺方式 固定方式 位置
 background-color:背景颜色
  background-image:url()背景图像
 background-repeat:repeat/no-repeat/repeat-x/repeat-y背景图像的重复方式
 background-position:top(left/center/right) center(left/center/right) bottom(left/center/right),x坐标 y坐标（第一个值是水平位置，第二个值是垂直位置。）
 background-attachment:scroll/fixed背景图像的依附方式(IE6只有html与body支持此属性)
 css精灵技巧主要是为了减少http请求

10、css布局
 1、默认按文档流的顺序
 2、浮动布局方式float:none/right/left;
 浮动是将块元素的霸道属性独占一行的行为取消，允许别人与其一行，即将这个块从原来的文档流模式中分离出来，它后面的对象就视它不存在。（float:left;在IE6、7中会出现兼容性问题）
 浮动浮动，先浮后动
 浮动之后会对父元素或者后面的元素产生影响：
  要清除对父元素或者后面的元素的影响clear:none/left/right/both
 当父元素没有指定高度时，并且它的子元素有浮动时，父元素的高度不会增加
 

清除浮动影响的方法：
 1、额外标签法（会增加代码量）
  最简单的一种，W3C建议在容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素
 <div id="main">
  <div id="left">左盒子</div>
  <div id="right">右盒子</div>
  <div class="clear"></div><!--增加一个空盒子 最后一个浮动子元素后面增加 div 设置 clear:both, 或 <br /> 设置clear:both; -->
 </div>
 <div id="footer">底部</div>
 2、给父元素加overflow的方法 (父元素 overflow:hidden; zoom:1)
 通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现 
 overflow:hidden;zoom:1;position:relative;
 ps:css溢出处理
 overflow:visible(默认值，不剪切内容也不添加滚动条)，auto(在必须的时候对象内容才会背裁剪或显示滚动条)，hidden(不显示超过对象尺寸的内容)，scroll(总是显示滚动条)
 3、利用伪对象:after方法
  定义一个类，使用伪对象after,清除浮动元素影响
 网上最流行的清除浮动代码
 .clearFix:after{
  clear:both;
  display:block;
  visibility:hidden;隐藏
  height:0;
  line-height:0;
  content:".";
 }
 .clearFix{zoom:1};/*解决IE6/7高度自适应兼容问题*/ ~~~针对父容器高度塌陷问题
 

3、定位布局方式
 position:static(静态定位，默认值),
absolute(绝对定位,将对象从文档流中分离出来，通过设置left/right/top/bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父级对象，则依据body对象)，
relative(相对定位，对象不从文档流中分离，通过设置left/right/top/bottom四个方向相对于自身位置进行相对定位)
 当我们想要用绝对定位时，必须要有两个条件
 1、必须给父元素加定位属性，一般建议使用position:relative
 2、给子元素加绝对定位position:absolute;同时要加方向属性
 相对定位与绝对定位区别
 绝对定位是以父元素为基准点进行定位--会脱离文档流
 相对定位是根据其自身为基准点进行定位--离开原位置，但还占着原来的空间

 h1{font-size:1em;}

 IE6双倍边距问题margin-left:100px;float:left;
 修改时只需加上diaplay:inline;

IE6 3像素BUG 浮动元素和不浮动元素之间