1.css
cascading style sheet 层叠样式表
2.css权重（256进制）
权重值
!important (infinity)
行间样式 （1000）
id (100)
class | 属性 | 伪类 （10）
标签 | 伪元素 （1）
通配符 （0）
3.设置字体颜色方法：
- 土鳖式：纯英文单词 red green yellow
- 颜色代码：#ff0
- 颜色函数: rgb(0-255,0-255,0-255)
4.内联式css样式
<p style="color: red"> </p>
5.嵌入式css样式
<style type = "text /css">
span{
color:red;
}
</style>
6.外部式css样式
<link href = "xxx.css" rel = "stylesheet" type = "text / css" /> (要写在<head>标签内)
7.css选择器
标签选择器：无论标签在哪，无论被套了多少层，都能被选出来 <html> <body> <h1> <p>
类（class）选择器：以 . 形式
id选择器： 以 # 形式
选择器的权重： id选择器 > class选择器 > 标签选择器
8.删除线的表示形式
text-decoration:line-through 或 <del></del>
9.定位
- 绝对定位：position：absolute
脱离原来位置进行定位，相对于最近的有定位的父级进行定位，没有最近的有定位的父级就相对于文档定位。
- 相对定位：position：relative
保留原来位置进行定位，相对于自己原来的位置进行定位
- 固定定位：position：fixed
比如广告定位，滚动条动它也不动
10.两栏布局（一侧定宽，一侧自适应）
body中有一个默认的margin：8px
float：left margin-left： xx px；
.m-box .left{float:left; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px; background-color:#666;}
- position+margin
.m-box .left{position: absolute; width:200px; background-color:#ccc; } .m-box .right{margin-left:210px; background-color:#666;} - float+ -margin
<style type="text/css"> html,body{margin:0; padding: 0;} .m-box .cont,.m-asider { height: 200px; line-height:200px; text-align:center; }.m-box { float:left; width: 100%;} -
.m-box .cont {margin-left:210px;background-color: #ccc;} .m-asider {float: left; width: 200px; margin-left: -100%; background-color: #ccc;} </style> <div class="m-box"> <div class="cont">右</div> </div> <div class="m-asider">左</div>
11.三栏布局（两侧定宽，中间自适应）
- float + margin
<div class="left">左</div> <div class="right">右</div> <div class="center">中</div>
.left {float:left; width: 200px; background-color: #ccc;}
.right {float:right; width: 200px; background-color: #ccc;}
.center { margin: 0 210px; background-color: #666;}
- position+margin
.left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;} .right {position:absolute; top:0; right:0; width: 200px; background-color: #ccc;} .center { margin: 0 210px; background-color: #666;} - float+ -margin
<div class="m-box"> <div class="center">中</div> </div> <div class="left">左</div> <div class="right">右</div>
.m-box { float:left; width: 100%;}
.m-box .center {margin:0 210px;background-color: #666;}
.left,.right {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
.right {margin-left: -200px;}
- float + position + margin
<style type="text/css"> html,body{margin:0; padding: 0;} .m-box{ height: 200px; line-height:200px; text-align:center; background-color: #ccc;} .warp1{float:left; width:50%;_margin-right:-3px;} .warp2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;} .m-box1{ margin-right:100px;} .m-box2{margin-left:100px;} .m-box3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;} </style> </head> <body> <div class="warp1"> <div class="m-box m-box1">左</div> </div> <div class="warp2"> <div class="m-box m-box2">右</div> </div> <div class="m-box m-box3">中</div> - position+margin
<div class="m-center">中</div> <div class="left"> <div class="main">左</div> </div> <div class="right"> <div class="main">右</div> </div> -
<style type="text/css"> html,body{margin:0; padding: 0;} .main,.m-center { height: 200px; line-height:200px; text-align:center; } .m-center { z-index: 2; background-color: #666; width: 500px; margin-left: -250px; position: absolute; top: 0; left: 50%; } .left, .right { z-index: 1; position: absolute; top: 0; width: 50%; } .left { left: 0; } .left .main { margin-right: 250px; background-color: #ccc; } .right { right: 0; } .right .main { margin-left: 250px; background-color: #ccc; } </style>
12.等高布局
float + margin + position（两列等高布局）
.wrap { width: 950px; margin: 0 auto; background: #ccc; }
.content { margin-left: 150px; border-left: 1px solid #666; background: #ddd; }
.main { float: left; width: 100%; }
.side { float: left; width: 150px; margin-left: -950px; position: relative; }
float + position（三列等高布局）
html,body{margin:0; padding: 0;}
.fl { float: left; }
.container3 { background:green; overflow: hidden; position: relative; }
.container2 { background:yellow; position: relative; right: 30%; }
.container1 { width: 100%; background:red; position: relative; right: 40%; }
.col1 { width: 26%; position: relative; left: 72%; overflow: hidden; }
.col2 { width: 36%; position: relative; left: 76%; overflow: hidden; }
.col3 { width: 26%; position: relative; left: 80%; overflow: hidden; }
13.流式布局
float position
float：left position：absolute\
14.bfc
15.浮动流
为什么会产生浮动流？？怎么清楚浮动流？？
