1.先解释一下文档流
就是HTML的一种机制,块元素单独占一行(比如 div),内联元素不换行(a标签,img标签);
2.几种定位方式
2.1 static
HTML默认定位方法,服从文档流(flow),自适应的,不需要我们设置。
2.2 relative
相对定位,相对于自己原来的位置(参照物是自己),可以使用bottom,top,left,right等定位,但是服从文档流,仍然占据着自己原来的位置;
2.3 absolute
绝对定位,参照物是祖先有过position:relative或者position:absolute的元素,可以使用bottom,top,left,right等定位,但是absolute定位会从文档流中删除,就是原来自己占得位置会取消;祖先有过relative或者absolute标签,使用bottom top left right怎样都不会越过祖先的,需要使用margin才行。
2.4 fixed
absolute参照是上一个定位过的祖先(static不算),如果元素的参照物是文档,使用 position:fixed实现;
2.5 float
浮动标签,就是对象从文档中浮起来了,不在文档流中,值有left,right,none;但是float有时候会影响其他标签操作,一般我们在float的父元素后面添加 clear:both来清除;
2.6 <link>标签最重要的两个属性rel,href;<link rel="stylesheet" href="位置" >;rel指明该标签是css标签,href指明css文件所在位置;
2.7 padding,margin都是干嘛用的?
padding:元素的内边距就是元素的边框和元素内容之间的距离;比如 h1{padding:10px,15px},h1的内容离上下边框10px,离左右边框15px(内容是否是文本内容?);
margin:元素的外边距就是元素的边框外面的距离,可以有负值;
3. table标签
对于table我们需要关心的一般有:行(tr),列(td,单元格),单元格内容分布方式()或者用padding填充,字体大小,字体颜色,高度,宽度,每个单元格都有border(为了美观要不要合并)
行:tr;
单元格:td;
单元格填充:padding;
字体大小,颜色;
border:table的边框,要不要合并;
4.点击a标签,改变a标签的class
$(".trtitle td:has(a)").click(function() { var a = $(this).find("a"); if(a.attr("class").indexOf("down") == 0) { $(this).css("color", "#d34a22"); a.attr("class", "up"); $(this).siblings().css("color", "").find("a").each(function() { $(this).attr("class", "down"); }); } else if(a.attr("class").indexOf("up") == 0) { $(this).css("color", "#d34a22"); a.attr("class", "down"); $(this).siblings().css("color", "").find("a").each(function() { $(this).attr("class", "down"); }); } else { $(this).siblings().add(this).css("color", "").find("a").each(function() { $(this).attr("class", "down"); }); } query(a.attr("field"),a.attr("class").indexOf("up") == 0 ? "asc" : "desc"); });
5.使用jquery动态生成html元素示例:
1 var tdElement = function (data) { 2 var tdNode = ' 3 return tdNode; }
6. text-align 块元素的文本排列方式,值有 left right center(非常有用); vertical-align: 行元素的对齐方式(可能会往上一点或者往下一点),有text-bottom,text-top; line-height:行间距; z-index:表示叠加顺序,值越大,优先级越高,越会放在前面; font:定义字体,font-family(类型),font-size(大小),line-height(行间距);
7. 图片背景在一行的方式有: 可以选择div装这两种元素, 1. 如果是背景图片,然后div设置成: background: url("img/show_pdt_tit.png") no-repeat left center; 2. 如果就是一个图片<img>,图片css样式加上 vertical-align:middle。 3. 图片和文字都用div修饰,那每个div都加上 display:inline-block。