link标签引入外部的css文件
<link rel = "stylesheet" type = "text/css" href = "stye.css"/>css的注释 /* */
块级元素就是会独占一行的元素，div元素主要用来对页面进行布局。 内联元素，指的是只占自身大小的元素，不会占用一行，span没有任何的语义，span标签专门用未选中文字，然后为文字未设置样式。 a元素可以包含任意元素，除了他本身。 p元素不可以包含任何块元素。
1.元素选择器（标签名{}） 2.id选择器（#id属性值{}） 3.类选择器 （.class属性值{}）可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。 4.选择器分组（选择器1，选择器2，选择器N{}）取并集 比如 #p1, .p2,h1{} 5.通配选择器（{}） 6.复合选择器（选择器1选择器2选择器N{}）取交集 比如：span .p3{} 7.后代元素选择器（祖先元素 后代元素{}）比如 #d1 p span{} 8.属性选中器（[属性名]选取含有指定属性的元素 /[属性名 = “属性值”]/[属性名^=“ab”]选取指定以属性值开头的属性元素 /[属性名$=“ab”]结尾/[属性名=“ab”]包含） 比如：p[title]{}/p[title = “hello”]{} 9.父子元素（父元素>子元素） 10.兄弟元素选择器（前一个+后一个/前一个~后边所有）
1.给连接定义样式： a:link 正常链接 ，a:visited 访问过的链接（只能设置字体颜色）， a:hover 鼠标滑过的链接，a:active 正在点击的链接。 ：hover和：active也可以为其他元素设置（IE6中，不支持） 2.input定义样式： input:focus 获取焦点，input:before 指定元素前， input:after 指定元素后，input::selection 选中的元素 (火狐中使用 ：：-moz-selection)。
1.首字母-：first-letter;首行-：first-line :before表示元素最前边的部分(:after)，通过content可以向before和after的位置添加一些内容。比如：p:before{content:“我会出现”;color:red;} 2.子元素的伪类 ： first-child 可以选中第一个子元素 ：last-child 可以选中最后一个子元素 ：nth-child(n)指定要选中的第几个子元素，even 表示偶数位置的子元素，odd表示奇数位置的资元素。 ：first-of-type/:last-of-type/:nth-of-type 是指当前类型的子元素中排列 比如 p:first-of-type是指父元素中第一个p元素。p:first-child 是指父元素中第一个元素，如果第一个元素不是p元素，那么就没有效果影响。 3.否定伪类:not(选择器）表示可以从已选中元素中剔除某些元素
祖先元素的样式，也会被他的后代元素所继承。但是并不是所有的样式都会被子元素所继承，比如：背景，边框和定位相关的样式都不会被继承
1. 内联样式（1000）>id选择器（100）>类和伪类（10）>元素选择器（1）>通配（0）>继承的样式（没有优先级） 2.当选择器中包含多种选择器时，需要将多种选择器的优先级相加后再比较。但是注意，选择器优先级计算不会超过他的最大的数量级。比如 #p2<p#p2*如果选择器优先级一样，则使用靠后的样式。并集选择器的优先级是单独计算。
在网页中垂直方向的相邻外边距会发生外边距的重叠,所有的外边距重叠指弟兄元素之间的相邻外边距会取最大值而不是取和。 **如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。**前提是相邻，如果不相邻（被内容隔开，被内边距或者边框隔开）
很多元素都设置了一些默认的margin和padding。而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的margin和padding统统的去掉。 *{ margin:0; padding:0; }
1.内联元素不能设置width和height 2.设置水平内边距，内联元素可以设置水平访问的内边距 3.垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局。 4.内联元素可以设置边框，而是垂直的边框不会影响到页面布局 5.水平方向的相邻外边距不会重叠，而是求和；内联元素不支持垂直外边距
1.通过display样式可以修改元素的类型 可选择：inline:可以将一个元素作为内联元素显示，block：可以将一个元素设置块元素显示。inline-block将一个元素转化为行内块元素。 2.inline-block:将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行 3.none:不显示元素，并且元素不会在页面中继续占有位置。 4.display:none；不会在页面中显示，并且不再占据页面的位置。visibility：hidden隐藏元素，它的位置会依然保持
通过overflow可以设置父元素如何处理溢出内容： 可选值：-visible 默认值 -hidden 溢出的内容，会被修剪，不会显示 -scroll,会为父元素添加滚动条 -auto 自动添加滚动条
1.当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，脱离文档的位置。 2.元素浮动后，会尽量向页面的左上或这是右上漂浮， 直到遇到父元素的边框或者其他的浮动元素 3. 如果浮动元素上边是一个没有浮动的块元素，则浮动元素 不超过块元素。 比如：
<head> <style> .box1 { width: 100px; height: 100px; background-color: red } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } .box3 { width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div class='box1'></div> <div class='box2'></div> <div class='box3'></div> </body>4.浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。
<head> <style> .box1 { width: 600px; height: 200px; background-color: red; float: left; } .box2 { width: 600px; height: 200px; background-color: blue; float: left; } .box3 { width: 200px; height: 200px; background-color: green; float: right; } </style>5. 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。用浮动来设置文字环绕图片的效果。 6. 当元素设置浮动以后，会完全脱离文档流 块元素脱离文档流以后，高度和宽度都被内容撑开。 7. 开启span的浮动，内联元素脱离文档流以后会变成块元素。 比如：
<head> <style> .span1 { width: 100px; height: 100px; background-color: red; float: left; } .box2 { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <span class='span1'></span> <div class='box2'></div> </body>通过position属性来设置元素的定位 可选值： static：默认值，元素没有开启定位 relative:开启元素的相对定位 absolute:开启元素的绝对定位 fixed:开启元素的固定定位（也是绝对定位的一种） 可以通过left right top bottom四个属性来设置元素的偏移量 1.相对定位是相对于元素在文档流中原来的位置进行定位 2.相对定位的元素不会脱离文档流(块级元素还是块级元素，内联元素还是内联元素） 3.相对定位会使元素提升一个层次 比如：
<style> .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100px; height: 100px; background-color: blue; position: relative; left:50px; top: 100px; } .box3 { width: 100px; height: 100px; background-color: yellow; } </style>1.开启绝对定位，会使元素脱离文档流 2.开启绝对定位以后，如果不设置偏移量则元素的位置不会发生变化 3.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 4.绝对定位会使元素提升一个层级 5.绝对定位会改变元素的性质（内联元素变成块元素，块元素的宽度和高度默认都被内容撑开）
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样（固定定位永远都会相对于浏览器窗口进行定位）固定定位会固定在浏览器窗口某个位置，不会滚动条滚动
css中高度设置百分比但是没有效果 原因：百分比的大小是相对其父级元素高度的大小。对于宽度来说：其父级元素无须确定宽度就能设置百分比。但对于高度不同：若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式。 eg：尝试加body{height:100%},但并没有用。因为body的父级元素的高度还没定下来。因此还需对html元素设置高度；或者在*{}中设置高度百分比。 Css3新单位学习链接
垂直居中详解链接
