首先我们说一下各种属性：
1.水平对齐方式属性：
left:把文本排列在左边。默认值：由浏览器决定
right：把文本排列在右边
center:把文本排在中间
justify:实现两端对齐文本效果
2.用于调图标的属性
font family:调节字体
font weight:调节粗细
font size:调节字体大小 lighter/bold/border/
text indent:首行缩进
font-stye:italic 文字样式
lettrt-spacing：字母间距
word-spacing:单词间距
line-height:文本行高
vertical-align:设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效
text-decoration:none :用来删除文本的下划线
text-transform: 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大
3.背景属性：
background-color +颜色就行
background-image+url（"图片路径"）
这两个只能选一个用 background repeat :重复方式 background no repeat:不重复
background-position ： center 背景图片的位置 居中
如果显示窗口小于背景图片那就只显示一部分，比如老师课堂讲的小黄人的例子，这个后面在html 中我会举这个例子。
话说上面这四个可以简写成一句： background:red ulr("图片路径") no-repeat right top;
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.smallPeopleyellow{ ???????????vertical-align: -20px; ???????} ???????.btn{ ???????????text-decoration: none; ???????} ????????/*利用了后代选择器*/ ???????.handler li .btn{ ????????? ???????????color: red; ???????} ???</style></head><body><div > ???<div>风景<img src="4.jpg " style="width: 30px ; height: 30px"></div></div><ul > ???<li><a href="" >click</a></li> ???<li><a href="" >click</a></li> ???<li><a href="" >click</a></li></ul></body></html>4.边框属性：
border-width:设置边框的宽度
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
5.列表属性：
list-style-type:设置列表项标志的类型
list-style-image:将图像设置为列表项标志
list-style-position:设置列表中的列表项的位置
list-style:简写属性，用于把所有用于列表的属性设置于一个声明中
6.diaplay属性
none: 隐藏某标签
block： 将内联标签设置为块级标签 注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline： 将块级标签设置为内联的标签 inline-block 可做列表布局
这边咱们再说一下：display:none和visibility:hidden的区别：
visibility:hidden： 可以隐藏某元素，但是就算是隐藏了可是他的空间还是要占用，而且并没有缩小，和隐藏前的一样，影响布局
display:none： 可以隐藏某个元素。并且隐藏了以后就不会占用任何空间。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????width: 200px; ???????????height: 200px; ???????????background-color:deepskyblue ; ???????????display:inline; ???????} ????span{ ?????display: block; ?????width: 200px; ?????height: 200px; ?????background-color: lawngreen;<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????width: 100px; ???????????height: 100px; ???????????border-right: solid red 2px; ???????} ???????ul{‘‘ ???????????padding: 0; ???????} ???????ul li{ ???????????list-style:none; ???????} ???</style></head><body></body><div ></div><ul> ???<li>1111</li> ???<li>1111</li> ???<li>1111</li></ul></html>7.外边距（margine）和内边距（padding）
也就是我们这几天一直在讲的盒子模型
margine：用于控制元素与元素之间的距离； margine的最基本用途就是控制元素周围空间的间隙，从视觉上达到互相隔开的目的
padding：用于控制内容与边框之间的距离;
border: 围绕在内边距和内容外的边框；
content: 盒子的内容，显示文本和图像
8.margine（外边距）
margine-top: 距顶端的距离
margine-bottom：距低端的距离
margine-left： 距左边的距离
margine-right: 距右边的距离
简写的格式： margine：10px 20px 20px 10px;
上边距 右边距 下边距 左边距
margine：10px 20px 10px;
上边距 左右边距 下边距
margine：10px 20px
上下边距 左右边距
居中应用
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*.c1{*/ ???????????/*width: 200px;*/ ???????????/*height: 200px;*/ ???????????/*background-color: royalblue;*/ ???????????/*padding: 50px;*/ ???????????/*!*padding: 50px 20px 10px 10px;*!*/ ???????????/*border: 5px solid red;*/ ???????????/*!**!*/ ???????/*}*/ ????????/*.c2{*/ ???????????/*width: 200px;*/ ???????????/*height: 200px;*/ ???????????/*background-color: gold;*/ ???????????/*padding: 50px;*/ ???????????/*!*padding: 50px 20px 10px 10px;*!*/ ???????????/*border: 5px solid red;*/ ???????????/**/ ???????/*}*/ ????????/*.s1{*/ ????????????/*background-color: rebeccapurple;*/ ????????????/*padding: 10px;*/ ????????????/*margin-right: 100px;*/ ????????????/*margin-left: 50px;*/ ????????/*}*/ ???????/*.s2{*/ ???????????/*background-color: green;*/ ???????????/*padding: 10px;*/ ???????????/*margin-left: 20px;*/ ???????/*}*/ ???????/*margin 的居中操作*/ ???????.c3{ ???????????width: 80%; ???????????height: 300px; ???????????background-color: gray; ??????????? ???????} ???</style></head><body><!--<div >DIV</div>--><!--<div >DIV</div>--><!--<span >span1</span>--><!--<span >span2</span>--><div ></div></body></html>9. margine collapse(边界的塌陷或说边界的重叠)
1.兄弟的div:
上面的margine-bottom和下面的margine-top会塌陷，也就是会 取上下两者margine里面最大值作为显示值
2.父子div：
if 父级中没有border,padding,inlinecontent，子级的margine会一直向上找直到找到某个标签包括border padding inline content中的其中一个，然后按照div进行margine
解决边界塌陷的问题:overflow:hidden 他会把溢出的都隐藏起来，弄了半天，反正当你遇到边界塌陷问题 就用overflow：hidden
10.overflow
scroll：溢出就会出一个滚动条
auto： 溢出就会出一个滚动条
hidden:溢出则隐藏
inherit
visible
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????width: 200px; ???????????height: 200px; ?????????overflow: hidden; ???????} ???</style></head><body><div > ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1> ???<h1>yuan</h1></div></body></html>11.padding(内边距)
单独使用填充属性可以改变上下左右的填充，缩写填充也可以使用，一旦改变一切都改变 设置同margine
12.float属性
a.基本浮动规则：
block元素和inline元素在文档流中的排列方式。
block就是块级标签，独占一行,多个block都是自己另起一行，默认block元素会填满其父元素的宽度，他可以设置:width、margin、padding属性
inline不会独占一行，多个行内元素会排列在同一行，直到一行元素排不下，才会换新一行，宽度随元素的内容而变化,inline元素设置width、heigth无效
b.常见的块级元素：
div form table p pre hi~h5 dl ol ul等等
c.常见的内联元素：
span a strong en lable input select textatea img br等
文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列
脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当作脱离文档 流的元素不存在而进行定位。
d.非完全脱离文档流 左右结构div盒子重叠现象，一般由于相邻两个div一个使用浮动而一个没有使用浮动
这样会导致div不在同一个平面上，但是内容不会造成覆盖现象，只有div形成覆盖现象
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????background-color: green; ???????????width: 200px; ???????????height: 200px; ???????????float: left; ???????} ????????.c2{ ???????????background-color: wheat; ???????????width: 400px; ???????????height: 100px; ????????????float: left; ???????} ????????.c3{ ???????????background-color: royalblue; ???????????width: 100px; ???????????height: 300px; ????????????float: right; ???????} ???</style></head><body><div ></div><div ></div><div ></div><div ></div></body></html>13.清除浮动
clear语法：
取值：
none：默认值，允许两边都可以有浮动对象
left:不允许左边有浮动现象
right:不允许右边有浮动现象
both:不允许有浮动对象
注意：clear属性只会对自身起作用，而不会影响其他元素
把握住两点：1.元素从上到下，从左到有一次加载
2.clear left对自身起作用，一旦左边有浮动，就切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题
14.position（定位）
static:默认值，无定位，不能当作绝对的参照物，并且设置标签对象的left top等值是不起作用的
relative:相对定位，参照物是自己，不会脱离文档流，可以使用top left解决定位
absoulte:脱离了文档流，按照已定位的父级定位，没有的话直接以border定位。
fixed：完全脱离文档流固定定位
15.选择器的优先级
！important（非规则的）最高
在规则内：
内嵌---》id---》class---》element
如果优先级一样，按加载顺序，谁先救谁执行
16.伪类
a:link（没有接触过的链接）,用于定义了链接的常规状态。 也就是例子中的未点击状态
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 例子中的悬浮在上面时的状态
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 点击时的状态
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。点击之后的状态
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*!*#a1:link{*! ??未点击状态*/ ???????????/*color: darkorange;*/ ???????/*}*/ ???????/*!*#a1:hover{*! ???悬浮时*/ ???????????/*color: green;*/ ???????/*}*/ ???????/*!*#a1:active{*! ??点击*/ ???????????/*color: red;*/ ???????/*}*/ ???????/*!*#a1:visited{*! ??点击之后的颜色*/ ???????????/*color:violet;*/ ???????/*}*/ ???????/*可以给他设长宽是因为它是块级标签，就是下面的这一种情况*/ ???????.c1{ ???????????width: 300px; ???????????height:200px; ???????????background-color: green; ???????} ???????/*设置c1悬浮时的样式*/ ???????.c1:hover{ ???????????background-color: red; ???????} ???????/*不能给span做长宽，因为他是内联标签，但是可以给他设置背景*/ ??????span { ??????????background-color: crimson; ??????????width: 200px; ??????????height: 300px; ??????} ???</style></head><body><a href="" >hellocss</a><div ></div><span>span</span></body></html>17.brfore after伪类:
p:before 在每个<p>元素之前插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个<p>元素之后插入内容
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????/*.inner1,.inner2{*/ ???????????/*width: 200px;*/ ???????????/*height: 200px;*/ ???????????/*border: blue;*/ ???????/*}*/ ???????/*!*块级独占一行*!*/ ???????/*.inner1{*/ ???????????/*background-color: crimson;*/ ???????/*}*/ ???????/*.inner2{*/ ???????????/*background-color: yellow;*/ ???????/*}*/ ???????/*.outer{*/ ???????????/*border: 2px solid red;*/ ???????????/*width: 100%;*/ ???????????/*height: 400px;*/ ???????????/*background-color: darkorange;*/ ???????/*}*/ ???????/*!*注意这里hover后面有个空格，然后才是.inner1，没有为什么，因为不这样写就会错，这就是hover这个伪类*!*/ ??????/*.outer:hover .inner1{*/ ??????????/*background:darkkhaki;*/ ??????/*}*/ ???????/*接下来我们来看一下before和after这个伪类*/ ???????/*为了某种布局效果我们自己就加一个伪类*/ ???????.c3:after{ ???????????content: "hello"; ???????????color: red; ???????} ???</style></head><body><!--<div >--> ???<!--<div ></div>--> ???<!--<div ></div>--><!--</div>--><div > ???div</div></body></html>18.inline-block 的间隙，正好也是我迷茫的一个地方
inline-block默认的空格符就是标签与标签之间的空隙造成的。
(1) 我们可以通过}
19.后台管理布局
个人认为这个就是用来调节页面布局的
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ??????????? ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.header{ ???????????width: 100%; ???????????height: 44px; ???????????background-color: #2459a2; ???????} ???????.leftmenu{ ???????????width: 250px; ???????????background-color:#ededed; ???????????border: 1px solid red; ???????????position: fixed; ???????????top: 44px; ???????????left: 0; ???????????bottom: 0; ???????} ???????.Con{ ???????????/*margin-left: 30px;*/ ???????????position: fixed; ???????????top:44px; ???????????left: 250px; ???????????right: 0; ???????????bottom: 0; ???????????background-color: wheat; ???????????overflow: auto; ???????} ???????.leftmenu .title{ ???????????list-style: none; ???????} ???????.leftmenu .title a{ ??????????? ???????????color: white; ???????????/*display: inline-block;*/ ???????????/*float: left;*/ ???????} ???????.title li{ ???????????width: 160px; ???????????height: 30px; ???????????background-color: grey; ???????????text-align: center; ???????????padding: 5px 30px; ??????????? ???????????line-height: 30px; ???????} ???????.Con h1{ ???????????margin-left: 30px; ???????} ???????.leftmenu ul{ ???????????width: 100%; ???????????padding: 0; ???????????margin-left: 15px; ???????} ???</style></head><body><div ></div><div > ???<div > ???????<ul > ???????????<li><a href="">菜单一</a></li> ???????????<li><a href="">菜单二</a></li> ???????????<li><a href="">菜单三</a></li> ???????</ul> ???</div> ???<div > ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????<h1>yuan</h1> ???????????</div></div></body></html>20.流程控制语句
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script> ????????// if else if ... ?else ?????/* ???????var num=76; ???????if (num>90){ ???????????alert("优秀") ???????} ???????else if (num>80){ ???????????alert("凑合") ???????} ???????else { ???????????alert("挺好的！") ???????} ???????*/ ?????// switch-case语句 ?????/* ???????var x=15; ???????switch (x){ ???????????case 1:alert("星期一");break; ???????????case 2:alert("星期2");break; ???????????case 3:alert("星期3");break; ???????????case 4:alert("星期4");break; ???????????case 5:alert("星期5");break; ???????????case 6:alert("星期6");break; ???????????default:alert("日"); ???????} ???????*/ ?????// 循环 for while ???????// for 条件循环（推荐使用） ????????for (var i=0;i<100;i++){ ????????????console.log(i) ????????} ???????// ================== ????????var arr=[11,44,"hello",true]; ????????for(var i=0;i<arr.length;i++){ ????????????console.log(arr[i]) ????????} ?????????遍历for循环 ????????for(var i in arr){ ????????????console.log(i); ????????????console.log(arr[i]) ????????} ????????// while 循环 ???????var count=0; ???????while (count<100){ ???????????console.log(count); ???????????count++; ???????} ???</script></head><body></body></html>21.选择器的优先级
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ?????/*p{*/ ?????????/*color: green;*/ ?????/*}*/ ?????/*id优先级最高*/ ?????/*#s1{*/ ?????????/*color: darkorange;*/ ?????/*}*/ ???/*.c1{*/ ???????/*color: lightpink;*/ ???????/*}*/ ?????/*优先级是这样的比如 id 是100 ?class是10 ?element是1，所以id的优先级最高*/ ???.c2 .c3 div{ ?????????color: red; ?????} ?????.c2 .c4{ ???????????color: green; ???????} ???????.c3 span{ ???????????color: black !important; 非规则的，比内嵌的还高 ???????} ???????#s4{ ???????????color: yellow; ???????} ???????.c2 span{ ???????????color: darkkhaki; ???????} ???????.c3 span{ ???????????color: blue; ???????} ???</style></head><body><DIV>div</DIV><p >PPP</p><div > ???<div > ???????<!--<div >0000</div>--> ???????<span style="color:firebrick;">0000</span> 这是内嵌式，比id的优先级还高 ????</div> ????<p>PPP</p></div></body></html>选择优先级!important(非规则的)最高在规则内： ?内嵌>id>class>element如果优先级一样,按加载顺序，谁先就谁执行前端学习之css二
原文地址：http://www.cnblogs.com/1996-11-01-614lb/p/7581487.html