HTML主要是网页的载体，网页上的视频图片文字等等都是通过HTML的标签实现的，
CSS相对来说则是网页的表现，对网页进行修饰，改变字体，添加边框，设置背景颜色等等都是CSS可以做到的。
我对CSS和HTML的一些小的不同就是HTML中的大部分赋值都是依靠"="来实现的，而CSS则是依靠":"来做的。
要想将CSS的内容插入HTML中是需要方法来实现的，一般来说有三种方式1：内联式 2：嵌入式 3：外部式。
内联式就是直接在标签中插入CSS代码。嵌入式类似JavaScript，<style type="text/style"> <style>
外部式则是新建一个文件通过<link href="xxx.css" rel="stylesheet" type="txt/css"/>来实现的 xxx.css是CSS代码所在的文件，其余的则为固定写法。
CSS中比较重要的一点就是选择器
标签选择器就是直接以标签来进行书写样式
body{
color:"red";font-size:"large";
} 在<body>标签内部的文字都将改变成颜色是红色字体为大的形式。
类选择器
类选择器第一点要为标签设置一个类。比如<span class="LMX"> </span>
<span>标签的类名就是引号中的LMX，如何使用类选择器呢 类选择器的语法是英文原点 "."加上类名{添加的样式}。就是这样子实现的。
例<span class="LMX"hhhhhh</span>
.class{
color:"red";font-size："large";
}就可以实现对<span>内部文字的样式设置。
ID选择器类似类选择器，语法上只是将开头的英文原点改成了"#",同时是针对标签的ID进行
例：<span id="lmx">hhhhhhhh</span>
#lmx{
color:red;font-size:20px;
} 就可以对<span>里面的文字进行设置了。
子选择器
既然有了子选择器那就必须有父元素有子元素，子选择器只针对第一代子类。
如果第一代子类下面还有第二代子类name这个样式的设置并不会作用到第二代子类上面。
语法上.父类>子类{
CSS样式；
}
如果想作用在所有后代则需要使用包含选择器。包含选择器的语法相对于子类选择器的区别只有一点就是将">"改为"空格"
所以.父类 子类{
CSS样式
}
这样的话CSS样式就会作用在所有子类上 比如给表格加入边框等问题，加第一代子类和全部子类的效果就会有很多差距，表格所产生的子类代数较多。
伪类选择器：主要是用于针对那些不存在的标签进行样式设置的，比如对鼠标滑过的状态的样式进行设置，例:a:hover{color:red;}目前只有a:hover可以兼容所有浏览器。
分组选择器：可以给多个标签同时进行设置标签之间用逗号隔开","例：p,span{color:red;}。如果有多个<span>标签时，比如要对第二个<span>标签设置则需要#second span来实现。
继承：比如说<span>在<p>标签之内，<span>是<p>标签的子类，所以有的css样式作用在<p>标签上也会对<span>标签有作用。
当两个css样式同时作用在一个段落中只是一个作用在<p>标签上是标签选择器，一个作用在class上也就是class选择器,那么这个段落会显示权值较高的选择器，
ID选择器权值为100，class选择器权值为10，标签选择器权值为：1。
为一个标签先后的设置了三次样式比如第一次设置为红色第二次为绿色第三次为黑色，那么标签内的内容会是最后设置的也就是黑色，因为前面的会覆盖掉后面的，也就是层叠性。
如果为了这个样式有最高权值，不被改变，不会被后面的样式覆盖掉。那么就需要加入!important.例：p{color:red !imortant;}这样子p标签目前这个样式就有最高权值了。
一般网页的默认设置上，浏览器默认设置<网页制作者的设置<用户自己的设置,可是加入!important的CSS样式的设置高于用户自己的设置。
字设置：1：字体设置{font-family:"宋体";} 目前较多使用的是微软雅黑。可以直接在family后面的""写入汉字,兼容性较高的写法是{font-family:"Microsoft yahei";}
字号和颜色设置{font-size:12px; color:red;} 设置缩进{text-indent:2em;}2em是2倍文字大小。行高:{line-height:1.5em;} 设置文字之间的间距分为两种
1：设置中文字和字母之间的间距{letter-spacing:50px;} 2:设置单词之间的间距{word-spacing:50px;} 将文字或者图片居中，居左，居右{text-align:center}
center换成left和right就可以实现居左居右了。
元素分类
块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常见的块级元素。
块级元素每个元素独占一行，元素的高度、宽度、行高以及顶和底边距都可设置 在未设置宽度的前提下，是父容器的100%.
内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素不会独占一行，元素都在同一行中，而且不能对元素的宽 高 行高 底边距进行设置。所以元素宽高固定，和父容器无关。
内联块级元素：元素都在同一行中 元素的高度、宽度、行高以及顶和底边距都可设置 常用的也就是<img> <input>
元素转换：内联元素转化为块级元素 a{display:block;} 块级元素转化为内联元素 div{display:inline;}
盒子模型,一个盒子模型具有1：填充 2：边框 3：内容
边框是指围绕着内容以及补白的线,这条线可以设置粗细,颜色,实线虚线和点线。
{border:2px solid red;} px是设置边框的粗细的,red是设置线的颜色的,solid(实线),dashed(虚线),dotted(点线).边框分为上下左右四个方向，要想设置某个方向就可以使用
{border-top:2px;}这是上边框,左右分别是left和righ,下边框则是border-bottom
填充是指内容到边框之间的距离,同时也是分上下左右四个方向，{padding:30px }方向也是一样的用top left right bottom分别表示上左右下。例：{padding:20px 30px 40px 50px;}这种写法这个填充的像素是由顺时针设置到填充的，也就是top：20px right：30px bottom：40px left：50px;分开写的时候按照{padding-top:20px;padding-right:30px;}的写法写。上下的填充相同时代码中可以省略下填充的数值 上下相同左右相同的时候就先写上之后写右,左下的就省略啦。上下左右都一样时就只需要写一个就可以啦 左右相同省略左的数据。
边界：元素与其他元素之间的距离叫做边界，语法类似padding。
CSS设置中的width,height都是对盒子模型的内容来设置的，不包含填充和边框。
CSS的布局模型：
流动模型：如果浏览器是按流动型来布局的，那么块级元素会在包含元素内自上而下垂直的延伸分布，块级元素还是会独占一行。那么内联元素则会在包含元素内从左到右的水平分布。
浮动模型：如何让两个块级元素并排排列，就需要浮动模型将块级元素浮动过去，语法显示为 float：left; float:right;在页面的左侧或者右侧，两个块级元素也可以设置成一个左一个右。
层模型：相对精确，有三种形式 绝对定位(position:absolute) 相对定位(position:relative) 固定定位(position:fixed)
绝对定位(position:absolute)：就是相当于<body>也就是浏览器窗口进行定位 所以也就是相对于浏览器窗口向某个方向移,所以想要向左移动100px，那么语法上就是：right:100px;因为你的位置要比原先相对于浏览器窗口向右100px， 同理向上移50px也就是 bottom:50px,
相对定位(position:relative):就是相当于在移动之前把原位置先记住，然后相对于原位置进行移动 相对定位有一个特点就是偏移前的位置保留不动，也就是说如果原先有文字等在偏移前的位置上那么就会被元素遮挡，然后显示在偏移前元素的下面。
固定定位(position:fixed):固定定位是相对于用户所看见的窗口固定的，比如说固定在左下方，拖动滚动条也不会改变位置，会一直在页面下方处固定着。
相对于其他元素进行定位：需要使用绝对定位和相对定位,参照定位的元素要是相对于参照定位的元素的子元素。
例：<div id="box1">xxxxx
<div id="box2">xxxx</div>
</div> (box2是box1的子元素)
#box1{
position:relative;
200px;
height:100px;
}
#box2{
position:absolute;
99%;(宽度是父元素宽度的99%)
bottom:0px;
}
这样就可以实现box2相对于box1的定位啦。
居中水平设置：
内联元素的居中水平设置:在CSS中使用 text-align：center; (使用类选择器的方式选择HTML中的元素进行设置)。
定宽块级元素的水平居中设置:一般是固定元素的宽度然后使左右边距相等从而达到水平居中，所以就要使用到margin:auto;(这句话作用就是使左右边距相等)
.xxx{
300px;
margin:auto;(设置的左右边距)
}
不定宽块级元素的水平居中：
1：加入table表单 将所要居中的元素放在<table>内 然后在CSS中使用margin:auto;<table>表单记得要有<tbody><tr><td>.
2:将块级元素通过{display:inline;}的方法转换成行内元素，就可以使用text-align:center;来设置水平居中啦。
3:通过浮动模型和相对定位来设置的，第一先将父元素浮动到左侧，然后再向右移动50%，这样子父元素的左边就到了父元素以前定位的中间也就是中线，然后子元素随着父元素移动，形成子元素的左边线与父元素以前定位的中线重合，然后相对于中线子元素向右移动自身的50%就可以形成相对于以前的父元素的水平居中。
例:.父元素的class{
float:left;
position:relative;
left:50%;
}
.子元素的class{
position:relative;
right:50%;
}
就可以形成水平居中啦。
垂直居中：针对单行文本和多行文本来进行设置。
单行文本：通过设置行高与元素高度相等来实现垂直居中的，font-size与line-height的差值分成相等的两份作为文本顶部和底部，缺点，文字长度长于元素块的长度，就会形成脱离块。
父元素高度确定的多行文本:
1：依旧是加入<table>标签将需要垂直居中的元素放在<table>内，使用语法vertical-align:middle;来实现垂直居中。
2:加入display:table-cell;vertical-align:middle;来实现水平居中。(IE8及以上浏览器可以使用。)