老师的笔记:
前情回顾:
day49混乱即阶梯.1. 前情回顾 ???HTML ???????HTTP和HTML ???????文档机构 ???????????<!Doctype html> ???????????HTML ???????????head ???????????????<meta> ???????????????<title> ???????????????<link> ???icon ???????????????<style> ??直接写CSS样式 ???????????????<link> ???CSS文件 ???????????????<script> ?JS文件 ???????????body ???????????????常用标签: ???????????????????div ???????????????????span ???????????????????????????????????????h1~h6 ???????????????????a ???????????????????p ???????????????????img ???????????????????form ???????????????????????input ???????????????????????????text ???????????????????????????password ???????????????????????????number ???????????????????????????email ???????????????????????????radio ???????????????????????????checkbox ???????????????????????????????????????????????????????sumbit ???????????????????????????button ???????????????????????????reset ???????????????????????select ???????????????????????textarea ???????????????????????label ???????????????????ul ???????????????????ol ???????????????????dl ???????????????????table ???????????????标签属性 ???????????????????id ???????????????????class ???????????????????style ???????????????????????????????????????input ???????????????????????name ???????????????????????value ???????????????????????type ???????????????????form ???????????????????????上传文件的话 ???????????????????????都记不住,但是都能想起来的那个(课后自己补上) ???????????????????select ???????????????????????mutiple 多选 ???????????????????????selected 默认选中 ???????????????????????optgroup 分组显示(label属性=分组名) ???????????????????checkbox ???????????????????????checked 默认选中 ???????????????????hidden 隐藏 ???????????????????????????????????????input ????????????????????????disabled ???????????????????input type=text/password ???????????????????????readonly ?????--> 只读 ???????????????????????placeholder ??--> 提示信息 ???????????????????????????????????????????????CSS: ???????找到标签 修改样式 ???????????????选择器(找标签): ???????????基本选择器 ???????????????标签选择器 ???????????????#ID选择器 ???????????????.class选择器 ???????????????*(大包大揽)选择器 ???????????层级选择器 ???????????????后代选择器(空格) ???????????????子选择器(>) ???????????????毗邻选择器(+)/(label+input) ???????????????弟弟选择器(~) ???????????????组合选择器(,) ???????????属性选择器 ???????????????标签可以自定义属性 ???????????????[egon] ???????????????[egon=""]/input[type="button"] ???????????????????????????伪类选择器 ???????????????a:hover(浏览器怎么看) ???????????????????????选择器的优先级: ???????????????1.!important ?????????????????????不讲道理 ???????????????2.内联(直接在标签上写style属性) ??1000 ???????????????3.ID选择器 ???????????????????????100 ???????????????4.class选择器 ????????????????????10 ???????????????5.标签选择器 ?????????????????????1 ???????????????6.继承的 ???????CSS属性: ???????????????????????color ??????文本颜色 ???????????????????????background ?背景 ???????????????background-color ???????????????background-img ???????????????background-position(具体数值) ???????????????????????font ???????字体 ???????????????font-family ???????????????font-size ???????????????font-weight ???????????????line-height ?(垂直居中) ???????????????text-aligin ?(水平居中) ???????????????????????????border ??????边框 ???????????????border-color ???????????????border-style ???????????????borfer-width ???????????????????????????????border: 1px solid red; ???????????????border-radius ???????????????????????????????????CSS盒子模型: ???????????????????????????content (内容) ???????????????????????????????padding (内填充) ???????????????????????????border ?(边框) ???????????????????????????????magin ??(外边距) ???????????????????margin:0 auto; (块标签的居中) ???????????????????????????????a ???????????????text-decoration=none (去掉下划线) ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
今日内容:
float(浮动)和position(定位)
???????float(浮动) ???????????????left ???????????????right ???????????????none ???????????????????????????浮动规则: ???????????????浮动只控制自己 ???????????????如果前面的标签也是浮动的,就挨着放 ???????????????如果前面的标签不是浮动的,在下一行开始摆放 ???????????????????????????????????????????清除浮动: ???????????????clear: ???????????????????left ???????????????????right ???????????????????both ???????????????????none ???????????????????????.clearfix:after { ???????????????content: ""; ???????????????display: block; ???????????????clear: "both"; ???????????} ???????????????????????:after和:before ???????????????????????display: ???????????????块级标签特点: 独占一行, 可以设置长和宽 ???????????????内联标签特点: 可以放在一行,不可以设置长和宽,根据内容自适应长和宽 ???????????????????????????????none ??--> 不显示 ???????????????????????????????block ?--> 块级 ???????????????????????????????inline --> 内联 ???????????????????????????????inline-block ?--> 既在一行显示,又能设置长和宽 ???????????????定位: ???????????relative ?(相对定位) ???????????????????????????根据自己原来的位置来做定位 () ???????????????????????absolute ?(绝对定位) ???????????????根据 往上找已经相对定位的元素的左上角 来做定位 ???????????????(通常配合相对定位使用) ???????????????????????fixed ????(固定定位) ???????????????????z-index ???????????????????模态弹出框 ???????????????????????z-index: 999 ???????????z-index: 1000 ???????????????????????????day 49-css补充(终结)[浮动和定位]
原文地址：http://www.cnblogs.com/2012-dream/p/8109573.html