css+div
看完韩顺平老师讲解的css+div,讲的非常好
部分摘录笔记，还待自己整理
1、css层叠样式表
2、 div+css是网站标准
div是用于存放内容的（文字、图片等等）
css主要用于说明div中的内容的样式（大小，颜色，背景，位置）
好处：1、减少大量的table，tr，td html变简单
2、内容和样式分离
3、符合搜索引擎的喜好
4、节约带宽
3、初识CSS
〈span style=""font-size:N;color:Color;等等〉〈/span〉
<元素名 style=“属性名：属性值；”/>
使用CSS可以统一网站风格
写五个栏目
几个图片是灰色 img{ filter:gray;} a:link a:hover鼠标停在上面
4、选择器 <link type="text/css" rel="stylesheet" href="my.css"/>
.style就是类选择器
.类选择器名{
属性名：属性值；
}
案例：五个新闻
id选择器
基本用法：
#id选择器名{
属性名：属性值；
}
<元素名 id=“id选择器的名称”></元素名>
html选择器
body{
属性名：属性值；
}
结论：当一个元素同时被id选择器，类选择器，html选择器使用时
id>类>html 选择器
a:link {}
a:hover{} 鼠标放在超链接上面
a:visited {} 超链接被点击完之后
通配符选择器 *{ margin: padding: }设置页面距离
父子选择器 #style #style+已经存在的标记 如span
<span id="">123<span>456</span></span>
**父子选择器可以有多级
*父子选择器适用于id选择器和类选择器
一个元素最多有一个id选择器，但可以有多个类选择器
一个元素有多个类选择器时，用空格分开 当发生冲突时 哪个CSS类型写在后面就以谁为主
<span class="style1 style2 style3"></span>
在有些CSS中，我们可以把多个类选择器或者ID选择器共同的部分提出，写在一起，可以简化CSS文件
.style1,.style2,.style3{
color:....;
}
5、块元素和行内元素
行内元素又叫内联元素（inline element）
常见的有元素<span><a> 只覆盖内容宽度，默认不会换行，行内元素一般放文本或其他的行内元素
块元素（block element）
常见的有元素<div><p> 不管内容多少，他都要换行，同时占满整行 可以放文本，行内元素，块元素
将行内元素与块元素相互转换
display：block；所有使用到某某样式的内容都转换为块元素显示
display：inline；所有使用到某某样式的内容都转换为行内元素显示
6、标准流和非标准流
标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素显示在后面，默认的布局方式
非标准流：在实际网页布局中，我们有时需要使用非标准的流的方式布局（让某个元素脱离他本身的位置）
CSS核心内容
7、盒子模型（content \border）
两个元素间的距离称为margin； margin：0 auto；上下边距为0，左右居中
内外两元素之间的距离称为padding（填充）；
border：9px solid color；指定了宽度，样式，颜色
a、html中元素都可以看成是一个盒子
b、盒子模型参照物不一样，则使用的CSS属性也就不一样
c、如果不希望破坏外观，则尽量使用margin，因为padding会撑大盒子，margin如果过大，盒子内容会被挤到外面去，但是盒子大小不变
8、list-style-type： none 用于去除ul中的列表项的圆点
9、浮动
浮动必要性：因为默认情况下div是纵向排列的，如果想改变方向，则浮动就很重要了
float: left/right让元素尽量向某个方向浮动，直到碰到他的父元素的边框为止
特别注意：如果一行不够排下所有元素，会自动换行，如果某个div过大，则会卡住别的div
10、清除浮动
clear：left/right/both
11、定位
position属性：static（默认）/relative/absolute/fixed/inherit
******先实践后回头看理论******
relative：相对原来的位置移动
元素框偏移某个距离，元素本身形状不变化，它本身的所占空间仍保留
例如： #s{ position:relative; left:50px;top:10px;}
absolute:绝对定位，参照物变为离自己最近的非标准流的元素
元素从文档流完全删除，并相对于其包含块定位，元素原来所占空间会关闭
元素从原来位置脱离，并让出自己的空间，后面的空间补上
fixed：其包含块固定为body，视窗本身
inherit：继承父类属性
