CSS学习笔记

一.  css布局方式：

1. 默认的，按文档流的顺序，按HTML的结构顺序
2. 浮动方市
3. 定位方式

二.  css控制背景：

1. background-color：#ccc；
2. background-image：url（背景图像的位置及全称）
3. background-repeat：[repeat、no-repeat、repeat-x、repeat-y]（背景图像的重复方式
4. background-position：top[left、center、right]  center[left、center、right]  bottom[left、center、right]  x坐标，y坐标[第一个位置是水平坐标，第二个位置是Y坐标]左上角是：0,0;单位是像素
5. background-attachment：[scroll、fixed]（背景图像的依附方式）fixed：背景不随鼠标的滚动而滚动，scroll：背景随鼠标滚动而滚动

三.  浮动

1. 浮动是将块元素独占一行的属性取消，允许其他元素与其同行
2. 浮动是将快元素从原来的文档流模式中分离出来，它后的对象，就视它不存在
3. css把网页元素分为两类：一种是快，一种是内联元素；从快元素变为内联元素：display：inline，从内联元素变为块元素：display：block
4. ul与li默认轻快下是块元素，要让他们在一行中显示，就要用到浮动
5. 如果想让多个快，显示在同一行中，可以将，这些快，都设置为浮动，并且浮动方向相同

四.  清除浮动

1. 清除浮动可以去除前面对象浮动，对后面对象的影响
2. 当父元素，没有指定高度，并且子元素有浮动，这时，父元素的高度不会自动增加
3. 方法一：增加一个空标签，这个标签要去除浮动；方法二：给父元素，加overflow：hidden

五.  定位布局position

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

六.  盒子模型属性

1. 边界：margin（在盒子的外部）
2. 边框：border（盒子的边框大小）
3. 填充：padding（盒子内的填充物）
4. 内容：content（填充盒子内的东西）

七.  logo优化

1. logo图片尽量小
2. 一般情况下是作为背景放入的
3. 肯定加  h1   标签  提权
4. 搜索引擎对文本链接最友好。  <a href = "#">百度一下</a>
5. 一定给a添加  title属性，提高用户体验

八.  如果是行内元素，浮动之后就可以指定宽和高

九.  

1. text-decoration：文字下划线
   
2. a:link、a:visited、a:hover、a:active分别表示：链接、访问后、鼠标经过、鼠标点击
3. vertical-align 设置元素的垂直对齐方式。

网页制作规则：能用标准流做的，就不用浮动流；能用浮动流做的，就不用定位流。

按照稳定性来说，首先考虑的是盒子本身的宽度和高度，其次，再考虑padding，最后margin