- div+css布局：div是用于存放内容（文字，图片，元素）的容器
css是用于指定放在div中的内容的位置和外观。
使html文件内容减少，html变得简单；内容和样式分离
css可以统一网站风格
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
DOCTYPE：文档类型，用于指定DTD（说明当前这个html文件的版本）
- < 元素名 background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.5;">属性名：属性值；"/>
- <style type="text/css">
这里是内容
</style>
- 字体：font-size字体大小；font-weight字体粗细；font-style字体风格倾斜；color字体颜色
- text-decoration:underline;none;
滤镜技术filter：
- <style type="text/css">
img{
filter：gray；
}
</style>
鼠标悬停变回原来颜色
- <style type="text/css">
a:link img{
filter：gray；
}
a:hover img{
filter：""；
}
a:visited img{
color：red；
}
</style>
- 选择器：类选择器、id选择器、html选择器、通配符选择器
- 类选择器：<link rel="stylesheet" type="text/css" href="#">;用class="类选择器名"使用
.类选择器名{ .style1{
属性名：属性值； font-weight:bold;
... font-size:2px;
} }
- id选择器：用id="id选择器名"
#id选择器名{ #style2{
属性名：属性值； font-weight:bold;
... font-size:2px;
} }
- html选择器：html文件元素的名称
html元素名称{ body{
属性名：属性值；
... font-size:2px;
} }
- 当一个元素同时被id选择器、类选择器和html选择器修饰，优先级是
id选择器>类选择器>html选择器
- 一个元素最多只有一个id选择器，但是可以有多个类选择器。
- 在引用多个class选择器的时候，class="style1 style2"，以最后出现的类选择器样式为主
- 通配符选择器：所有元素都符合一种样式
*{
margin:0;padding:0;
}
margin: 10 10 10 10；
如果margin给出四个值,则表示 上，右，下，左
- 父子选择器:子选择器标签是html可以识别的标签；
父子选择可以有多级，适用于id选择器和class选择器
#style2 span span{color="red";
font-size="20";
}
- 在有些css中，我们可以多个选择器的共同部分提取出来，写在一起，简化css文件
- 块元素和行内元素
- 行内元素又叫内联元素，只能容纳文本或其他内联元素（不同浏览器不同），常见有<span>h和<a>
- 块元素一般从新行开始，可容纳文本，其他内联元素和其他块元素，即使内容不够一行，也会占满整行。常见有<div>和<p>
- 块元素和行内元素相互转换:display:inline;转为行内元素
display:block;转为块元素
- 流：标准流：布局中，元素按顺序排列出现
非标准流：布局中，某个元素脱离了标准流
- 盒子模型
- 浮动分为左浮动、右浮动和清除浮动。对块元素和行内元素都生效。向左/右浮动就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。float:left;right;文字环绕图片效果。
默认情况下：
调整后：
- 定位：用position对元素进行定位。属性值有static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(元素框的表现类似于position设为absolute，不过其包含的块是视窗本身).
- 格式：position:属性值
relative:元素框偏移某个距离（left和top），元素本身不变，原位置所占空间保留。参照点是原来本身的位置
absolute：元素从原来位置脱离,让出原来位置,被后面的元素战占有。参照点是离它最近的那个非标准流而言。
