css基础
- css样式由选择符和声明组成，而声明又由属性和值组成。P{color:blue;}，选择符指网页中要应用样式规则的元素。属性与值之间 用：分隔，多条声明用；分隔
- css中用/*注释语句*/，html用<!—注释语句-->
- 从CSS样式代码插入的形式来看基本可以分为3种：内联式、嵌入式、外部式。
- 内联式就是直接把css代码直接写在现有的HTML标签中，即写在style=””双引号中，如果有多条语句可以写在一起，用分号隔开。
- 嵌入式：把CSS代码写在<style type=”text/css”> </style>标签之间。并且一般情况下嵌入式写在<head></head>之间。
- 外部式：把css代码写一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
- 标签 选择器：就是HTML中的标签，如<html><body><h1><p><img>
标签{CSS样式}
8.类选择器： . 类选择器名称{css样式代码} 使用class=”类选择器名称”为标签设置一个类 <span class=”stress”></span> .stress{color:red;}/*类前面要加入一个英文的圆点*/
9.ID选择器：类似于类选择器，但也有一些区别。为标签设置id=“ID名称”，而不是class=”类名称”；ID选择符钱前是#，而不是英文圆点。
10.类选择器与ID选择器的区别：ID选择器只能在文本中使用一次，而类选择器可以使用多次；类选择器可以同时为一个元素设置多个样式，而ID选择器不可以。
11.子选择器：用大于号>表示，用于选择某元素的第一代子元素，
如 .food>li{border:1px solid red;} c使class名为food下的子元素li加入红色边框。
12.包含选择器: 加入空格 ，用于选择指定标签 下的。.first span{color:red;}
13.两者的区别：>作用于元素的第一代后代，空格作用于元素的所有后代
14.通用选择器:功能最强大的选择器，使用*号指定，它匹配HTML中的所有标签元素。
15.伪类选择符：可以给HTML中不存在的标签（标签的某种状态）设置样式，如为某元素的鼠标滑过状态设置字体颜色。a:hover{color:red;} 在a标签使用hover可兼容所有的浏览器，虽然hover可以修饰所有标签，但兼容性不是很好。
16.分组选择符：多个标签设置同一个样式时，可以使用分组选择符逗号，如h1,span{}
17.CSS根据权值判断显示方式，层叠行：当权值相同时显示最后面的样式；重要性：使用！important解决，设置最高的权限。
18.文字排版-------字体 ：标签{font-family:””;} 粗体：标签{font-weight:bold;}
字号、颜色 ：标签{font-size:12px;color:#666} 斜体：标签{font-style:italic;}
下划线：标签{text-decoration:underline;} 删除线：标签{text-decoration:line-through}
字体缩写——1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
19.段落——缩进： p{text-indent:2em} 2em的意思是文字的2倍大小
行间距：p{line-height:2em;} 中文字间距与字母间隔：标签{letter-spacing:20px;}
英文单词间距{word-spacing:20px;}
对齐（块状元素中的文本图片）：标签{text-align:center(left、right)}
20.元素的分类：
1.块级元素（div p h1 form ul li）设置display:block 就是将元素显示为块级元素。一个块级元素独占一行；元素的高、宽、行高以及顶和底边距都可以设置；宽度不设置时都是父容器的100%。
2.内联元素（span a lable strong em）块状元素可通过display:inline设为内联元素。和其他元素在一起行；高、宽、顶及底部边距不可设置；宽及包含的文字图片宽不可变。
3.内联块状元素（img input）display:inline-block;和其他元素在一行；高、宽、行高以及顶和低边距都可设置。
21.盒模型：（div ul ol p h table等块级标签都具备盒子模型的特征）
1.边框：围绕内容和补白的线，可以设置线的粗细、样式、和颜色(三要素)。
div{border:2px solid red;}
border-style(边框样式)常有：dashed(虚线)dotted(点线)solid(实线)
border-width(宽度)：常用像素px border-color：设置为十六进制颜色
只为边框的一边设置边框:border-top/ border-bottom/border-left/border-rite
2.盒子包括：边界(margin)、边框（border）、填充（padding）、内容、
边界、边框、填充（上右下左顺时针）又包含top bottom left right
22、布局模型：网页中元素有三种布局模型：流动模型Flow、层 Laye 浮动Float
1.流动模型：网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。特征：块状元素在所处的包含元素内自上而下按顺序垂直延伸，会以行的形式占据位置；内联元素（a span em strong）会在所处的包含元素内从左到右水平分布。
2.浮动模型：块状模型总是独占一行，让两个块状模型并排，只需设置元素浮动。
任何元素默认情况下不是浮动的，如（div p table img）等元素可被定义为浮动。
3.层模型：为了让html元素在网页中精确定位，css定义了一组属性支持层布局模型。绝对定位（position:absolute）、相对定位（relative）、固定定位（fixed）
A.绝对定位：如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
B.相对定位：需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。
C.固定定位：fixed：表示固定定位与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
D.relative与absolute组合使用：参照定位的元素必须是相对定位元素的前辈元素；参照定位的元素必须加入position:relative；定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
22.颜色值：字体颜色（color）、背景颜色（background）、边框颜色（border）
英文命令颜色、RGB颜色、十六进制颜色。
23.长度值----像素（px）；em：就是本元素给定字体的font-size；
百分比：p{font-size:12px;line-height:130%}设置行间距为字体的130%
24.水平居中
行内元素：如果被设置的元素为文本、图片、等行内元素，水平居中是通过给父元素设置Text-align:center来实现的。
定宽块状元素：如果元素为块状元素时，text-align:center就不起作用了。这时分定宽块状和不定宽块状元素。满足定宽和块状两个条件可设置“左右margin”值，为“auto”来实现居中。
不定宽块状元素：加入table标签(第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。)；
设置display:inline方法(改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：)；
设置position：relative和left:50%(通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%[相对于浏览器左边框移动到水平最中央]，子元素设置 position:relative 和 left:-50% 【向左移动自己的%50】来实现水平居中。)
25.垂直居中
父元素高度确定的单行文本：的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
父元素高度确定的多行文本：父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
